1.1 You’re a front-end developer

CSS isn’t the kind of language that’s useful to learn in little half-steps—the part that people find difficult is dealing with handling styling when you are deep into creating an honest-to-goodness website with many levels of complexity. The real skill comes in knowing how to plan for a multi-page site that uses a bunch of different snippets of code³ placed into a flexible layout that organizes content and data in a useful way.

There are already many sites (like the Mozilla Developer Network CSS Reference) that exhaustively document every CSS property, so going over each and every option from the specification would just be a duplication of effort. Instead, Learn Enough CSS & Layout to Be Dangerous is designed to complement such reference works by showing you how CSS applies to the design of a real website. The resulting narrative explanation gives you the context necessary to understand and apply CSS documentation—especially when combined with a little technical sophistication (Box 1.2).

The important thing at this point in your progress as a developer is to start learning how styling and layout concepts work together, how HTML and CSS combine to make a layout that is actually useful, and how to use some sort of system that allows you to avoid repeating sections of the site or styling on multiple pages (Box 1.3). Doing otherwise would make you an expert at changing text color and size, but you’d have no chance of applying the knowledge you’ve gained to a real-world scenario. In fact, by learning CSS in a holistic way, you’ll not just be getting an introduction to styling—this tutorial is also going to be your first introduction to the world of front-end development (Figure 1.3).⁴

Figure 1.3: Yer a wizard front-end developer, Harry.

1.2 CSS overview and history

CSS takes the form of plain text declarations inserted into an HTML or CSS file using a text editor. A typical series of CSS declarations might look like Listing 1.1. (You are not expected to understand these styles at this point.)

body {
  color: black;
}

p {
  font-size: 1em;
}

p.highlighted {
  font-size: 1.5em;
  background: yellow;
}

The “Cascading” part of Cascading Style Sheets refers to the way the defined styles flow, or “cascade”, down from element to element on a page based on a few factors like which declaration came first, whether an element is the child of a parent element that has styles applied to it, or the strength of the declaration (more on this in Section 2.3). This inheritance of style (from the top levels to elements below) happens so that we as developers can avoid having to define how every single element should look. For example, if we changed the color in the body tag in Listing 1.1, that change would cascade down and change the color attribute on every interior element as well.

The “Style Sheet” part of the name (sometimes written as the single word stylesheet) refers to how CSS allows developers to collect all the style declarations in a separate section of the page (called an internal stylesheet), or place them into an external file (called, you guessed it, an external stylesheet). External stylesheets are loaded onto the page as a link in the head section of the HTML. (We’ll learn how to do this ourselves in Chapter 5.) The result is that we end up separating the code that defines how something looks (or is positioned) from the actual content—all of which makes for simpler and more maintainable code.

1.3 Sample site setup

Now that we’ve got an overview of the purpose and origins of CSS, it’s time to start looking at some concrete examples. The initial styling rules will necessarily be simple, so it’s important to have patience while we lay this crucial foundation for the working website (with layout) that we’ll be developing starting in Chapter 5.

We’ll start by creating a new project in the repos folder using the same basic mkdir command covered in Learn Enough HTML to Be Dangerous (Listing 1.2).¹²

$ cd                                   # cd to the home directory
$ mkdir -p repos/<username>.github.io  # Make site directory
$ cd repos/<username>.github.io        # cd into new directory

Note that we’ve used a special directory name that corresponds to the main GitHub Pages site for your account:

<username>.github.io

In Listing 1.2, <username> should be replaced with your GitHub username, so the full URL should look something like mhartl.github.io.

GitHub Pages actually supports serving sites out of subdirectories, like mhartl.github.io/sample_css, but unfortunately this solution fails if you have additional subdirectories in your site, such as mhartl.github.io/sample_css/gallery. The reason is that if you include files and images in one subdirectory (e.g., sample_css), there’s no natural way to include the same files and images in further subdirectories (e.g., sample_css/gallery). Since our sample site will eventually have exactly this kind of structure (Section 6.4), we’ve opted to use the root Pages domain. An even better solution is to use a custom domain, which lets you host your GitHub Pages site at a URL like www.example.com; see the free tutorial Learn Enough Custom Domains to Be Dangerous to learn how to do it.

To get our site started, we’ll also create an index.html file using the touch command (as discussed in Learn Enough HTML to Be Dangerous), as shown in Listing 1.3.

