CommonLounge Archive

Diving Deeper into CSS

June 22, 2017

In this lesson, you’ll learn:

  • More ways to style your web page with CSS
  • What the “cascade” means in Cascading Style Sheets
  • Which CSS styles get applied, and which don’t
  • How to add color, height, and width in CSS

Using CSS to Style a Page

To recap, here’s the basic CSS format:

selector {
  property: value;
  property: value;
}

You use selectors to choose which parts of the HTML document you want to style. In the first lesson, you learned that a tag name (a, div, p, etc.) can be a selector.

If you want to style all the links in an HTML document, you can write the following CSS:

a {
  color: red;
  font-family: Helvetica;
  font-weight: bold;
}

To see it in action, here’s the CSS with HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a {
      color: red;
      font-family: Helvetica;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <a href="https://www.google.com">Google</a>
</body>
</html>

Result: (zoomed in)

Most of the time, you will want to have two or more styles for the links on your page. For instance, the links in your header may be black, while the links in your blog post might be blue.

In that case, you need to use something called a class. A class is an attribute added to an HTML element to style it in CSS.

For example, you could create a class for both types of links. (For example,link-header and link-blog.)

First, you would add a class attribute with the value link-header to every link in your header and a class attribute with the value link-blog to every link in your blog post. (Yes, you must add them one by one.)

<a href="/home" class="link-header">Home</a>
<a href="https://www.google.com" class="link-blog">Google</a>

Then, you would style each class in your CSS document. When using a class as a selector, you must add a period (“.”) before the class name.

.link-header {
  color: black;
} 
.link-blog {
  color: blue;
}

You can try out the full code below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .link-header {
      color: black;
    }
    .link-blog {
      color: blue;
    }
  </style>
</head>
<body>
  <a href="/home" class="link-header">Home</a>
  <a href="https://www.google.com" class="link-blog">Google</a>
</body>
</html>

Now you’ve created two separate link styles using classes. Header links are black, while blog links are blue.

You can add classes to any HTML element. You can also add more than one class by adding a space between each, as below:

<p class="text-blog first-line">This is the first line of the blog post.</p>

How CSS Works

The browser reads CSS from top to bottom, line by line.

That means that if you write a selector once, and then write the same selector later in the CSS document, the later styles will override the earlier ones.

This is called the cascade. (CSS is short for Cascading Style Sheets.)

Here’s an example. If you write this in your CSS:

p {
  color: black;
  font-face: Helvetica;
}

This sets all your paragraphs to the color black and font-face Helvetica.

Yet, if you add this later in your document:

p {
  color: red;
  font-weight: bold;
}

This will not only make all your paragraphs bold, but it will override the color “black” with the color “red.” (But, since the font-face hasn’t been changed, so the font will still be Helvetica.)

Take a moment and try out this code below and make sure you understand what’s going on:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      color: black;
      font-face: Helvetica;
    }
    p {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

When the page loads, the paragraphs will be red, not black. CSS styles written later will always override those written before.

It’s the same in this example:

p {
  color: black;
  color: red;
}

Try it out here:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      color: black;
      color: red;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

The “color” property is written twice, so the second one will override the first one. When the page loads, all paragraphs will be red, not black.

Understanding Specificity

The order of appearance is not the only way to determine which styles get applied and which don’t.

In fact, a class selector will always “win” over an element selector, no matter what order they’re in. That’s because a class selector is more specific.

Since an element selector styles all elements in the entire document, it has a specificity of 1. (Think of it as having 1 point.)

p {
  color: black;
}

On the other hand, a class selector has a specificity of 10. This is because class selectors only style elements with the class attribute. (Think of it as having 10 points.)

.important {
  color: red;
}

In CSS, the selector with the most points “wins” against the other. In the next example, elements with the class “important” will be red. All other paragraphs will be black.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .important {
      color: red;
    }
    p {
      color: black;
    }
  </style>
</head>
<body>
  <p class="important">This is important text.</p>
  <p>This is regular text.</p>
</body>
</html>

Result:

There’s another type of selector (that you haven’t seen yet) that has a whopping 100 points. Because their specificity is so high, it’s recommended that you don’t ever use them for CSS styles. But you will see other people using it, so it’s good to know about.

This third type of selector is an ID. IDs are attributes added to HTML elements, just like class names.

<p id="super-important-text">This paragraph is super, super important.</p>

The tricky thing about using an ID is that you can only use it once in an entire document. That means you can only style one element at a time. You’d have to create a different ID for each new element.

When you use an ID as a selector, you must include a number sign (“#”) before the ID name.

#super-important-text {
  color: red;
}

This selector has a specificity of 100 (100 points) so it is very, very difficult to override.

Again, take a moment to play with the id selectors in the code below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #super-important-text {
      color: red;
    }
  </style>
