Categories
CSS

Starting simple CSS

The CAT curriculum, unfortunately, teaches a very old version of HTML. Modern web development has moved on dramatically. One of the important concepts is separating structure from presentation. 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 structure and format.

This has led to the following horrors:

<html>
    <font color="red"><body>
        <p>Hello World!</p>
    </body></font>
</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!

Let us start with a simple line of HTML:

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

In the above example, the <p> tag adds structure to the text: a paragraph is a structural language element. 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;">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 structure and presentation in one file.

The next step is to move the styling to an internal CSS style declaration:

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

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 to the HTML document. 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;
}

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

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

HTML:

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

CSS:

/* Set text color to red in all paragraphs with the class myImportantText */

p.myImportantText {
    color: red;
}

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

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.