$ touch index.html    # Create an empty index file

Inside the new folder, use your favorite text editor to open the newly created index.html file and paste in the markup shown in Listing 1.4. For convenience, the contents of Listing 1.4 and all other code listings in this tutorial are available online at the following URL:

https://github.com/learnenough/learn_enough_css_code_listings

You should recognize Listing 1.4 as a very basic HTML page—if this doesn’t look familiar at all, we recommend reviewing Learn Enough HTML to Be Dangerous at this time.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div style="border: 1px solid black;">
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
  </body>
</html>

When you open that HTML document in your browser (Box 1.5), you’ll see a series of three red links, some headers, and a series of green links in boxes (Figure 1.11). This will be our initial test page.

Note: Due to various slight differences between browsers, browser window sizes, etc., your results may not always match the screenshots exactly, so small discrepancies are not a cause for concern. As we’ll emphasize throughout this tutorial, it’s important to focus on achieving good-enough results without chasing the unreachable goal of pixel-perfection.

Figure 1.11: This is the beginning of something great, unassuming though it may seem.

  $ open index.html        # macOS only

  $ xdg-open index.html    # Linux only

Figure 1.12: Opening an HTML file using the cloud IDE.

As in Learn Enough Git to Be Dangerous and Learn Enough HTML to Be Dangerous, we’ll deploy our new website immediately to production, which is a good habit to cultivate. First, you’ll need to create a new project at GitHub, using the steps shown in Learn Enough HTML to Be Dangerous, which in this case looks like Figure 1.13.

Figure 1.13: Creating a new GitHub repo.

Once you’ve finished the steps needed to create the repository, initialize and deploy it using the commands shown in Listing 1.5. (Because videos are relatively hard to update, the screencasts that accompany this book use master, which was the default branch name for the first 15+ years of Git’s existence, but the text has been updated to use main, which is the current preferred default. See the Learn Enough blog post “Default Git Branch Name with Learn Enough and the Rails Tutorial” for more information.)

$ git init
$ git add -A
$ git commit -m "Initialize repo"
$ git remote add origin <repo url>
$ git push -u origin main

If you find the sequence of commands in Listing 1.5 challenging instead of familiar, it’s probably a good idea to review Learn Enough Git to Be Dangerous and Starting the project from Learn Enough HTML to Be Dangerous. (Confirming that the deployment succeeded is left as an exercise (Section 1.3.1).)

Although we’ll add in the occasional Git commit/deployment in this tutorial, in general these will be up to you. Having learned the material in Learn Enough Git to Be Dangerous and Learn Enough HTML to Be Dangerous (or already being familiar with it), now is a good time to practice making such decisions on your own.

1.4 Start stylin’

As discussed in Section 1.2, CSS is a way of defining how elements on an HTML page look and are positioned, with styling that flows (“cascades”) down from element to element based on factors like which declaration came first, whether an element is the child of a parent element that has styles applied to it, or the specificity of the declaration.

So what do “parent”, “children”, and “specificity” mean in the context of a web page and how it gets styled?

The idea is that every element on the page is contained inside of another element, which in turn can contain other elements—like Russian nesting dolls (Figure 1.14).¹³

Figure 1.14: Russian dolls are designed to nest one inside the other.

We can visualize the parent and child structure of the elements on a typical page using the diagram in Figure 1.15.

Figure 1.15: Relationships always cascade down.

The hierarchical tag structure shown in Figure 1.15 is known as the Document Object Model, or DOM for short.¹⁴ Each new level in the DOM is a child of the level above it. In other words, the html tag is the parent of the entire page, the body tag is a child of the html tag, and so on. The body tag then has its own children, which are the h1 and h2 elements, the unordered list ul, and the div elements. In CSS, styling rules flow down from parents to children unless another style interrupts and takes priority.

Our first application of these ideas will be to the repetitive inline styles that exist in our current example page. For example, several div elements share identical inline border styling, as seen in Listing 1.6.¹⁵

.
.
.
<div style="border: 1px solid black;">
<div style="border: 1px solid black;">
<div style="border: 1px solid black;">
.
.
.

Now that you know about the DRY principle (Box 1.3), all that redundant styling should be causing a mild case of programmer’s itch, and the only cure is to eliminate the duplication. The technique we’ll use is called refactoring, which involves changing the form of the code without changing its function. In other words, after making the changes in this section, the appearance in the browser should remain the same.

