This tutorial was originally written for CAT students looking to extend their web development skills beyond the HTML they must learn. It has been expanded to include information for Cambridge ICT & IT students. Regardless, it is the starting point of your CSS journey with stylus.
In this tutorial:
Required knowledge:
Separation of content from presentation is considered “best practice“.
The Bad and the Ugly
Unfortunately, the DBE CAPS CAT curriculum teaches an outdated version of HTML where presentation (formatting) is mixed in with content. Modern web development has moved on dramatically. In this post, I explain step-by-step how to start your journey to CSS and one of the crucial concepts in modern web development: the separation of content from presentation.
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 a browser renders it is part of the problem: browsers are way too forgiving!
The Good
To refactor the above code correctly, 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 lengthier, 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!
Refactoring code is the process of restructuring existing computer code without changing its external behavior.
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.
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.
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 [1]:
<head>
<link rel="stylesheet" type="text/css" 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!
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;
}
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/.
Next steps
Learn more about CSS selectors — the basics, or get stylish and learn the skill of Declaring Fonts in CSS
Hop over and play in Codepen where I have loads of CSS code samples.
References:
- W3Schools. (no date) HTML <link> type Attribute. Available at: https://www.w3schools.com/tags/att_link_type.asp (Accessed: 10 May 2024).
- Code refactoring. (2022, November 8). In Wikipedia. https://en.wikipedia.org/wiki/Code_refactoring