Back to CSS Basics - syntax and specificity

If CSS is daunting then it's time to go back to basics and update your mental model! But first, it is important to align on what exactly CSS is. The World Wide Web Consortium or W3C defines CSS as

the language for describing the presentation of Web pages, including colors, layout, and fonts.

Having a separate language dedicated to styling HTML and XML web pages is important because it allows separation of concerns and improves site maintenance.

How does CSS work?

Much as how a html document informs the browser what elements will be on the page and their relation to each other, css will tell the browser how each element should look from size, color, layouts. And so, developers must specify what element(s) should receive styling and this is accomplished with CSS selectors.

Below is an example of a basic css declaration block where we are effectively saying "I want all h1 tags to have a red font color. Each css declaration block has 3 parts to it.

1. the css selector or "h1"
2. the declaration block as denoted by curly brackets and its content
3. the individual css declarations contains a css property and corresponding property value such as "font-weight: bold". It is important to note that every declaration end with a semi-colon because that's how the CSS parser knows a declaration has finished and that there may be a new declaration that can be applied to all h1 tags. Moreover, each declaration block requires at least one declaration but you can add as much as you like!

h1 {
  color: "red";
}

To practice this syntax, use the sandbox below. Go to the /src/styles.css file and try to make the paragraph tag's font color blue.

Now what happens when you add another h1 in index.html?

Remember we used a h1 selector so ALL tags will receive the styling.

What if I don't want to target all element tags like h1?

Great question. CSS actually provides different levels of specificity in order to select exactly the desired element. The most foundational levels of specificity include: broad, elements, classes, and ids. In the example below, the broadest selector is an asterisks that selects every single element to have the font-color property with a value of 'red' even if the selected element does not have any content, the css declaration will apply.

* {
  font-color: "red";
}

The next level of specificity is the element level like the h1 example above which selects all h1 elements on the page and applies the styles.

After element selectors, there are classes. Theses have customizable names and can be applied anywhere. In the example below, it's syntactically important to note THAT all classes on a stylesheet are denoted by a period in front of it. Additionally, classes cannot have any space. If a class is multi-word simply use dashes, underscores, or camelcase. Explore this class by adding it to the same sandbox.

.turn-green {
  background-color: "green";
}

This example class that can be applied to any element on a page like below. Notice the period is omitted only for class attributes but still is needed for css stylesheets. Go ahead and add this to the index.html file in the sandbox.

<div class="turn-green">
  <h1 class="turn-green" />
  <p class="turn-green" />
</div>

Now before I explain further, what do you think will happen? If you guessed all 3 elements will have a green background, you're absolutely right. Effectively the class .turn-green is a label used to tell the browser what exactly should receive the styles. Finally the next level of specificity are ids which are meant to be unique and applied to just one element. Unlike classes, ids are denoted by a # and passed to the id attribute within html as seen below. Explore this by adding to the sandbox.

#turn-red {
  background-color: "red";
}

<div class="turn-green">
  <h1 id="turn-red" />
  <p class="turn-green" />
</div>

At this point, you may be wondering why would I want to use an id when I could just make a unique classname that I know will only be applied to a single element. The answer to that is multifaceted and pours into the three main concepts of CSS which are specificity, cascading, and inheritance. Here, we've touched on specificity but in the articles to come, I'll explain in further detail how these 3 interact with each other to style your entire application and why it may lead to unexpected styling behavior.

This is my first blog post. I hope to deepen my web development knowledge by writing and documenting my learnings then sharing with everyone. Any feedback is welcome especially for any incorrect information!