Mar 05, 2021 / CSS

What is CSS?

CSS (Cascading Style Sheets) is the language used to describe how HTML should look. CSS allows us to write rules (also known as rulesets) containing descriptions of how things should look (style declarations), and select which elements each ruleset should apply to. A ruleset looks like this:

selector {
  property: value;
}

property: value; pairs are referred to as “declarations”

Selectors target which element(s) a ruleset should affect. A single selector can apply to anywhere from 0 to all elements on a page.

Properties specify which aspect of the element you want to style. Each HTML element has a vast number of properties available. Most are universal, but some properties are specific to certain elements.

Values set a property to one of its available options. Values can be numbers, keywords, functions, or a combination of each, depending on the property being set.

Writing Selectors

The first step to writing CSS is to create a selector that specifies which element(s) you want to style. There are many types of selectors, each with their own use cases. The most common ways to select elements are by tag type and by class name.

Here are some of the most common selectors and their use cases. For a complete list, visit the CSS selectors reference on MDN.

Universal selector

Selects all elements on a page.

* {
  color: black;
}

The universal selector is good for creating opinionated default behaviors for all elements on your site (box-sizing: border-box is a common example).

Type selector

A type selector will apply to all elements with the given tag in the scope that its being used. After the universal selector, type selectors are the most general.

p {
  margin-top: 1em;
  margin-bottom: 0;
}

Type selectors are best used to ensure consistency and apply the most basic aspects of a visual language to your site, like spacing around paragraphs (p tags) or the styling of links (a tags).

Like universal selectors, ther generality makes them best suited for defaults and resets, and ill-suited for situational styles.

Class selector

A class selector will apply to all elements in its scope that have a given class. They are denoted by a period . at the beginning of the selector.

.hero {
  font-size: 120px;
}

Class selectors are by far the most common and useful selectors, since you have complete control over their application in both HTML and CSS. Furthermore, when named well, classes will help you and other developers navigate your styles quickly and easily.

Combining Selectors

Combinators are characters and keywords that you can use to chain, modify, or add conditions to a selector. They are extremely powerful, but can also become confusing. Don’t get too complex, and when in doubt, just add a class name.

Grouping

You can group selectors by using a comma: ,. Think of the comma as an and operator.

h1,
h2,
h3,
h4 {
  font-weight: 700;
}

Descendant combinator: [space]

Used by adding a space between two or more selectors. It selects nodes that are descendants of the first ingredient of the selector.

.post .heading {
  font-weight: bold;
}

The above will select all .heading elements that appear inside .post elements. Descendant combinators will select every matching descendant, all the way down the document tree, meaning this selector will apply like so:

<section class="post">
  <h1 class="heading">Styles are applied here...</h1>
  <article>
    <h2 class="heading">...as well as here.</h2>
  </article>
</section>

Child combinator: >

Selects nodes that are direct descendants of the first element. It does not apply to grandchildren, or any other elements further down the document tree.

.post > .heading {
  font-size: 72px;
}

The child combinator differs from the descendant combinator in that it will only select direct children of the first ingredient, meaning this selector will apply like so:

<section class="post">
  <h1 class="heading">Styles are applied here,</h1>
  <article>
    <h2 class="heading">but not here.</h2>
  </article>
</section>

General sibling combinator: ~

Selects all matching siblings. This means that the second element comes after the first (though not necessarily immediately), and both share the same parent.

.story-tease ~ img {
  display: inline-block;
}

Adjacent sibling combinator: +

Selects only adjacent matching siblings. This means that the second element immediate follows the first, both share the same parent.

h3 + p {
  margin-top: 1.5rem;
}

At this point, you should have enough knowledge to write basic CSS. Learning property names and their corresponding values by heart is largely a memorization exercise that takes time. Don’t hesitate to look up properties and their documentation on MDN or find advice about how to make something on Stack Overflow. Your editor’s autocomplete feature will also likely be a big help.