Cascading Style Sheets (CSS)

Practice

In this practice we're going to add some style to the document we finished in the practice of the tutorial "Links in HTML". So, before we start writing, open your file and get familiar with the contents of the document. If you remember, we said early in the beginning of these practices that the styles you saw in the examples of this website were inherited from the website's styles and, thus, the look of your document wouldn't be the same. This is about to change.

Our first step in this process will take place in the head section of the document. Here, after all other elements and before the closing tag of the head element, we're going to add a style block that will contain all style declarations for our document. The following code shows how the head section of the document should look like after the changes.

<head>
  <title>This is the story of me, learning HTML on my own</title>
  <link rel="author" href="mailto:jhon@superwebsitesuperawesome.com">
  <style>
  
  </style>
</head>

Do you see that whitespace between the style opening and closing tags? There's where we'll add our style declarations. We'll begin defining some global properties to the body element, that we expect to be inherited by all elements inside of it. This is a very common resource in web desing, and for obvious practical reasons. The properties and values declared for the body will act as default styles, being most times overriden by specific declarations for elements.

In order to do this, we'll insert a type selector for the body with some properties and their values, namely, the font, size and color of text, and a background color.

Be aware that in the following examples, the code will show what happens in the head while the rendered part will show how that code affects the elements in the body. This will improve comprehension, by focusing only in the things that matter for each case.

Because of the scope of this website, the CSS properties and values in the following examples won't be fully explained. You can get more learning resources about the subject in the Beyond HTML section.

<head>
  <title>This is the story of me, learning HTML on my own</title>
  <link rel="author" href="mailto:jhon@superwebsitesuperawesome.com">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #452f17;
      background-color: #dec39e;
      padding: 2em;
    }
  </style>
</head>

Table of contents

  1. I made up my mind
  2. Getting the hang of it

I made up my mind

Today I woke up decided to learn HTML on my own. So, I opened HTMLQuick.com in my browser and got myself started.

Getting the hang of it

The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.

This isn't looking allright, but we're fixing that soon. In our next step, we're setting styles for headings, paragraphs and links, all at the same time. This is going to be as easy as before: we'll add another three type selectors (this time, for h1, p and a) and we'll provide some declarations for them.

<head>
  <title>This is the story of me, learning HTML on my own</title>
  <link rel="author" href="mailto:jhon@superwebsitesuperawesome.com">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #452f17;
      background-color: #dec39e;
      padding: 2em;
    }
 
    h1 {
      font-size: 40px;
      font-weight: normal;
    }
 
    p {
      text-indent: 4em;
    }
    
    a {
      color: #813f25;
    }
  </style>
</head>

Table of contents

  1. I made up my mind
  2. Getting the hang of it

I made up my mind

Today I woke up decided to learn HTML on my own. So, I opened HTMLQuick.com in my browser and got myself started.

Getting the hang of it

The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.

So far, the styles defined for this document can be considered global and could be applied indistinctly to all affected elements in the website, an operation that can even guarantee uniformity in the presentation of content. But the changes we're about to make to the table of contents, aren't supposed to be applied to all header elements in the website or document (remember that the table of contents is declared as the header section of the body). If this was the case, the header of any section would look like the table of contents.

There are many ways of solving this problem, but in this case we're using classes. To link a CSS class to an element we first need the class attribtue to be present in the element. In the following step we're adding the class attribtue to the table of contents' header, using the word "toc" as the class name. This is how that header section of the table of contents should look like after the changes.

<header class="toc">
  <h1>Table of contents</h1>
  <ol>
    <li><a href="#introduction">I made up my mind</a></li>
    <li><a href="#overcoming-obstacles">Getting the hang of it</a></li>
  </ol>
</header>

Now we can declare a class selector and start throwing properties inside of it. Remember that in the declaration of a class selector, the class' name must be preceded by a dot (".") and followed by the declarations between curly braces ("{}").

<head>
  <title>This is the story of me, learning HTML on my own</title>
  <link rel="author" href="mailto:jhon@superwebsitesuperawesome.com">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: #452f17;
      background-color: #dec39e;
      padding: 2em;
    }
 
    h1 {
      font-size: 40px;
      font-weight: normal;
    }
 
    p {
      text-indent: 4em;
    }
    
    a {
      color: #813f25;
    }
    
    .toc {
      width: 50%;
      padding: 1em 2em;
      border-radius: 4px;
      background-color: #e6d5bb;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>

Table of contents

  1. I made up my mind
  2. Getting the hang of it

I made up my mind

Today I woke up decided to learn HTML on my own. So, I opened HTMLQuick.com in my browser and got myself started.

Getting the hang of it

The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.

And that's it! Now, not only you know what CSS was all about, but you also know how to use it in a basic way. There's much more to learn, but after this tutorial here things should go smoothly.

Prev123