</head>
<body>
  <p id="super-important-text">This paragraph is super, super important.</p>
</body>
</html>

Advanced Ways to Use Selectors

You’re not limited to only using one selector at a time. You can combine selectors to create even more powerful CSS styles.

For example, we used class names to make the links in the header black and those in the blog post blue. But there’s an easier way to do that! It looks like this:

header a {
  color: black;
}

This selector means: “All the a tags located inside of a header tag.” To select all the links inside of an article tag, you would write this:

article a {
  color: red;
}

This way, you don’t need to add any class names to your HTML to achieve the style.

But how specific are these? For example, which of the following styles would “win” in the following HTML?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .emph {
      color: green;
    }
    header a {
      color: black;
    }
  </style>
</head>
<body>
  <header>
    <a href="/home" class="emph">Home</a>
  </header>
</body>
</html>

What color would the link be in this case? To break it down: Elements with the class “emph” are green, but all links in the header are black. In this case, the link is inside the header, but also has the class name “emph.”

If you guessed green, you are right!

You can calculate the specificity of any selector by using the points system we looked at before.

An element name gets 1 point, a class name gets 10 points, and an ID gets 100 points.

That means header a gets 2 points, while .emph gets 10 points. In this case, .emph is more specific so it “wins.”

What if we wrote header .emph (“All elements with the class name ‘emph’ inside the header”?) This gets 11 points.

Here are some more examples:

aside p a (“All links within paragraphs within an aside,” 3 points.)

.feature .new a (“All links within elements with the class name ‘new’ that are inside elements with the class name ‘feature,’ 21 points.)

Or an example I recommend that you avoid:

#home a (“All link elements within the one element that has an ID of ‘home,’” 101 points.)

If you want to create complex styles, it’s important to understand how styles override each other. It will also help you to troubleshoot problems in your code.

Specifying Colors

In previous examples, we’ve used simple keywords such as “red” and “blue” to specify colors. This was to make the examples easy for a beginner, but we don’t recommend you to use these colors in your actual code.

The reason for this is that each browser may have different colors, so you don’t know which “blue” will be used.

To avoid this problem, coders use a way of writing color values called HEX. Each HEX value defines a specific color that all browsers understand. Using these values gives you fine-tuned control over the colors on your web page.

For example, #dc143c is the HEX code that specifies a crimson red, while #ff00ff specifies a bright magenta.

#dc143c:

#ff00ff:

p {
  color: #DC143C;
}

Try this out here:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      color: #DC143C;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

Another way of writing color values is with RGB, where you define the amount of red (R), green (G), and blue (B) (as an integer between 0 and 255).

HEX color #dc143c is RGB color rgb(‎220, 20, 60). HEX color #ff00ff is RGB color rgb(255, 0, 255)

p {
  color: rgb(255, 0, 255);
}

If you want to add transparency, you can use RGBA. RGBA adds a fourth value to RGB that specifies the opacity of a color as a decimal from 0.0 (0% opacity) to 1.0 (100% opacity). The following would be a crimson color at 50% opacity.

p {
  color: rgba(255, 0, 255, 0.5);
}

Go back to the last “Try it now” code block and play around with the various color values and see what happens.

There are more ways of writing color, but these are the three most basic and common methods. You can use these colors for text colors, backgrounds, borders, and more. These will be covered in later lessons (Styling Text and Styling Backgrounds).

Specifying Height, and Width

The most common way to specify the height and width of objects is by using pixels as units.

Below, we are styling a div element with the class name “box,” and giving it a height, width, and background color. (Without a background color, the div would be invisible.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      height: 50px;
      width: 50px;
      background-color: #ff00ff;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Result:

Another way to write widths is to use percentages. This means that the width of the element will change with the width of your browser window. Change the CSS of .box to the following, and try it out on your browser. What happens when you make the window smaller or bigger?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      height: 50px;
      width: 50%;
      background-color: #ff00ff;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

The box will always take up half of the screen, no matter what size the browser window is. (Note that percentages don’t work in this way for the height property. When setting height, it’s recommended to use other units for height like px.)

There are even more units (like em and rem), but we will cover these in the lesson about Styling Text.

You may notice that some elements (like links and spans) don’t change their height and width. That is due a feature of CSS called the Box Model.

Go to the next lesson to decipher the Box Model.

© 2016-2022. All rights reserved.