To make the example code cleaner, we are going to use a method mentioned in Section 1.2: an internal style sheet. To implement this, we need to use a new HTML element, the style tag (Listing 1.7). This style block will hold all our style declarations, but by design the style tag isn’t visible on rendered pages, and thus won’t be visible in a user’s browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>

    </style>
  </head>
  .
  .
  .

A style block like this can actually be placed anywhere on the page, but the conventional placement is inside the page’s head tag. (The best practice is actually to put the CSS rules in a separate file, a task we’ll undertake in Section 5.5.)

Now let’s get rid of the repetition in Listing 1.6 by adding in our first CSS declaration, as shown in Listing 1.8.¹⁶

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      div {
        border: 1px solid black;
      }
    </style>
  </head>
  .
  .
  .

Figure 1.16 shows the anatomy of the CSS rule from Listing 1.8: the div part of the statement, which is outside the curly braces, is called the CSS selector (in this case targeting only div HTML elements). Then there is a declaration made up of a property (border) and a value (1px solid black) separated from the property by a colon. Finally, there is a semicolon at the end of the line that ends the style. (Just a warning: a lot of these terms get mixed up in regular usage. For example, people will sometimes refer to the whole thing, including the selector, as the declaration.)

Figure 1.16: What’s in a name?

Although the spacing shown in Listing 1.8 is typical, CSS is similar to HTML in that whitespace is ignored by the browser. For the sake of any humans viewing your markup, though, it’s a good idea to follow certain formatting conventions (Box 1.6).

  div {border: 1px solid black}

  button {
    background-color: gray;
    border: 1px solid black;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: "proxima-nova", "Proxima Nova",
                 sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.15em;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.1s linear;
  }

  button { background-color: gray; border: 1px solid
  black; color: white; cursor: pointer; display:
  inline-block; font-family: "proxima-nova",
  "Proxima Nova",
  sans-serif; font-size: 12px; font-weight: bold;
  letter-spacing: 0.15em; padding: 10px 15px;
  text-decoration: none; text-transform: uppercase;
  transition: all 0.1s linear}

After adding the CSS in Listing 1.8, delete all the style="border: 1px solid black;" attributes from the four div tags. Your test page’s code should now look like Listing 1.9.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
      <li>
        <a href="https://example.com/" style="color: red;">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
  </body>
</html>

Save the changes, refresh the page in your browser… and BAM! Everything should look the same. (If not, double-check your work to see if you can get your results to match.)

So what happened here? The declaration that we added in Listing 1.8 is a CSS statement that tells the browser it needs to apply a 1-pixel wide solid black border to all of the divs in the body of the html. (We’ll learn more about pixels in Section 3.3.) The result is a simplification of the code without any change in the page’s appearance.

