Learning Web Design: Basic CSS

CSS is the modern way to add style to an HTML web page. There are only a few fundamental concepts you need to grasp before getting started with CSS. In order of importance:

  1. How to connect CSS to HTML elements
  2. Specificity (order of importance)
  3. The box model

How to connect CSS to HTML elements

There are three ways to match a CSS rule to an HTML element. They are by tag, class, or id. Here is an example of each.

<div>this text will be blue</div>
<div class="mySpecialClass">this text will be green</div>
<div id="myUniqueId">this class will be red</div>

/* tag selector */
div {
  color: blue;

/* class selector */
div.mySpecialClass {
  color: green;

/* id selector */
div\#myUniqueId {
  color: red;

Using a tag, class, and id selector

The major point here is how you identify elements in CSS. A rule defined for "div" will apply that style to all divs. A rule defined with "." (period) will apply that rule to all HTML elements that include that value in their class attribute. The same is for "#" (pound) which applys to HTML elements with the corresponding id attribute.

One important thing to remember is id's are unique identifiers and so there can only be one per page. You may however, use the same class multiple times per page. Elements can also have multiple classes per element (e.g., <div class="first orange grid">>).


A powerful feature of CSS is the ability to chain multiple selectors together. By doing this you can match different elements based on their hierarchical order in the HTML. For example, check out the following rules and how they are applied.

div div { color: red; }
div .someClass { color: red; }
div\#someID {color: red; }

Showing simple parent / child relationships

NOTICE the space between the selectors. This indicates that the latter selector is a child of the former. NOT including a space indicates that the selectors apply to the same element. For example, the following example shows a CSS rule that matches the given HTML snippet using a tag, class, AND id selector.

<div id="myOneAndOnly" class="headline">Hold me</div>

div\#myOneAndOnly.headline {
  color: red;

Chaining a tag, id, and class selector


Now that you know how ids and classes work, you'll need to understand how the browser determines which rules are more important than others. This level of importance given to each selector is called "specificity". By "specificity" we mean literally "how specifically a CSS rule can target HTML elements." The easiest way to think about this is to consider how many elements a single selector will effect.

  • a tag selector will target every single tag (a LOT of elements)
  • a class selector will target only a subset of tags (quite a few less)
  • an id selector will only target one element per page (exactly one)

Let's start with the basic premise that that the lowest level of specificity is order of appearance. This means if we have multiple rules for the same element, only the last one will be applied.

<div class="things_I_love" id="NewYork" >This text will be red</div>

div { color: green; }
div { color: black; }
div { color: red; } /* <-- this rule wins because it's last */

Lowest specificity: order of appearance

Next up the specificity ladder are tags, then classes, then ids in order of increasing specificity. This means, if we take the previous example, and we want to make the text green, we just need to increase the specificity of that rule. We can do this by adding more selectors or by using a different selector with higher specificity.

<div class="things_I_love" id="NewYork">This text will be green</div>

body div { color: green; } /* <-- this rule wins */
div { color: black; }
div { color: red; }

Level 1 specificity = tag selectors

Calculating specificity

Another way to quickly figure out how your CSS is going to get parsed is to calculate a specificity score. Following the math in this graphic should cover you for about 99% of the time. Basically what we're doing is applying an order of magnitude multiplier to each of the three selectors. This is because for each of the three tiers: tag, class, & id, even using one selector from a higher tier will trump any number of lower tier selectors. For example, you could have 50 class selectors trying to set your text color to red, but if another rule uses even one id selector to set the color to blue, blue will win.

CSS Specificity Calculation Diagram / Infographic

CSS Specificity Calculation Diagram

More resources explaining specificity

If you're still stumped, here are some other resources to try and explain this concept differently (one example uses Star Wars characters to explain the ranking!). Also, you'll find that I drew a lot of inspiration from these posts, especially the one from css-tricks. My diagram is essentially a simplified version of theirs.

The Box Model

This diagram illustrates the relationship between the primary CSS properties of all HTML elements. It is important to understand this model since you will regularly need to calculate how much total space your elements can take up on the page. For instance, in the element illustrated below if the width was set to 300px, and padding, border, and width were all each 10px, the total width taken up by the element would be 360px (300 + (10 * 2) + (10 * 2) + (10 * 2)).

CSS Box Model Diagram

CSS Box Model Diagram

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. - W3C

Before beginning to code a website, we need visually break apart the design into rectangular sections. This process used to be done in the context of an HTML table since CSS support wasn't widespread among browsers at the time. Nowadays, we can think in the context of pure CSS based layouts. Ultimately this gives us more freedom over the layout while retaining the semantic value of the HTML document.

If we take this website, we can clearly see how the sections break down into rectangles. Each of the rectangles will follow the rules of the box model.

CSS Layout illustrating use of the box model

CSS Layout illustrating use of the box model

In the next post, I will explain how we use positioning and floats to bring structure to our markup.

In Conclusion

If you have managed to follow along until this point, congratulations! You have a good enough understanding of CSS to move on to bigger and better things. Yes I admit it hasn't been too sexy so far but trust me once we get to positioning, floats, and cross-browser quirks, things are really going to start heating up :)

Helpful Articles

20 Websites To Help You Learn and Master CSS

Related Books

  1. Pingback: Learning Web Design: Adding Structure with CSS using Resets, Grid Frameworks, & LESS CSS | Dennis Plucinik's Web Design Blog

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>