Whether you are fairly new to web development or you've been practicing for a while, it's always exciting to come across a shortcut or a tip for simplifying your code that you hadn't been aware of before. In this article, you'll find a variety of suggestions that will help you improve your craft and your productivity.

This collection of web development tips assumes that you already know HTML, CSS, and JavaScript to some extent, but perhaps have forgot or never seen some of the tips shared here.

All of the examples here use vanilla JavaScript to avoid appealing only to users of specific web frameworks. To make the experience more interactive, most of the examples run live in this web page. You can also copy the code into a .html file and open it in a web browser.

For information about fundamental web topics like HTML, CSS, and JavaScript that are not covered here, or to get more detail on topics that are covered here, your first stop should be the Mozilla Developer Network (MDN) Web Docs. Start a web search with "MDN"; for example, "MDN CSS transform".

Another great resource is "Can I use" which provides details on browser support for all fundamental web development features.

Many of the tip descriptions contain links to MDN pages and other resources to make it easy to access more detailed information.

HTML

Semantic elements

HTML5 introduced many "semantic" elements. These more specifically describe the intent of certain kinds of markup than a more generic element, such as div. They also provide more context to assistive technologies, such as screen readers.

Some of the most commonly used semantic elements include:

• article
• aside
• details
• figcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary
• time

For descriptions of each of these elements, see the MDN HTML elements reference.

Two key tips to keep in mind:

• In most cases, the paragraph element <p> should be used instead of <div> when the content is only text to be rendered.
• In most cases, click events should be associated only with <button> elements, not with generic elements like <div>.

Accessible Rich Internet Applications (ARIA)

ARIA defines a set of HTML attributes that make certain HTML elements more accessible to people with disabilities. This is a large topic and only the surface is scratched here.

Sometimes button elements do not contain text that makes their purpose clear. They may only include an emoji, img or svg element. In this case the aria-label attribute should be added so devices such as screen readers can describe the purpose of the button. For example:

<button aria-label="Fire the missiles">🚀</button>

The table below summarizes the ARIA attributes. For more detail, see the W3C documentation.

TODO: Are these only needed when using HTML elements in a non-standard way? For example, is role="button" only needed on non-button elements (like a div)? It seems like we should just always using the button element for buttons. Is aria-valuemax only recommended when creating a custom "range widget" rather than using something like <input type="range" max="50" />.

In addition to these, a role attribute can be added to an HTML element with one of the values described at Using ARIA: Roles, states, and properties.

input element type attribute

HTML5 added many values for the input element type attribute. These can change the way the element is rendered and provide additional input validation. The values include:

• checkbox
• color
• date
• datetime-local
• email
• file
• image
• month
• number
• password
• radio
• range
• search
• tel
• text
• time
• url
• week
• ... and a few more less commonly used values

For details on these attribute values, see the MDN input element page.

Form validation

HTML provides good form validation with nice error messages. Consider using this before reaching for a form library that is specific to a given web framework. Often what works well is to:

• Enclose all form elements, such as button, input, select, and textarea, in a form element.

• Include only one "submit" button. This is the default type of a button element. To include button elements that do not submit the form, set the type attribute to button.

• Mark required form elements with the require attribute.

• Use appropriate input type attribute values, such as email and tel.

• Use other input attributes such as:

  • min and max for allowed numeric ranges
  • minlength and maxlength for allowed text lengths
  • pattern for regular expressions to be matched

Use CSS pseudo-classes to style form elements based on their validity. These include:

• :required
• :optional
• :invalid (triggers immediately)
• :valid (triggers immediately)
• :user-invalid (triggers only after user interaction)
• :user-valid (triggers only after user interaction)
• :blank
• :placeholder-shown
• :in-range
• :out-of-range

Events fired by input elements

The input element fires many events, two of which are change and input.

• A change event is fired when a user changes the value AND focus leaves the element.
• An input event is fired after every change to the value.

For example, if a user types "abc" into an input, an input event will be fired after each character, whereas a change event will only be fired once after focus leaves the input.

Value of input elements

The value displayed in an input element is specified by an attribute that is determined by the value of its type attribute. For most input types, the value attribute is used for this purpose. But when the type is checkbox or radio, the value is specified using the checked attribute.

input and datalist

An input element can have an associated datalist. This causes the input to act like an "auto-complete". New values can be added to the datalist, and existing values can be deleted. This will change the options displayed in the input.

Here is an example where the user can select a color. Initially the only values in the datalist are blue, green, and red. But the user can add more colors. Try adding more colors and then type into the input to see the list filtered to only colors that match.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>input/datalist Demo</title>
    <style>
      #datalist-demo form {
        margin-bottom: 1rem;
      }
    </style>
    <script>
      const INITIAL_COLORS = ['blue', 'green', 'red'];

      window.onload = () => {
        const form = document.querySelector('#datalist-demo form');
        const addBtn = form.querySelector('button');
        const newColorInput = form.querySelector('input');
        const colorInput = document.getElementById('color');
        const colorsDataList = document.getElementById('colors');
        const report = document.getElementById('report');

        function addColor(color) {
          // Create a new option element to add to the datalist.
          const option = document.createElement('option');
          option.setAttribute('value', color);

          // Insert the new option in the datalist
          // so they remain in alphabetical order.
          for (const child of colorsDataList.children) {
            const thisColor = child.getAttribute('value');
            if (color < thisColor) {
              colorsDataList.insertBefore(option, child);
              return;
            }
            if (color === thisColor) return; // avoids duplicates
          }
          colorsDataList.appendChild(option);
        }

        INITIAL_COLORS.forEach(addColor);

        // When the form is submitted, add a color to the datalist.
        form.addEventListener('submit', event => {
          event.preventDefault();
          addColor(newColorInput.value);
          newColorInput.value = '';
        });

        // Enable the "Add Color" button only
        // if a new color has been entered.
        newColorInput.addEventListener('input', event => {
          if (event.target.value) {
            addBtn.removeAttribute('disabled');
          } else {
            addBtn.setAttribute('disabled', 'disabled');
          }
        });

        // Report color selections.
        colorInput.addEventListener('change', event => {
          report.textContent = 'You selected ' + event.target.value + '.';
        });
      };
    </script>
  </head>
  <body>
    <section id="datalist-demo">
      <form>
        <label for="new-color">New Color:</label>
        <input id="new-color" />
        <button disabled>Add Color</button>
      </form>

      <label for="color">Color:</label>
      <input id="color" list="colors" bind:value="{color}" />
      <datalist id="colors"></datalist>

      <p id="report">No color has been selected.</p>
    </section>
  </body>
</html>

Dialogs

See HTML dialog Element

Popovers

An HTML button element can trigger showing another element in a popup. The popup is dismissed by clicking outside it or by pressing the escape key. As shown here, you can also add a close button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Popover Demo</title>
    <style>
      button {
        background-color: cornflowerblue;
        border: 1px solid gray;
        border-radius: 0.5rem;
        padding: 0.5rem;
      }

      .popover {
        border: none;
        font-family: sans-serif;
        position: relative;
        padding: 1rem;
        padding-top: 2.5rem;

        & .close {
          position: absolute;
          top: 0px;
          right: 0px;

          background: none;
          border: none;
          font-size: 2rem;
          line-height: 2rem;
          margin-right: 0.5rem;
          padding: 0;
          z-index: 1;
        }

        & .close:hover {
          cursor: pointer;
        }

        &::backdrop {
          background: rgb(0 0 0 / 50%);
        }
      }
    </style>
  </head>
  <body>
    <button popovertarget="my-popover">Toggle Popover</button>
    <div class="popover" id="my-popover" popover>
      <!-- Values for popovertargetaction are "hide", "show", and "toggle". -->
      <button
        class="close"
        popovertarget="my-popover"
        popovertargetaction="hide"
      >
        ×
      </button>
      Popover content goes here.
    </div>
  </body>
