CSS is the set of rules that says how each element on a page should look. If HTML is the skeleton of a building, CSS is the painting, the tiling and the furniture arrangement. The word "Cascading" refers to the fact that when several rules conflict, the browser picks one according to a defined order and priority.

A simple example#

CSS
h1 {
  color: #1a5fb4;
  font-size: 28px;
}

These few lines say that all level-one headings should be blue and large. If you want to change the color one day, you edit just this one place and every page on the site changes.

What you can do with it#

  • Set the color, font, size and spacing of elements
  • Lay out the page with tools such as Flexbox and Grid
  • Switch a page to right-to-left with direction: rtl for languages such as Arabic or Hebrew
  • Build responsive design so the site looks right on mobile and desktop
  • Add simple motion and animation, such as a button changing color when the mouse is over it

Where you run into it#

When you change the header color from the customization panel in WordPress, you are actually changing CSS. Ready-made themes mostly consist of one or more large CSS files.

A common mistake#

Writing inline styles on individual elements makes a site hard to maintain. It is better to keep styles in a separate file with consistent naming so that changing the look stays simple.