Now that we’ve seen how to consolidate a bunch of inline styles into a single CSS declaration, let’s do the same thing for the links that are colored red via inline styles inside of the lis. Your new sample page should look like Listing 1.10.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      a {
        color: red;
      }
      div {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/" style="color: green;">I'm a link</a>
    </div>
  </body>
</html>

As before, the appearance shouldn’t change after refreshing the browser.

At this point, we’ve definitely made progress in the fight against inline style redundancy, but what about those links that are colored green at the bottom using inline styling? One way to clean up the inline styles would be to use CSS classes, which we’ll start covering in Section 1.5, but for now let’s see if we can do it with just generic CSS selectors.

Because the links in question are contained inside of divs, and the other links on the page are not, we can use the nesting inheritance of CSS to define a style that changes only the color of links inside of divs. We can accomplish this by adding the declaration from Listing 1.11 to the style block, and then remove the inline styles from the links on the page.

div a {
  color: green;
}

Your entire test page should now look like Listing 1.12.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      a {
        color: red;
      }
      div {
        border: 1px solid black;
      }
      div a {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div>
      <a href="https://example.com/">I'm a link</a>
    </div>
  </body>
</html>

The page is a lot cleaner now, isn’t it? Separating the styling from the content makes the page’s code much easier to read, but maybe you can already see the problem with the way that we’ve targeted the styles…

The problem is: if we were to add new divs anywhere on the page, and they happened to have links inside them, those links would be green even if that isn’t what we want. The reason why is that the selector we used in that declaration is way too generic. In Section 1.5, we’ll take a look at how to add styling with far greater specificity using CSS ids and classes.

1.5 CSS selectors

Between Learn Enough HTML to Be Dangerous and the beginning of this tutorial, we have so far used only rudimentary targeting techniques for styles. In Learn Enough HTML to Be Dangerous, we learned how to add styles directly to elements, but this approach is brittle and inefficient. In this tutorial, so far we’ve used CSS that is separated from the content, but we have used only generic selectors like div or a. The problem with generic element selectors is that they apply to all the elements on the page. So, how can we apply styling to specific elements rather than to every single one?

There are two methods, one that targets only one element per page—the id (or “identification”) selector¹⁷—and one able to target multiple elements—the class selector. Let’s edit our example HTML to add this kind of targeting to our page.

Ids and classes are always applied only to the opening tag of an element, and they always have the same format. We’ll use the div tag for concreteness:

<div id="foo" class="bar">
  .
  .
  .
</div>

We see here that both ids and classes consist of key/value pairs, where each value is a string that serves as a label for the id or class. In this case, the key id has value "foo" and the key class has value "bar".

Although CSS offers a great deal of flexibility in choosing id and class names, there are a few restrictions and usage suggestions:

• Use only one id per element.
• No numbers are allowed at the beginning of the name (e.g., name1 is valid, but 1name isn’t).
• Dashes (-), underscores _, and CamelCase can be used to join multiple words (so foo-bar-baz, foo_bar_baz, and FooBarBaz are all valid names).
• Spaces are invalid in id names, and are used to separate multiple names in the case of classes (so id="foo bar" is illegal, while class="foo bar baz" places three separate classes on an element).
• Be consistent (e.g., if using dashes as separators, use them everywhere—don’t mix them with underscores).

To see how this works in practice, let’s add some ids and classes to our sample page. On the first opening div tag that comes right after the h2, add id="exec-bio", and then add class="bio-box" to all of the divs in that section, as shown in Listing 1.13).

<!DOCTYPE html>
<html>
  .
  .
  .
  <body>
    .
    .
    .
    <h2>I'm an h2</h2>
    <div id="exec-bio" class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
  </body>
</html>

(This use of a class is good CSS practice, but we generally don’t recommend using an id in this context; we include it here mainly for demonstration purposes. We’ll discuss this issue in more detail in Section 2.2.)

Next, let’s update our CSS block to target these new selectors. To target an id in CSS, you put a # (usually read “hash”) in front of the name, and to target a class you add a . (usually read “dot”). For example, to change the background color of the #exec-bio id, we can use the following CSS rule:

#exec-bio {
  background-color: lightgray;
}

(Here lightgray represents (surprise!) a light gray,¹⁸ which is an example of a CSS color name. We’ll cover the details of color naming in Section 3.1.) Similarly, to apply a rule to the .bio-box class,¹⁹ we can use the following CSS:

.bio-box {
  border: 1px solid black;
}

As we’ll see in a moment, this rule keeps the thin black border added in Listing 1.9, but in such a way that it doesn’t apply to all the divs on the site.

Finally, we can target the anchor tags inside the bio boxes using the combination of the class name and the tag name, like this:

.bio-box a {
  color: green;
}

This turns the a tags green, but only if they’re inside an element with class "bio-box". This class-based approach gives us much finer-grained control than the method used in Listing 1.11.

Adding these three rules to the style block (while removing the rules we no longer need) leads to the markup shown in Listing 1.14.

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      a {
        color: red;
      }
      #exec-bio {
        background-color: lightgray;
      }
      .bio-box {
        border: 1px solid black;
      }
      .bio-box a {
        color: green;
      }
    </style>
  </head>
  <body>
    .
    .
    .
    <h2>I'm an h2</h2>
    <div id="exec-bio" class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
    <div class="bio-box">
      <a href="https://example.com/">I'm a link</a>
    </div>
  </body>
</html>

After saving your changes and refreshing the browser, you should see that the boxes at the bottom have the same border as before, but now the one with the CSS id now has a light gray background (Figure 1.17).

Figure 1.17: Elements targeted with classes and ids.

Congrats! You’ve just used ids and classes to target styles at specific elements, and have leveled up your CSS knowledge. Now that you’ve learned how to make declarations, and how to use ids and classes, we can now start getting into the nitty gritty of how CSS works.