</html>

figure element

The figure element associates a caption with any content. Typically the content is a single img element, but it can be any content such as a code or picture element. The caption is specified with a figcaption element. Typically there is only one and it appears either before or after all the content.

The following example adds a caption to an image:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Figure Demo</title>
    <style>
      img {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="./comet.jpg" alt="Comet" />
      <figcaption>Comet, the Whippet</figcaption>
    </figure>
  </body>
</html>

meter element

The meter element represents a measurement within a known range using a filled bar. It supports the following attributes:

• min: defaults to 0
• max: defaults to 1
• low: defaults to min
• high: defaults to max
• optimum: number between min and max
• value: number between min and max

By default, the bar will be orange if the value is less than low or greater than high. Otherwise it will be green. The optimum value seems to have no effect.

For example:

<label for="temperature">Temperature:</label>
<meter
  id="temperature"
  min="0"
  max="100"
  low="20"
  high="70"
  optimum="60"
  value="55"
>
  55
</meter>

Lazy Loading

To avoid loading img and iframe elements that are not scrolled into view, add the loading="lazy" attribute. As of July 2021 this is not yet supported in Safari and Firefox does not support this on iframe elements.

Browsers can implement this to begin loading just before the associated elements come in to view. They can even take network speed into consideration in order to load the elements even sooner when a slow connection is detected.

It is recommended to only add this attribute to img and iframe elements that do not require scrolling after the initial page load in order to view them.

CSS

CSS property sources

CSS property values come from the following four sources:

1. CSS specification defaults
2. Browser (user agent) defaults
3. User stylesheets (not widely supported)
4. Author stylesheets (site-specific)

User stylesheets allow users to apply custom styling to any site they browse. They are supported in Safari and IE, but not in Chrome or Edge. In Firefox they are not supported by default, but support can be enabled by setting toolkit.legacyUserProfileCustomizations.stylesheets to true. To enable user stylesheets in Safari, select Preferences ... Advanced, click the drop-down labelled "Style sheet", and select a CSS file.

For example, to hide the Twitter left and right sidebars in Safari, create a .css file containing the following, make it the user stylesheet, and restart Safari.

/* Twitter left sidebar */
#react-root header[role='banner'] {
  /* !important is needed here because
     the author stylesheet sets display to flex. */
  display: none !important;
}

/* Twitter right sidebar */
[data-testid='sidebarColumn'] {
  /* !important is needed here because
     the author stylesheet sets display to flex. */
  display: none !important;
}

An issue with user stylesheets is that they do not target specific web sites. They affect any visited site containing elements that are targeted by the CSS rule selectors.

The precedence order from lowest to highest of CSS rules found in the sources above is:

1. CSS specification
2. Browser (user agent)
3. User
4. Author
5. animations (using @keyframes)
6. Author with !important
7. User with !important
8. Browser (user agent) !important
9. transitions

Note how the order of sources with !important is opposite from the order of sources without it.

Inheritable CSS properties

The value of some CSS properties for an element is inherited from its parent element by default. It would be undesirable this to be the case for all properties. For example, if border was inherited by default, adding a border to an element would add the same border to all of its descendant elements.

The following CSS properties are inheritable by default:

• border-collapse
• border-spacing
• caption-side
• color
• cursor
• direction
• empty-cells
• font-family
• font-size
• font-style
• font-variant
• font-weight
• font-size-adjust
• font-stretch
• font
• letter-spacing
• line-height
• list-style-image
• list-style-position
• list-style-type
• list-style
• orphans
• quotes
• tab-size
• text-align
• text-align-last
• text-decoration-color
• text-indent
• text-justify
• text-shadow
• text-transform
• visibility
• white-space
• widows
• word-break
• word-spacing
• word-wrap

CSS global values

In the CSS specification, all CSS properties support the global values inherit, initial, unset, and revert. All modern browsers support these, but IE only supports inherit.

Specifying a value of inherit on a non-inheritable property causes it to inherit from its parent element, overriding the fact that it is not inheritable by default.

The CSS specification does not define a default value for all properties. When initial is used as the value of a property for which the CSS specification does not specify a default, the browser default is used instead.

The following CSS rule resets all properties on all elements to the CSS specification defaults:

* {
  all: initial;
}

Specifying a value of revert causes a property to use the value it would have if it wasn't set by an author stylesheet. This means the value could come from the CSS specification, a browser stylesheet, or a user stylesheet.

Size units

CSS supports many units for expressing sizes. Absolute units include:

• cm for centimeters
• in for inches
• mm for millimeters
• Q for quarter millimeters
• pc for picas
• pt for points
• px for pixels

Of these, only px is commonly used.

Relative units include:

• ch - width of "0" in current font
• em - parent font size in font-size property; current font size in other properties
• ex - height of "x" in current font
• lh - line height of current element
• rem - root element (html) font size; stands for "root em"
• vh - 1% of viewport height
• vmin - 1% of smallest viewport dimension
• vmax - 1% of largest viewport dimension
• vw - 1% of viewport width

Of these, the mostly commonly used are rem, vh, and vw.

An important benefit of using rem as the unit for nearly all sizes is that it enables scaling everything in the web site by simply changing the font size of the html element, which defaults to 16px. A web app can allow each user to modify this size, perhaps saving their preference in localStorage.

When the value is zero, a unit is not required. CSS linters encourage not supplying a value in that case. For example, 0 is preferred over 0px.

Viewport units

There are four CSS viewport units.

The size 100vw is the full viewport width, including the body margin.

The size 100% is the full width of the parent element. For children of the body element, this does not include the margin. If the body margin is zero, 100vw and 100% are equivalent. If the body margin is not zero, setting the width of a top-level element to 100vw will cause it to overlap the right edge of the viewport, but setting the width to 100% will not. For this reason 100% is often preferred over 100vw.

