CSS banner image.

The CAT curriculum, unfortunately, teaches a very old version of HTML. Modern web development has moved on dramatically. In this post, I explain through a number of steps how to start your journey to CSS and one of the crucial concepts in modern web development: the separation of content from presentation.

In this post:

  1. The Bad and the Ugly
  2. The Good
  3. From HTML formatting to CSS styling
  4. Let it go to your <head>
  5. Making a clean break
  6. Being selective: CSS selectors
  7. Leave the images behind

Separation of content from presentation is considered “best practice”.

1. The Bad and the Ugly

The following horrors appear regularly in assessments:

<html>
    <font color="red" face="Arial">
    <body>
        <h1>Hello World!</h1>
        <p>I can like to code lekker HTML.</p>
    </body>
    </font>
</html>

Or equally incorrect:

<html>
    <body>
    <font color="red" face="Arial">
        <h1>Hello World!</h1>
        <p>I can like to code lekker HTML.</p>
    </font>
    </body>
</html>

The above code was never correct — regardless of the version of HTML. The fact that it is rendered by a browser is part of the problem: browsers are way too forgiving!

2. The Good

To make the above code correct, by the way, you would do the following:

<html>
    <body>
        <h1><font color="red" face="Arial">Hello World!</font></h1>
        <p><font color="red" face="Arial">I can like to code lekker HTML.</font></p>
    </body>
</html>

Consider the clumsiness of the above code should the page be more lengthy, or you decide the text of your entire website should be red! Surely there must be a more efficient way of styling content? Yes, indeed: there is!

3. From HTML formatting to CSS styling

Let us start the journey to CSS with a simple line of HTML from the above example:

<p><font color="red" face="Arial">Hello World!</font></p>

In the above example, the <p> tag adds structure to the text: a paragraph is a structural element in language. The <font> tag adds formatting to the text in the paragraph (by the way, notice the formatting <font> tags are nested inside the structural <p> tags).

<p style="color: red; font-family: Arial">Hello World!</p>

In the above example, we have moved to a more modern approach by coding our CSS as an inline style attribute, but we still have our content and presentation in one file.

4. Let it go to your <head>

The next step is to move the styling to an internal CSS style declaration in the head of your HTML document. In the example below, we are using p as our CSS selector:

<head>
    <style>
    p {
        color:red;
        font-family: Arial;
    }
    </style>
</head>
<body>
    <p>Hello World!</p>
</body>

In the example above, all paragraphs in that HTML page will have red text. If we wanted only certain paragraphs to have red text, we would have to be more specific with our selector.

5. Making a clean break

This helps with the DRY principle: Don’t Repeat Yourself.

To complete this process of separation, we move the CSS rules from the HTML document and place them in an external CSS stylesheet and then link the stylesheet back to the HTML document we “extracted” it from. The CSS file is a text file with a .css extension. The stylesheet is linked to the HTML document as follows:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Your CSS file, styles.css, contains the following:

/* You should comment your CSS! */
p {
    color:red;
    font-family: Arial;
}

By linking your stylesheet to all the HTML files in your website you can quickly format your content consistently across your entire website: if you suddenly decide that red is no longer your colour of choice for your paragraphs you simply change the rule in your stylesheet!

6. Being selective: CSS selectors

Of course, you will have noticed perhaps that ALL your paragraph text is now red and you may only have intended for the text of that particular paragraph to be red. This is where selectors come into play:

<p class="myImportantText">Hello World!</p>
<p>Default coloured text.</p>

In the above code, I have added a class attribute to the <p> tag and used that class as the selector in the CSS below:

/* Set text color to red & font to Arial in all paragraphs with the class myImportantText */
p.myImportantText {
    color: red;
    font-family: Arial;
}

7. Leave the images behind

One of your many goals should be relying less and less on images and more and more on CSS. In the example below, I have used one small image file to create the logo element. This means that the page will load faster and the text in the “logo” is SEO friendly and accessible.

See the Pen stylus logo by David Fox (@foxbeefly) on CodePen.

For the full CSS specification along with tutorials and more, you cannot go wrong visiting w3schools.com/css/

Hop over and play in Codepen where I have loads of CSS code samples.


What’s next: CSS selectors – the basics

By MisterFoxOnline

CAT Educator

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.