Cascading Style Sheets (CSS)

Using styles in a document

All we've seen so far isn't enough to use our styles in a real HTML document, as we yet don't know where to place the CSS declarations. The final link in this chain is to let user agents know where they can find style information for the document they're interpreting. And this is something that's up to HTML.

For this purpose, HTML presents three methods for adding style information to the document. These are described in the sections below.

The style attribute

Using the style attribute is the easiest and more direct way for applying style declarations to an element. This attribute can have as content, any number of style declarations, separated from each other by a semicolon (";"). As style is a global attribute, it can be used in any element of HTML.

In the example some style properties have been applied to a couple of elements, using the style attribute.

<p style="background-color: gray;">Hello! This is going to be a <b style="color: white; text-decoration: underline;">great</b> day!</p>

Hello! This is going to be a great day!

But despite all its simplicity and immediacy, using this method somehow breaks one of the main benefits of CSS: the possibility of creating style declarations that can be reused on as many elements as possible, something that translates into flexibility and portability. Just imagine having to apply this same style to hundreds of elements in your documents.

This doesn't mean this approach isn't useful. In fact, it can be very pertinent to use it when you need to apply a style to a single element and only once. Anyway, the following alternatives will solve the problem mentioned in the previous paragraph.

The style element

The style element is a container for style declarations. Inside this element we can throw any number of style declarations, as long as thery're properly organized in selectors groups. In other words, all the examples seen in the section about selectors, can be placed between the tags of these elements.

This element has the particularity that, when used in its classical way (this is, without the scoped attribute being present), it can only be declared in head section of the document.

The following example shows an extract of a document where the style element is being used to provide presentational attributes to some elements in the body. More specifically, two type selectors are providing style rules for the elements h1 and p.

<head>
  <title>Man in black</title>
  <style>
    h1 {
      background-color: gray;
      margin: 0;
    }
 
    p {
      background-color: black;
      color: white;
      margin: 0;
    }
  </style>
</head>
<body>
  <h1>My favorite color</h1>
  <p>Would you dare to guess what my favorite color is?</p>
</body>

My favorite color

Would you dare to guess what my favorite color is?

Now, with this method we can share style declarations among the many elements present in the same page. But, is it possible to have inter-document style declarations? This is something that can only be achieved with our last approach.

External files

The advantage of using an external file to store style information lies in the possibility of sharing that file among any number of documents. When the document is loaded, the browser detects the reference to the style sheet file, loading and applying the styles as if they were part of the document.

An external style sheet file can be inserted in the document with the link element, having the value "text/css" in the type attribute, and the URI of the style sheet file in the href attribute. Keep in mind that, like style, this element can only be placed in the head of the document.

About the contents of the style sheet file, it must present the same type of information that would fit in a style element, this is, any number of style declarations organized in selectors groups. The code below shows the same document presented in the previous example, only here the style information is placed in an external file.

<head>
  <title>Man in black</title>
  <link type="text/css" href="styles.css">
</head>
<body>
  <h1>My favorite color</h1>
  <p>Would you dare to guess what my favorite color is?</p>
</body>

My favorite color

Would you dare to guess what my favorite color is?

Inheritance

Inheritance is a concept by which descendant elements inherit the properties declared for their ancestors. This is nothing else than the expected behavior, and avoids having to redefine the same properties in an element's children. The following example is proof of CSS inheritance. There, the elements inherit all the properties defined for their ancestor, the body.

<head>
  <title>The red and winding road</title>
  <style>
    body {
      color: red;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>The red and winding road</h1>
  <p>This wind is skewing my text...</p>
</body>

The red and winding road

This wind is skewing my text...

The specificity order

CSS styles from different sources and selectors are applied in a specific and univocal order. This specificity order helps solving conflicts and makes the system predictible, allowing authors to plan their style scheme with certainty. For example, if you use the style attribute and, inside a style block, a class selector to define the same property of an element, the definition in the style attribute will prevail.

The list below shows the specificity order that applies in CSS. Each way to apply styles in this list will prevail when competing with those below it.

  1. The style attribute.
  2. The ID selector.
  3. The class selector.
  4. The type selector.
  5. The universal selector.

In the next example, the color of the paragraph is being defined twice: in the style attribute and in the type selector. As forseeable, the color defined in the style attribute will prevail.

<head>
  <title>Why I love arcade machines</title>
  <style>
    p {
      color: gray;
    }
  </style>
</head>
<body>
  <h1>Why I love arcade machines</h1>
  <p style="color: blue">I can still smell the metal coin in my hand when I close my eyes...</p>
</body>

Why I love arcade machines

I can still smell the metal coin in my hand when I close my eyes...

Of course, the list described above doesn't say anything about advanced selectors, where combinations take the specificity order away from simplicity. Yet, there's a system to work with that too, but the scope of this tutorial will keep us from talking about it. Anyway, you shouldn't need to know that yet, so focus on the basic aspects and go ahead with the practice.

Prev123Next