The example below demonstrates the difference between 100vw and 100%. Notice the right borders and the use of box-sizing: border-box; which is explained later.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Viewport Units Demo</title>
    <style>
      body {
        margin: 1rem;
      }

      div {
        box-sizing: border-box;
        display: flex;
        font-size: 1rem;
        outline: 1px solid black;
        padding: 1rem;
      }

      div > div {
        flex-grow: 1;
      }

      .percent100 {
        width: 100%;
      }

      .vw100 {
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <div class="vw100">100vw</div>

    <div class="percent100">100%</div>

    <div class="percent100">
      <div>
        <div class="percent100">left</div>
      </div>
      <div>
        <div class="percent100">right</div>
      </div>
    </div>
  </body>
</html>

Resets

A CSS reset is a set of CSS rules that attempt to set the CSS properties of standard HTML elements so they render the same across all popular web browsers. There are many such resets available. The most popular is normalize.css.

To use normalize.css:

1. Download it from the link above.
2. Add the following in the head element of HTML files:

<link rel="stylesheet" href="normalize.css" />

CSS variables

CSS variables (a.k.a. custom properties) are useful for storing and referring to values that are used in multiple places. Changing the value of a variable updates all the property values where it is used. Common uses include storing the values of colors and sizes.

To define a CSS variable, add a line in any CSS rule with the syntax:

--some-var-name: some-value;

The variable is available for use in the rule where it is define and in any rules that apply to descendant elements of elements matched by this rule.

To refer to a CSS variable in the value of a CSS property, use the following syntax:

var(--some-var-name)

To add a default value to be used if the variable is not defined, use the following syntax:

var(--some-var-name, default-value)

The default value can be specified with another var. For example, the following uses --border-color if it is defined. Otherwise it will be --accent-color if it is defined or black if neither are defined.

var(--border-color, var(--accent-color, black));

The following example defines and uses several CSS variables.

/* This matches the root element "html". */
/* All other CSS rules can use variables defined here. */
:root {
  --accent-color: blue;
  --border-color: red;
  --primary-color: cornflowerblue;
}

p {
  color: var(--primary-color);
}

.demo {
  display: inline-block;
  border: 5px solid var(--border-color, var(--accent-color, black));
  padding: 1rem;
}

.circle {
  /* This variable can only be used in this rule
     and in rules that match descendant elements */
  --size: 4rem;

  border: 1px solid var(--primary-color);
  border-radius: calc(var(--size) / 2); /* 50% is preferred */
  height: var(--size);
  width: var(--size);
}

Later we will see how to get and set the values of CSS variables in JavaScript code.

I have still have some questions.

Why can't we reference CSS variables with just their name instead of using the var function? I understand that has the advantage of being able to specify a value to use if the variable is not defined, but often we know it will be defined.

Why did they choose to start variable names with -- instead of $ like Sass variables? That is one character shorter and was already a familiar convention.

Box model

The CSS box model defines how padding, border, and margin are added to elements.

• Padding is outside the content and inside the border can be set to 0.
• The border is optional.
• Margin is outside the border and can also be set to 0.

Padding, border, and margin can be specified to be the same on all four sides or to be different on each side.

Many CSS properties that can effect the four sizes of the box differently have a shorthand version that supports specifying a different value for each side. The values are listed in clockwise order starting with the top. Also, the mnemonic "TRouBLe" serves as a reminder that the order is top, right, bottom, and left. When only two values are specified, the first affects the top and bottom (vertical) and the second affects the left and right (horizontal).

box-sizing property

When an element has a specified width and height, by default those apply to the content and do not include the padding, border, and margin. This is because the CSS box-sizing property defaults to content-box.

If box-sizing is set to border-box, the width and height include the content, padding, and border, but not the margin. Frequently this is the desired value. There are no other supported values for the box-sizing property.

border-radius property

The border-radius property changes the corners of an element. to be curved instead of square. Specify one value for circular corners (same for each corner), two values for elliptical corners, or four values for a different curve in each corner. The possible values are quite complex. See MDN for details.

To change the shape of an element to an oval, set border-radius to a large pixel value such as 999px. This actually uses a value that is half the length of the shortest side.

box-shadow property

The box-shadow property adds shadows to one or more sides of an element. Like the outline property, it does not add to the size of the element, so it does not affect element layout. Unlike the outline property, its width can be specified.

The most common examples of using shadows are to:

• Make the element appear raised above the page by adding outset shadows on the right and bottom sides.
• Make the element appear sunken into the page by adding inset shadows on the top and left sides.
• Frame the element by adding outset shadows on all four sides.

The box-shadow property takes 3 to 5 values.

Additionally, the inset keyword can precede the color to cause the shadow to be drawn on the inside of the element rather than on the outside (referred to here as "outset") and on the opposite side of the element.

Setting offset-x to a non-zero value adds shadow on the left or right side, depending on whether the inset keyword is present. Likewise, setting offset-y to a non-zero value adds shadow on the top or bottom side, depending on whether the inset keyword is present.

The blur-radius value specifies the width over which the shadow changes from 100% opacity to zero opacity. The default value is 0, which results in a solid colored shadow. This is useful to render a "border" that does not affect the size of the element as a real border does.

Setting a positive spread-radius value increases the shadow width on all four sides. This is typically used only when offset-x and offset-y are both zero in order to add a shadow on all four sides of an element. The default value is 0.

Here are the value patterns to add a shadow on a single side of an element. Note that a small amount of shadow is also added to the adjacent sides in order to achieve a 3D effect, and this cannot be prevented.

Multiple shadows can be added to an element by specifying comma-separated lists of values. See the .two-shadows, .target, and .multiple-borders` selectors below for examples. An alternative to defining multiple, nested borders is to use nested divs that each have a single border, but that requires more HTML elements and more CSS properties to center each of the divs.

The following examples demonstrate many uses of shadows.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS box-shadow Demo</title>
    <style>
      .all-inset {
        box-shadow: 0 0 10px 10px inset var(--color);
      }

      .all-outset {
        box-shadow: 0 0 10px 10px var(--color);
      }

      .bottom-border {
        box-shadow: 0 10px 0 red;
      }

      .bottom-inset {
        box-shadow: 0 -10px 10px inset var(--color);
      }

      .bottom-outset {
        box-shadow: 0 10px 10px var(--color);
      }

      .box {
        --color: gray;
        --size: 4rem;
        height: var(--size);
        width: var(--size);

        border: 1px solid var(--color);
        font-family: sans-serif;
        padding: 1rem;
        margin: 1.5rem;
      }

      .left-border {
        box-shadow: -10px 0 0 red;
      }

      .left-inset {
        box-shadow: 10px 0 10px inset var(--color);
      }

      .left-outset {
        box-shadow: -10px 0 10px var(--color);
      }

      .multiple-borders {
        box-shadow: 0 -10px 0 red, 10px 0 0 green, 0 10px 0 blue, -10px 0 0
            purple;
      }

      .nested {
        border: none;
        border-radius: 50%;
        box-shadow: 0 0 0 20px red, 0 0 0 40px green, 0 0 0 60px blue;
        margin: 4rem;
      }

      .right-border {
        box-shadow: 10px 0 0 red;
      }

      .right-bottom-outset {
        box-shadow: 10px 10px 10px var(--color);
      }

      .right-inset {
        box-shadow: -10px 0 10px inset var(--color);
      }

      .right-outset {
        box-shadow: 10px 0 10px var(--color);
      }

      .row {
        display: flex;
      }

      .target {
        --red: #cb0000;
        --size: 2rem;

        height: var(--size);
        width: var(--size);

        background-color: var(--red);
        border: none;
        border-radius: 50%;
        box-shadow: 0 0 0 20px white, 0 0 0 40px var(--red);
        margin: 3rem;
      }

      .top-border {
        box-shadow: 0 -10px 0 red;
      }

      .top-inset {
        box-shadow: 0 10px 10px inset var(--color);
      }

      .top-left-inset {
        box-shadow: 10px 10px 10px inset var(--color);
      }

      .top-outset {
        box-shadow: 0 -10px 10px var(--color);
      }

      .two-shadows {
        box-shadow: 10px 0 10px red, 0 10px 10px blue;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="box top-outset">top outset</div>
      <div class="box top-inset">top inset</div>
      <div class="box bottom-outset">bottom outset</div>
      <div class="box bottom-inset">bottom inset</div>
    </div>
    <div class="row">
      <div class="box left-outset">left outset</div>
      <div class="box left-inset">left inset</div>
      <div class="box right-outset">right outset</div>
      <div class="box right-inset">right inset</div>
    </div>

    <div class="row">
      <div class="box right-bottom-outset">right and bottom outset</div>
      <div class="box top-left-inset">top and left inset</div>
    </div>

    <div class="row">
      <div class="box all-outset">outset all sides</div>
      <div class="box all-inset">inset all sides</div>
    </div>

    <div class="row">
      <div class="box two-shadows">two shadows</div>
      <div class="box nested">nested shadows</div>
      <div class="target"></div>
    </div>

    <div class="row">
      <div class="box top-border">top border</div>
      <div class="box right-border">right border</div>
      <div class="box bottom-border">bottom border</div>
      <div class="box left-border">left border</div>
      <div class="box multiple-borders">multiple borders</div>
    </div>
  </body>
</html>

Gradients

CSS supports three kinds of gradients: linear, radial, and conic. Each of these can occur one time over an area or repeat multiple times. These are supported by the CSS functions linear-gradient, repeating-linear-gradient, radial-gradient, repeating-radial-gradient, conic-gradient, and repeating-conic-gradient. Each of these functions produce an image which is appropriate for the value of the background-image property. They cannot be used as the value of the background-color property.

The color keyword "transparent" can be used in gradients to allow the background-color of an area to show through a portion of the gradient.

The code below demonstrates using each of these gradient functions. See the comments in the code for details.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gradients Demo</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .container > div {
        --size: 5rem;

        display: inline-block;
        font-size: 2rem;
        height: var(--size);
        line-height: var(--size);
        margin-right: 0.5rem;
        text-align: center;
        width: var(--size);
      }

      p {
        font-weight: bold;
      }

      /* By default linear gradients go from top to bottom.
         Any number of colors through which to transition can be specified. */
      .lg1 {
        background-image: linear-gradient(red, yellow, blue);
      }

      /* The area filled with the gradient is not required to be rectangular.
         Here it is a circle. */
      .lg2 {
        background-image: linear-gradient(red, yellow, blue);
        border-radius: 50%;
      }

      /* Each color can optionally be followed by the percentage
         across the area at which the full color is reached.
         This is referred to as a "color stop".
         In the previous example, yellow is reached at 50%
         because it is the middle color.
         Here yellow is reached at 20%. */
      .lg3 {
        background-image: linear-gradient(red, yellow 20%, blue);
      }

      /* If a color is followed by two percentages, they indicate
         a range over which a solid color is displayed.
         These are also referred to as color stops.
         Here the first 20% is solid red, the last 20% is solid yellow,
         and the middle 60% transitions from red to yellow. */
      .lg4 {
        background-image: linear-gradient(red 0% 20%, yellow 80% 100%);
      }

      /* An optional first argument specifies the angle of the gradient
         which defaults to zero.
         It can be specified in degrees, radians, or turns.
         For example, 45deg, 0.785rad, and 0.125turn are equivalent */
      .lg5 {
        background-image: linear-gradient(45deg, red, yellow, blue);
      }

      /* The transition angle can also be specified with
         the "to" keyword followed by
         "left" or "right" and/or "top" or "bottom" in any order.
         Using "to right top" is the same as 45deg. */
      .lg6 {
        background-image: linear-gradient(to right top, red, yellow, blue);
      }

      /* Multiple, comma-separated gradients can be specified,
         but only the first will be visible unless
         the colors have less than full opacity.
         Here we have red with 80% opacity starting in the left bottom
         and moving toward the right top that changes to zero opacity
         70% across the area.
         We also have blue with 80% opacity starting in the right bottom
         and moving toward the left top that changes to zero opacity
         70% across the area.
         The colors combine in the middle to create shades of purple. */
      .lg7 {
        background-image: linear-gradient(
            to right top,
            rgba(255, 0, 0, 0.8),
            rgba(255, 0, 0, 0) 70%
          ), linear-gradient(to left top, rgba(0, 0, 255, 0.8), rgba(
                0,
                0,
                255,
                0
              ) 70%);
      }

      /* To repeat a linear gradient multiple times across an area,
         use the repeating-linear-gradient function.
         Each color can be followed by the length
         or percentage across the area at which it ends.
         The length or percentage of the entire gradient is specified
         by the length after the last color.
         Adding lengths after the other colors is optional
         and just specifies where they reach the full color.
         To repeat the gradient three times,
         add 33.33% after the last color.
         The angle of the gradient can be specified with the same
         optional first argument as in the linear-gradient function. */
      .lg8 {
        background-image: repeating-linear-gradient(red, yellow, blue 33.33%);
      }

      /* Stripes can be created by specifying two color stops for each color. */
      .lg9 {
        background-image: repeating-linear-gradient(
          0.25turn,
          red 0 10px,
          yellow 10px 20px,
          blue 20px 30px
        );
      }

      /* Radial gradients start in the center of an area by default
         and change color as they work outward. */
      .rg1 {
        background-image: radial-gradient(red, yellow, blue);
      }

      /* The area filled with the gradient is not required to be rectangular.
         Here it is a circle.
         A percentage less that 100% is specified after the last color
         because otherwise that color would only appear in the corners
         which are clipped by the border-radius. */
      .rg2 {
        background-image: radial-gradient(red, yellow, blue 75%);
        border-radius: 50%;
      }

      /* The gradient shape can be a circle (default) or ellipse.
         Note that an ellipse will be a circle if
         the height and width of the area are equal. */
      .rg3 {
        background-image: radial-gradient(ellipse, red, yellow, blue);
        width: 8rem;
      }

      /* To change the center position of a radial gradient,
         specify the shape (circle or ellipse) followed by the keyword "at",
         and the center location using the same values
         supported by the CSS background-position property. */
      .rg4 {
        background-image: radial-gradient(
          circle at left top,
          red,
          yellow,
          blue
        );
      }

      /* The distance from the center where the full ending color is reached
         can be specified with the keywords "closest-side", "closest-corner",
         "farthest-side" and "farthest-corner".
         The "closest" and "farthest" only differ when
         the center is not in the center of the area. */
      .rg5 {
        background-image: radial-gradient(
          circle closest-side at 25% 50%,
          red,
          yellow,
          blue
        );
      }
      .rg6 {
        background-image: radial-gradient(
          circle closest-corner at 25% 50%,
          red,
          yellow,
          blue
        );
      }
      .rg7 {
        background-image: radial-gradient(
          circle farthest-side at 25% 50%,
          red,
          yellow,
          blue
        );
      }
      .rg8 {
        background-image: radial-gradient(
          circle farthest-corner at 25% 50%,
          red,
          yellow,
          blue
        );
      }

      /* Color stops can be applied to radial-gradient colors
         in the same way as in linear-gradient colors. */

      /* To repeat a radial gradient multiple times across an area,
         use the repeating-radial-gradient function
         which is similar to repeating-linear-gradient. */
      .rg9 {
        background-image: repeating-radial-gradient(red, yellow, blue 33.33%);
      }

      /* Conic gradients transition colors through
         angles of rotation around a center point. */
      .cg1 {
        background-image: conic-gradient(red, yellow, blue);
      }

      /* The area filled with the gradient is not required to be rectangular.
         Here it is a circle. */
      .cg2 {
        background-image: conic-gradient(red, yellow, blue);
        border-radius: 50%;
      }

      /* The starting angle defaults to zero degrees which,
         unlike what you learned in Geometry class,
         is at the top of the circle.
         To change this, use the "from" keyword. */
      .cg3 {
        background-image: conic-gradient(from 0.25turn, red, yellow, blue);
      }

      /* The center of the gradient can be moved from the center of the area. */
      .cg4 {
        background-image: conic-gradient(at 35% 50%, red, yellow, blue);
      }

      /* Color stops are specified as angles or percentages, not distances.
         Here the first 90 degrees (or 0.25turn) transitions from red to yellow
         and the final 270 degrees (or 0.75turn) transitions from yellow to blue. */
      .cg5 {
        background-image: conic-gradient(red, yellow 90deg, blue);
      }

      /* Pairs of color stops produce solid colors. */
      .cg6 {
        background-image: conic-gradient(
          red 0 120deg,
          yellow 120deg 240deg,
          blue 240deg 360deg
        );
        border-radius: 50%;
      }

      /* To repeat a conic gradient multiple times around an area,
         use the repeating-conic-gradient function
         which is similar to repeating-linear-gradient.
         Here the gradient is repeated three times,
         each occupying 1/3 (33.33%) of a circle. */
      .cg7 {
        background-image: repeating-conic-gradient(red, yellow, blue 33.33%);
      }
    </style>
  </head>
  <body>
    <p>Linear Gradients</p>
    <div class="container">
      <div class="lg1">1</div>
      <div class="lg2">2</div>
      <div class="lg3">3</div>
      <div class="lg4">4</div>
      <div class="lg5">5</div>
      <div class="lg6">6</div>
      <div class="lg7">7</div>
      <div class="lg8">8</div>
      <div class="lg9">9</div>
    </div>

    <p>Radial Gradients</p>
    <div class="container">
      <div class="rg1">1</div>
      <div class="rg2">2</div>
      <div class="rg3">3</div>
      <div class="rg4">4</div>
      <div class="rg5">5</div>
      <div class="rg6">6</div>
      <div class="rg7">7</div>
      <div class="rg8">8</div>
      <div class="rg9">9</div>
    </div>

    <p>Conic Gradients</p>
    <div class="container">
      <div class="cg1">1</div>
      <div class="cg2">2</div>
      <div class="cg3">3</div>
      <div class="cg4">4</div>
      <div class="cg5">5</div>
      <div class="cg6">6</div>
      <div class="cg7">7</div>
    </div>
  </body>
</html>

Gradient Borders

It's easy to create gradient borders using border-image-source. For example:

<html>
  <head>
    <style>
      body {
        background-color: black;
        font-family: sans-serif;
        padding: 1rem;
      }

      .bordered {
        border-image-source: linear-gradient(to bottom right, red, yellow, red);
        border-image-slice: 1;
        border-radius: 0.5rem;
        border-style: solid;
        border-width: 1px;
        color: white;
        display: inline-block;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="bordered">Some Text</div>
  </body>
</html>

Unfortunately, this approach doesn't work if a border-radius is needed. But the somewhat more complicated approach below does work. See Border with gradient and radius.

<html>
  <head>
    <style>
      body {
        background-color: black;
        font-family: sans-serif;
        padding: 1rem;
      }

      .bordered {
        color: white;
        display: inline-block;
        font-size: 1rem;
        padding: 1rem;
        position: relative;
      }

      .bordered::before {
        content: '';
        position: absolute;
        inset: 0;

        border-radius: 0.5rem;
        border: 1px solid transparent;
        background: linear-gradient(to bottom right, red, yellow, red) border-box;
        -webkit-mask: linear-gradient(white 0 0) padding-box, linear-gradient(
            white 0 0
          );
        -webkit-mask-composite: xor;
        mask-composite: exclude;
      }
    </style>
  </head>
  <body>
    <div class="bordered">Some Text</div>
  </body>
</html>

Centering

There are many ways to center content using CSS. Common ways include:

1. To center lines of text in an element, set text-align to center to center horizontally, and set line-height to the element height divided by the number of lines to center vertically (see .box below).

2. To center an element with display set to block horizontally in its parent, set margin-left and margin-right to auto (see .box1 below).

3. To center text or child elements within their parent, on the parent element set display to flex, set justify-content to center (to center along major axis), and set align-items to center (to center along minor axis) (see .container and .box2 below).

4. To center an element in its parent element, on the parent element set position to relative and on the child element set position to absolute, inset to 0, and margin to auto. Alternatively, set left and top to 50%, and transform to translate(-50%, -50%) (see .box3 below).

5. To center an element in the browser window, set position to fixed, set inset to 0, and set margin to auto Alternatively, set left and top to 50%, and transform to translate(-50%, -50%) (see .box4 below).

6. To center an element vertically within its parent element, set align-content to center (see .center below).

Each of these approaches is demonstrated in the code below.

Show Box #4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Centering Demo</title>
    <style>
      .box {
        display: inline-block;
        color: white;
        height: var(--box-size);
        line-height: var(--box-size); /* centers 1 line of text vertically */
        text-align: center; /* centers text horizontally */
        width: var(--box-size);
      }

      .box1 {
        display: block;
        background-color: red;
        line-height: calc(var(--box-size) / 3);
        margin: 0 auto; /* centers box horizontally when display is block */
      }

      .box2 {
        background-color: blue;
      }

      .box3 {
        background-color: green;
        opacity: 0.5;
        position: absolute;
        left: 50%; /* of width of position relative ancestor */
        top: 50%; /* of height of position relative ancestor */
        transform: translate(-50%, -50%); /* of box size */
      }

      .box4 {
        display: none;
        justify-content: center;
        align-items: center;

        background-color: purple;
        line-height: unset; /* override from .box */

        /* This centers in browser window. */
        position: fixed;

        /* This centers in its parent, overlapping .box3 */
        /* position: absolute; centers in parent */

        inset: 0; /* doesn't center without this */
        margin: auto; /* doesn't center without this */
      }

      .center {
        align-content: center; /* centers vertically */
        height: 5rem;
        border: 1px solid red;
        text-align: center; /* centers horizontally */
      }

      #centering-demo {
        --box-size: 100px;
        --size: 550px;
        height: var(--size);
        outline: 1px dashed gray;
        position: relative; /* absolute positioning of .box3 is relative to this */
        width: var(--size);
      }

      .container {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        width: 100%;
      }

      p {
        text-align: center;
      }
    </style>

    <script>
      window.onload = () => {
        const box4 = document.querySelector('.box4');
        const showBtn = document.getElementById('show-btn');
        box4.addEventListener('click', () => (box4.style.display = 'none'));
        showBtn.addEventListener(
          'click',
          () => (box4.style.display = 'inline-flex')
        );
      };
    </script>
  </head>
  <body>
    <button id="show-btn">Show Box #4</button>
    <section id="centering-demo">
      <p>This is a paragraph.</p>

      <div class="box box1">Box #1<br />line 2<br />line 3</div>

      <div class="container">
        <div class="box box2">Box #2</div>
      </div>

      <!-- This box is centered in the section. -->
      <div class="box box3">Box #3</div>

      <!-- This box is centered in the browser window. -->
      <div class="box box4">Box #4<br />Click to hide.</div>

      <div class="center">Centered</div>
    </section>
  </body>
</html>

Flex layout

Flex layout is a powerful way to control the layout of HTML elements in one dimension. Flexbox Froggy provides a great way to learn about this.

Many CSS properties affect flex layout. The most commonly used properties applied to container elements are described here.

• display

  Set this to flex.

• flex-direction

  This defaults to row for horizontal layout, but can be set to column for vertical layout. It defines the "major axis" and the opposite direction is considered to be the "minor axis".

• justify-content

  This controls layout on the major axis. The values are:

  • flex-start (default) pushes children toward the start.
  • flex-end pushes children toward the end.
  • center centers children.
  • space-between spreads children with no space before the first or after the last.
  • space-evenly spreads children with equal space before the first and after the last.
  • space-around spreads children with half space before the first and after the last.

• align-items

  This controls layout on the minor axis. The most commonly used values are:

  • stretch (default)
  • flex-start pushes children toward start
  • flex-end pushes children toward end
  • center

• flex-grow

  This is applied to children, not to the container. It affects the amount of space allocated to the element. The default value is zero. The flex-grow values of all the children are added to obtain a total. Then the flex-grow value of each child is divided by the total to get a percentage. That percentage of the unused space in the parent container is added to the size of the child element.

• gap

  This controls the space between elements when justify-content is not one of the values that begins with space-.

The table below demonstrates combinations of values for the justify-content and align-items properties. This is not an image. It is generated in your web browser.

Child elements can override their minor axis alignment described by the align-items property on the container by setting their align-self property.

Grid layout

Grid layout is a powerful way to control the layout of HTML elements in two dimensions. Grid Garden provides a great way to learn about this.

Many CSS properties affect grid layout. The most commonly used properties applied to container elements are described here.

• display

  Set this to grid.

• grid-template-columns

  This specifies the number of columns and their widths. Widths can be specified using any CSS unit. They can also use fr fractional units, which work similarly to the flex-grow CSS property described earlier.

  If consecutive columns have the same width, they can be described with the repeat function. For example, grid-template-columns: 3rem repeat(3, 1fr) 4rem; describes five columns where the middle three all have a width that is one third of the remaining space after 3rem is given to the first child and 4rem is given to the last child.

• grid-template-rows

  This specifies the number of rows and their heights. It accepts the same values as grid-template-columns.

• grid-template: {columns} / {rows}

  This combines the data from grid-template-columns and grid-template-rows into a single property. The result is a bit harder to read than using separate properties.

• grid-template-areas

  This specifies the grid cells that will be occupied by each named area, allowing them to span multiple columns and rows. Child elements must assign themselves to the grid names using the grid-area CSS property.

  For example, the following describes the layout of a container that has a header across the top, a footer across the bottom, and a left nav followed by a main area in the center. Note the lack of commas between the string values.

  grid-template-areas:
    'header header'
    'nav main'
    'footer footer';

• gap

  This controls the space between grid areas.

The most commonly used properties applied to child elements are described here.

• grid-column-start specifies the column number in which the child begins.
• grid-column-end specifies the column number in which the child ends.
• grid-row-start specifies the row number in which the child begins.
• grid-row-end specifies the row number in which the child ends.
• grid-column: {start} / {end} specifies the start and end columns.
• grid-column: {start} / span {columns} specifies the start and # of columns.
• grid-row: {start} / {end} specifies the start and end rows.
• grid-row: {start} / span {rows} specifies the start and # of rows.
• grid-area: {grid-template-area-name} specifies a grid template area name where the component should be rendered.

Negative values for end count from the last column or row.

Since a grid area already knows the columns and rows that it occupies, specifying the grid-area property makes the other properties unnecessary.

The default alignment of elements within their grids is specified by setting the justify-content and align-items properties on the container. Child elements can override this by setting their justify-self and align-self properties.

In the example below, grid layout is used to layout a header, footer, left nav and main area of a page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Grid Layout Demo</title>
    <style>
      body {
        --footer-height: 3rem;
        --header-height: 5rem;
        --nav-width: 10rem;

        display: grid;
        grid-template-columns: var(--nav-width) 1fr;
        grid-template-rows: var(--header-height) 1fr var(--footer-height);
        grid-template-areas:
          'header header'
          'nav main'
          'footer footer';

        height: 100vh;
        width: 100vw;
        margin: 0;
      }

      footer {
        grid-area: footer;
        background-color: lightgreen;
      }

      header {
        grid-area: header;
        background-color: orange;
      }

      main {
        grid-area: main;
        background-color: lightblue;
      }

      nav {
        grid-area: nav;
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <header>This is the header.</header>
    <nav>This is the nav.</nav>
    <main>This is the main area.</main>
    <footer>This is the footer.</footer>
  </body>
</html>

display inline-block property

The default value of the CSS display property for many HTML elements, including div, is block. This prevents them from appearing on the same "row" as other elements, unless flex or grid layout is specified for their parent element.

Another way to allow multiple block elements to appear on the same row is to set the CSS display property to inline-block.

Selectors

CSS selectors appear at the beginning of CSS rules. They specify the elements to which a rule applies. The basic selectors are:

• universal: selects every element; ex. *

• type: specifies an element name; ex. table

• id: specifies the value of an id attribute; ex. #my-id

• class: specifies a CSS class name; ex. .my-class

• attribute: specifies an attribute that:

  • must be present: ex. [href]
  • must be present with a given value: ex. [href="https://foo.com"]
  • must be present containing a given value: ex. [href*="foo"]
  • must be present beginning with a given value: ex. [href^="https"]
  • must be present ending with a given value: ex. [href$=".com"]
  • ... and other less commonly used options

Selectors can be combined to be more specific. For example, button.primary selects button elements that have a class of primary and .dog.active selects elements with both the dog and active classes.

A rule can begin with a comma-separated list of selectors to match any of them.

Combinators

Selectors can be combined to specify the following relationships between elements:

• descendant: a b applies to b elements that have an a ancestor.
• child: a > b applies to b elements that have an a parent.
• sibling: a ~ b applies to b elements that have a preceding a sibling.
• sibling: a + b applies to b elements that have an immediately preceding a sibling.

These can be combined to any depth. For example, table tr > img matches all img elements whose parent is a tr element that is anywhere inside a table element. They could appear inside the thead or tbody elements that are children of the table element.

Pseudo classes

CSS pseudo classes are added to selectors to indicate that matching elements must be in a specific state. They begin with a single colon. Categorized lists of commonly used pseudo classes are described below.

Location

• :link matches links (a elements) that have not yet been visited.

• :visited matches links that have been visited.

User action

• :focus matches the element that currently has focus.

• :focus-within matches the element that currently has focus and elements that contain an element that currently has focus.

• :hover matches elements being hovered over.

Input

• :blank matches form elements that are empty.

• :placeholder-shown matches form elements that are currently displaying their placeholder text.

• :checked matches checkboxes and radio buttons that are toggled on.

• :enabled matches elements that are not disabled.

• :disabled matches elements that are disabled.

• :required matches form elements that are required to have a value.

• :optional matches form elements that are not required to have a value.

• :valid matches form elements that contain a valid value.

• :invalid matches form elements that contain an invalid value.

• :read-only matches elements that cannot be modified by the user.

• :read-write matches elements that can be modified by the user.

Tree-structural

• :first-child matches the first sibling.

• :first-of-type matches the first sibling with the same element name.

• :has matches an element that has specific descendant elements (see :has section below)

• :last-child matches the last sibling.

• :last-of-type matches the last sibling with the same element name.

• :nth-child matches sibling elements whose 1-based index matches an+b. For example, :nth-child(3) matches the third sibling, :nth-child(even) matches even siblings, :nth-child(odd) matches odd siblings, and :nth-child(2n+3) matches siblings 3, 5, 7, and so on.

• :nth-of-type is like :nth-child, but only considers siblings with the same element name.

• :nth-last-child matches sibling elements in a similar way to :nth-child, but counting from the end of the list of siblings.

• :nth-last-of-type is like :nth-last-child, but only considers siblings with the same element name.

• :only-child matches the element only if it has no siblings.

• :only-of-type matches the element only if it has no siblings with the same element name.

The following example demonstrates a few of the pseudo-classes. If an invalid email address is entered in the input, the border turns red. The "Baseball" button is red because it is disabled. The other buttons change from blue to green when hovering over them.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Pseudo Classes Demo</title>
    <style>
      button {
        background-color: lightblue;
        border: 3px solid blue;
        border-radius: 0.5rem;
        font-size: 1rem;
        padding: 0.5rem;
      }

      button:hover {
        background-color: lightgreen;
        border-color: green;
      }

      /* Placing this after the :hover rule makes it take precedence. */
      button:disabled {
        background-color: pink;
        border-color: red;
      }

      form > div {
        margin-bottom: 0.5rem;
      }

      input {
        border: 2px solid gray;
        border-radius: 0.5rem;
        padding: 0.5rem;
      }

      input:invalid {
        border-color: red;
      }
    </style>
  </head>
  <body>
    <form id="pseudo-classes-demo">
      <div>
        <label for="email">Email</label>
        <input id="email" type="email" />
      </div>
      <div>
        <button disabled>Baseball</button>
        <button>Basketball</button>
        <button>Football</button>
        <button>Hockey</button>
      </div>
    </form>
  </body>
</html>

:has Pseudo Class

This matches an element that has specific descendant elements.

The following example uses a hidden checkbox to toggle the opacity of another element between 0 and 1. When the label wrapped around the checkbox is clicked, the state of the checkbox is toggled. Note the use of :has to change opacity to 1.

<html>
  <head>
    <style>
      #greeting {
        font-size: 3rem;
        margin-top: 4px;
        opacity: 0; /* initially not visible */
        transition: opacity 1s;
      }

      #show-checkbox {
        display: none;
      }

      /* This styles the label to look like a button. */
      #toggle-btn {
        background-color: lightgray;
        border: 1px solid black;
        cursor: pointer;
        padding: 2px 8px;
      }

      body:has(#toggle-btn > :checked) #greeting {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <label id="toggle-btn">
      <input id="show-checkbox" type="checkbox" />
      Toggle
    </label>
    <div id="greeting">Hello, World!</div>
  </body>
</html>

The following example demonstates many uses of :has. A lot is achieved without writing any JavaScript code!

<!DOCTYPE html>
<html>
  <head>
    <title>CSS :has Pseudo Class</title>
    <style>
      body {
        --border-width: 5px;
        font-family: sans-serif;
      }

      /* The background color of section elements
         is based on their descendant elements. */
      section {
        background-color: lightyellow;
        border: var(--border-width) solid transparent;
        margin-bottom: 1rem;
        padding: 1rem;
      }
      section:has(img) {
        background-color: lightblue;
      }
      section:has(img):not(:has(p)) {
        background-color: pink;
      }

      /* If the "like" checkbox is checked then
         all section elements get a red border. */
      body:has(#like-checkbox:checked) section {
        border: var(--border-width) solid red;
      }

      /* Add text after the "like" checkbox
         based on whether it is checked. */
      body:has(#like-checkbox:checked) #like-text::before {
        content: 'Unlike';
      }
      body:not(:has(#like-checkbox:checked)) #like-text::before {
        content: 'Like';
      }

      /* If the next sibling of a p is an img, change the p styling. */
      p:has(+ img) {
        background-color: white;
        padding: 0.5rem;
      }

      .error-msg {
        color: red;
        font-weight: bold;
        visibility: hidden;
      }

      input[type='number'] {
        border: 2px solid gray;
        border-radius: 0.5rem;
        padding: 0.5rem;
      }

      /* If a label contains an input with an invalid value,
         make the error message that follows the label visible.
         ~ selects all subsequent siblings if
         they match the selector after it. */
      label:has(input:user-invalid) ~ .error-msg {
        visibility: visible;
      }

      /* Set the border color of the number input
         based on whether its value is valid.
         Focus must be moved out of the input (blur)
         to apply the change. */
      #rating-input:user-valid {
        border-color: green;
      }
      #rating-input:user-invalid {
        border-color: red;
      }

      button {
        background-color: lightgray;
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem;
      }

      button:hover {
        background-color: lightgreen;
      }

      .buttons {
        margin-top: 1rem;
      }

      /* If one of the buttons is hovered, dim all the other buttons. */
      .buttons:has(button:hover) button:not(:hover) {
        opacity: 0.3;
      }

      .post {
        border: 2px solid gray;
        margin-top: 1rem;
        padding: 1rem;
      }

      /* Change the border around posts that contain any empty elements. */
      .post:has(> *:empty) {
        border: 2px dashed red;
      }
    </style>
  </head>
  <body>
    <section>
      <p>This is a paragraph.</p>
    </section>
    <section>
      <p>This is the CSS logo.</p>
      <img
        alt="CSS Logo"
        src="https://1000logos.net/wp-content/uploads/2020/09/CSS-Logo.png"
        width="100"
      />
    </section>
    <section>
      <img
        alt="CSS Logo"
        src="https://1000logos.net/wp-content/uploads/2020/09/CSS-Logo.png"
        width="100"
      />
    </section>

    <div>
      <input type="checkbox" id="like-checkbox" />
      <span id="like-text"></span>
    </div>

    <div>
      <label
        >Rating
        <input id="rating-input" type="number" min="0" max="10" />
      </label>
      <span class="error-msg">invalid rating</span>
    </div>

    <div class="buttons">
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
    </div>

    <section class="post">
      <p>This is the first paragraph.</p>
      <p>This is the second paragraph.</p>
    </section>
    <section class="post">
      <p>This is the first paragraph.</p>
      <!-- The next element is empty. -->
      <p></p>
    </section>
  </body>
</html>

Pseudo selectors

CSS pseudo elements are added to selectors to style a part of an element or add content. They begin with a double colon. Commonly used pseudo selectors are described below. Most supported pseudo selectors are rarely used.

• ::after is used in conjunction with the content property to add content after the matching element.
• ::before is used in conjunction with the content property to add content before the matching element.

Content can be added only to elements that allow content, such as label and p elements. Content cannot be added to empty elements like input.

The following example adds an asterisk after the label of required form elements.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Pseudo Selectors Demo</title>
    <style>
      form > div {
        margin-bottom: 0.5rem;
      }

      label {
        display: inline-block;
        margin-right: 0.5rem;
        text-align: right;
        width: 5rem;
      }

      .required label::after {
        color: red;
        content: '*';
      }
    </style>
    <script>
      window.onload = () => {
        // Add the "required" attribute to all inputs inside
        // container elements with the "required" CSS class.
        const requiredDivs = document.querySelectorAll('form > .required');
        for (const div of requiredDivs) {
          const input = div.querySelector('input');
          input.setAttribute('required', 'required');
        }
      };
    </script>
  </head>
  <body>
    <form id="pseudo-selectors-demo">
      <div class="required">
        <label for="name">Name</label>
        <input id="name" />
      </div>
      <div class="required">
        <label for="email">Email</label>
        <input id="email" type="email" />
      </div>
      <div>
        <label for="phone">Telephone</label>
        <input id="phone" type="tel" />
      </div>
      <button>Submit</button>
    </form>
  </body>
</html>

Specificity

CSS specificity determines the precedence of conflicting CSS rules. For example, consider the following HTML:

<div class="parent">
  I am the parent.
  <div id="me" class="child" style="color: red">I am the child.</div>
</div>

The following CSS rules set the color of the text “I am the child.” to different values. The color used depends on the specificity of the selectors. The scores are represented by lists of four numbers and are explained after this example.

/* score is 0,1,1,0 */
.parent > #me {
  color: pink;
}

/* same score as the previous selector */
.parent #me {
  color: red;
}

/* score is 0,1,0,0 */
#me {
  color: orange;
}

/* score is 0,0,2,0 */
.parent > .child {
  color: yellow;
}

/* same score as the previous selector */
.parent .child {
  color: green;
}

/* score is 0,0,1,0 */
.child {
  color: blue;
}

/* same score as the previous selector;
   It applies the color purple to the
   element with the class “parent”,
   but the previous rule applies the color blue
   to the element with the class “child”. */
.parent {
  color: purple;
}

The precedence order of these rules happens to be the order in which they are listed here, with the exception that when there are ties, the last one wins. Using a style attribute on the inner div has the highest specificity.

There is a formula for computing the specificity score of any CSS rule that results in a list of four numbers. Considering the four numbers from left to right,

• The first is 1 for inline styles and 0 otherwise.
• The second is the number of id values in the selector.
• The third is the number of class names in the selector.
• The fourth is the number of element name references in the selector.

Since each matching rule can specific a different set of CSS properties, properties from multiple rules can be applied to an element.

The score of a selector is determined by removing the commas and treating it as a single 4-digit number. For example, treat 1,2,3,4 as 1234.

For each property in a matching rule, the one specified in the rule with the highest scoring selector wins. In the case of a tie, one in the last tieing rule wins.

This means that inline styling specified with a style attribute on an HTML element always wins. After this, id attributes are more important than class names, which are more important than element names.

It also means that the order in which id values, class names, and element names appear in a selector does not affect its specificity calculation.

For more details on CSS specificity, see Specifics on CSS Specificity on the CSS-Tricks site.

Truncating text

The CSS property text-overflow can be used to truncate long text. However, it doesn't work on its own. The overflow and whitespace properties must also be specified. See the CSS rule for .truncate-text below.

Toggle the checkbox in the example below to switch between non-truncated and truncated text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Text Ellipsis Demo</title>
    <style>
      #demo-text {
        outline: 1px dashed red;
        width: 100px;
      }

      .truncate-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>

    <script>
      window.onload = () => {
        text = document.getElementById('demo-text');
        checkbox = document.getElementById('truncate-cb');
        checkbox.addEventListener('change', () => {
          text.classList.toggle('truncate-text');
        });
      };
    </script>
  </head>
  <body>
    <div>
      <input id="truncate-cb" type="checkbox" />
      <label for="truncate-cb">Truncate Text</label>
    </div>
    <div id="demo-text">This is a large amount of text.</div>
  </body>
</html>

scroll-behavior property

The CSS scroll-behavior property causes the page to smoothly scroll rather than jump to a new page location when the user clicks a link that navigates to a different part of the same page. To enable this behavior, add the following CSS rule:

html {
  scroll-behavior: smooth;
}

It is not possible to control the speed at which the page scrolls.

Smooth scrolling is implemented in the page you are viewing. Click a link in the table of contents at the top to see this in action. Click the browser back button to scroll back to the table of contents. Safari does not yet implement this property and simply ignores it.

Some users prefer reduced motion. This is indicated through an OS setting. To set this in macOS, open System Preferences, select Accessibility, select Display, and check the checkbox for "Reduce Motion".

To disable smooth scrolling for these uses, add the following CSS:

@media (prefers-reduced-motion) {
  html {
    scroll-behavior: auto;
  }
}

position property

The CSS position property supports many values. This tip distinguishes between three of them.

All of these use the top, right, bottom, and left properties to specify the actual position of the element.

The inset property provides a shorter alternative to specifying these.

The absolute value causes elements to be positioned relative to the nearest ancestor element that has its CSS position property set to relative. If none is found, they are positioned relative to the browser window.

The sticky value is often used to keep table headings in view when a table is scrolled vertically. To do this, add the following CSS rules:

table {
  position: relative;
}

table > thead th {
  position: sticky;
  top: 0;
}

The following example demonstrates using absolute to position elements at the four corners of an ancestor element that uses a position value of relative.

CSS position absolute demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS position absolute Demo</title>
    <style>
      #position-demo {
        display: inline-block;
        border: 1px solid black;
        height: 5rem;
        width: 8rem;
        position: relative;
      }

      #position-demo > div {
        position: absolute;
      }

      #first {
        top: 0;
        left: 0;
      }

      #second {
        top: 0;
        right: 0;
      }

      #third {
        bottom: 0;
        left: 0;
      }

      #fourth {
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <h4>CSS position absolute demo</h4>
    <div id="position-demo">
      <div id="first">First</div>
      <div id="second">Second</div>
      <div id="third">Third</div>
      <div id="fourth">Fourth</div>
    </div>
  </body>
</html>

The next example shows the differences between the CSS position property values absolute, fixed, and sticky.

To run the demo, click the "Show Demo" button. After viewing it, click the "Back" button to return to this location. The demo will scroll this page to the top and display three boxes. The first box uses a position value of absolute, the second uses fixed, and the third uses sticky. Scroll vertically to see that the fixed box remains in place while the absolute and sticky boxes scroll with the page. Scroll vertically inside the list of fruits to see how using position sticky causes the "Fruit" line to remain in view.

Show Demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS position Demo</title>
    <style>
      #absolute {
        position: absolute;
        top: 1rem;
        left: 1rem;
      }

      body {
        margin: 0;
      }

      #container {
        background-color: linen;
        height: 500px; /* so contents can scroll vertically */
        width: 100%;
      }

      .demo {
        background-color: white;
        border: 1px solid black;
        display: inline-block;
        height: 150px;
        width: 100px;
      }

      #fixed {
        position: fixed;
        top: 1rem;
        left: 8rem;
      }

      #scrolling {
        overflow: scroll;
        position: absolute;
        top: 1rem;
        left: 15rem;
      }

      #sticky {
        position: sticky;
        top: 0;
        left: 0;
        background-color: cornflowerblue;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="absolute" class="demo">absolute</div>
      <div id="fixed" class="demo">fixed</div>
      <div id="scrolling" i class="demo">
        <div id="sticky">Fruit</div>
        <div>apple</div>
        <div>banana</div>
        <div>blueberry</div>
        <div>cherry</div>
        <div>grape</div>
        <div>kiwi</div>
        <div>peach</div>
        <div>raspberry</div>
        <div>strawberry</div>
        <div>watermelon</div>
      </div>
    </div>
  </body>
</html>