Learning Outcomes
On commpletion of this page you will know the three ways of using CSS to style an HTML page:
- inline styling
- internal CSS file
- external CSS file
You will also be familiar with the relative merits and demerits of each.
Go to topIntroduction to CSS
Introduction
To produce a web page we generally use a markup language HTML. This allows us to produce text, show table, forms, images, audio and video. HTML, however, has no styling facilities and on its own its output is very bland.
Despite its blandness a correctly marked up HTML document will be totally accessible to a blind person, through the medium of a screen reader or to a deaf and blind person through a Braille reader.
The experiences of a sighted person, however, will be very poor and to enhance their experience we need Cascading Stylesheets; also known as CSS.
Up to now we have used CSS solely to style our HTML code and used the aspects of it solely on a need to know basis.
In these pages we shall look at CSS as a discipline in its own right and explore its various categories as well as its ability to style web pages.To begin with in this introductory page we shall look at the three ways that CSS can be applied to an HTML document: inline, internal and external.
Go to topNo Styling
The title No Styling means in this case no CSS styling is applied to the HTML file. We want to seee how the unstyled data looks. The contents of the HTML file shown below consists of a sonnet by Shakespeare as well as a very short extract from his play A Midsummer's Night Dream.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Poetry</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Poetry</h1>
</header>
<main>
<h2>Two Extracts from Shakespeare</h2>
<article>
<section>
<p>Shall I compare thee to a summer’s day?<br>
Thou art more lovely and more temperate.<br>
Rough winds do shake the darling buds of May,<br>
And summer’s lease hath all too short a date.<br>
Sometime too hot the eye of heaven shines,<br>
And often is his gold complexion dimmed;<br>
And every fair from fair sometime declines,<br>
By chance, or nature’s changing course, untrimmed;<br>
But thy eternal summer shall not fade,<br>
Nor lose possession of that fair thou ow’st,<br>
Nor shall death brag thou wand'rest in his shade,<br>
When in eternal lines to Time thou grow'st.<br>
So long as men can breathe, or eyes can see,<br>
So long lives this, and this gives life to thee.</p>
</section>
<section>
<p>I know a bank where the wild thyme blows,<br>
Where oxlips and the nodding violet grows,<br>
Quite over-canopied with luscious woodbine,<br>
With sweet musk-roses and with eglantine:<br>
There sleeps Titania sometime of the night, <br>
Lulled in these flowers with dances and delight.</p>
</section>
</article>
</main>
<footer>
</footer>
</body>
</html>
There is no styling of any kind applied to this file and the rendered output to a browser will be very close the contents of lines 15 to 36 above. The markups, of course, will not be visible.
Visually the text is readable and the h1 and h2 headings are clearly distinguishable due to their relative sizes. What we see here is the default formatting that the browser, Google Chrome, has applied to the HTML code.
There are a number of features that are missing:
- The black/white colour scheme may be too glaring for people with visual or cognitive impairments
- the word spacing and/or line height settings may not be suitable for some dyslexics
We need CSS to fix those two problems.
Go to topInline Styling
The file shown in Listing 2 below is exactly the same file as shown in Listing 1 except that inline styling has been applied to Listing 2
The first styling occurs at line 8 where the header itself is styled. In this case the width property is set to 900 pixels, the margin is set so that the header is centered on the page, the background colour is set to 'antiquewhite', and padding to 0.25 rem.
Notice that the styling instructions are contained within double quotes and the data assigned to style. Also notice that the entire style group follows the name of the element and are enclosed between its two angle brackets.
The elements h2, article and section are similarly styled at lines 12 to 14.
The second section is styled at line 30 and the footer at line 40.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Poetry</title>
<meta charset="utf-8">
</head>
<body>
<header style="width: 900px;margin: 0 auto; background-color: #448;padding: 0.25rem;border-top-left-radius: 20px;border-top-right-radius: 20px;">
<h1 style="text-align: center;color: beige;">Poetry</h1>
</header>
<main style="width: 900px;margin: 0 auto; background-color: antiquewhite;padding: 0.25rem;">
<h2 style="text-align: center;">Two Extracts from Shakespeare <span style="color: blue">inline styles</span></h2>
<article style="background-color: beige;">
<section style="border:thin solid black; background-color: floralwhite;width;padding:0.25rem; margin:0 auto; width: 500px;margin-bottom: .25rem;">
<p>Shall I compare thee to a summer’s day?<br>
Thou art more lovely and more temperate.<br>
Rough winds do shake the darling buds of May,<br>
And summer’s lease hath all too short a date.<br>
Sometime too hot the eye of heaven shines,<br>
And often is his gold complexion dimmed;<br>
And every fair from fair sometime declines,<br>
By chance, or nature’s changing course, untrimmed;<br>
But thy eternal summer shall not fade,<br>
Nor lose possession of that fair thou ow’st,<br>
Nor shall death brag thou wand'rest in his shade,<br>
When in eternal lines to Time thou grow'st.<br>
So long as men can breathe, or eyes can see,<br>
So long lives this, and this gives life to thee.</p>
</section>
<section style="border:thin solid black; background-color: floralwhite;padding:0.25rem; margin:0 auto; width: 500px;margin-bottom: .25rem;">
<p>I know a bank where the wild thyme blows,<br>
Where oxlips and the nodding violet grows,<br>
Quite over-canopied with luscious woodbine,<br>
With sweet musk-roses and with eglantine:<br>
There sleeps Titania sometime of the night, <br>
Lulled in these flowers with dances and delight.</p>
</section>
</article>
</main>
<footer style="width: 900px;margin: 0 auto; background-color: #444;padding: 0.25rem;">
</footer>
</body>
</html>
Although Fig 2 is hardly an award winning composition, it is an improvement on Fig 1. However, how we have applied the styling may not have been very efficient. Let us look at some of the problems:
- At lines 8, 11 and 40 the elements header, main and footer have been styled. Looking at those lines we notice that the properties width, margin and padding have been given identical values on all three lines. This issue needs to be addressed. The three elements should be grouped together and styled at the same time.
- Although the section was styled at line 14, the second occurance of it is again styled at line 30. If we had any more occurrance of section in our file the styling would need to be repeated for each occurrance.
This practice has a number of drawbacks- repeating the same styling instructions for each occurrance of the same element is both time consuming and error prone
- If we decide to change the styling of an element we must change it for each individual occurrence of that element. Again this is time consuming.
- If we compare lines 8 to 14 of Listing 1 with lines 8 to 14 of Listing 2 we see that it is easier to follow the lines at Listing 1 since we are not distracted by the styling instructions. Inline styling makes HTML code difficult to understand.
Using internal stylesheets should fix those problems for us.
Go to topInternal Stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Poetry</title>
<meta charset="utf-8">
<style>
header, main, footer{
width: 900px;
margin: 0 auto;
padding: 0.25rem;
}
header{
background-color: #448;
border-top-left-radius: 20px;
border-top-right-radius: 20px;"
}
main{
background-color: beige;
}
footer{
background-color: #444;
}
article{
background-color: beige;
}
h1, h2{text-align: center;}
h1{
color: beige;
}
section{
border:thin solid black;
background-color: floralwhite;
padding:0.25rem;
margin:0 auto;
width: 500px;
margin-bottom: .25rem;
}
span{
color: blueviolet;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Poetry</h1>
</header>
<main>
<h2>Two Extracts from Shakespeare using <span>internal stylesheet</span></h2>
<article>
<section>
<p>Shall I compare thee to a summer’s day?<br>
Thou art more lovely and more temperate.<br>
Rough winds do shake the darling buds of May,<br>
And summer’s lease hath all too short a date.<br>
Sometime too hot the eye of heaven shines,<br>
And often is his gold complexion dimmed;<br>
And every fair from fair sometime declines,<br>
By chance, or nature’s changing course, untrimmed;<br>
But thy eternal summer shall not fade,<br>
Nor lose possession of that fair thou ow’st,<br>
Nor shall death brag thou wand'rest in his shade,<br>
When in eternal lines to Time thou grow'st.<br>
So long as men can breathe, or eyes can see,<br>
So long lives this, and this gives life to thee.</p>
</section>
<section>
<p>I know a bank where the wild thyme blows,<br>
Where oxlips and the nodding violet grows,<br>
Quite over-canopied with luscious woodbine,<br>
With sweet musk-roses and with eglantine:<br>
There sleeps Titania sometime of the night, <br>
Lulled in these flowers with dances and delight.</p>
</section>
</article>
</main>
<footer>
</footer>
</body>
</html>
If we remove lines 6 to 42, i.e. the block <style>..</style> what would be left would be identical to Listing 1. This <style>..</style> is the internal stylesheet which contains the styling instructions for the HTML code which stretches from line 43 down to the end of the file.
As we are already familiar with the HTML code we won't discuss it but will concentrate on the styling.
Lines 7 to 11 control the basic styling of the header, main and footer blocks. The styling applied to those elements is close to what was applied to them at lines 8, 11 and 40 of Listing 2.
Lines 12 to 16 add the extra styling to the header that had been specified in Line 8 of Listing 2.
The styling for section that spans lines 30 to 37 is identical to the same styling specified in lines 14 and 30 of Listing 2.
External Stylesheet
The standard way of using stylesheets is to put them in separate files with an extension of '.css'. They are then linked to the HTML file or files that they are meant to style.
In our case we simply removed the code between lines 7 and 41 and pasted it into a separate document which we named 'Intro Page4.css'.
With the internal stylesheet removed our HTML file is almost identical to Fig 1 except for one line. This is the line where we inform the HTML code where to locate the stylsheet for styling its contents.
For this reason we are showing only the first seven lines of the HTML code. The line that links to the CSS file is line 4, which is shown in bold.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="Intro%20Page4.css" rel="stylesheet" type="text/css">
<title>Poetry&t;/title>
<meta charset="utf-8">
</head>
Listing 5 below shows the CSS file. It is identical to lines 7 to 41 of Listing 3 and therefore there is no need to discuss its contents a second time.
header, main, footer{
width: 900px;
margin: 0 auto;
padding: 0.25rem;
}
header{
background-color: #448;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
main{
background-color: beige;
}
footer{
background-color: #444;
}
article{
background-color: beige;
}
h1, h2{text-align: center;}
h1{
color: beige;
}
section{
border:thin solid black;
background-color: floralwhite;
width;padding:0.25rem;
margin:0 auto;
width: 500px;
margin-bottom: .25rem;
}
span{
color: maroon;
font-weight: bold;
}
Over the top
So far our images have been quite boring. Each one looking like the other.
There was a very good reason for this. Our goal had been to introduce styling from its initial inline styling techniques to the highly versatile cascading stylesheets. We were conscious at all times to point out that regardless of the mode of styling the completed page would still be the same.
To complete the lesson here we shall demonstrate the ability of the cascading stylesheet to transform the same HTML file into wildly different web pages
Listing 6 below is our altered CSS file.
/*Styling for the page's top level components*/
header, main, footer{
width: 900px;
margin: 0 auto;
padding: 0.25rem;
}
header{
background-color: #448;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
main{
background: linear-gradient( blue,#ffff88, maroon,blue, #ffff88, darkorange,blue);
}
footer{
background-color: #444;
}
/*Styling the text*/
h1, h2{text-align: center;}
h1{color: beige;}
h2{background-color: beige;}
p{
color: white;
background:radial-gradient(blue,maroon, darkviolet,#008);
}
section{
border-left:4px solid black;
background:linear-gradient(90deg, blue,#ffff88, maroon,blue, #ffff88, darkorange,blue);
padding:0.25rem;
margin:0 auto;
width: 500px;
margin-bottom: .25rem;
}
h1, h2, section p{
font-family: "Old English Text MT";
}
span{
color: darkblue;
}
The result of using this CSS file is the almost illegible but wildly spectacular colourfest in Fig 5 below.
Copy both Listing 1 and Listing 6 into an html editor. Ensure that you link the HTML file to the stylesheet as shown in Line 4 of Listing 4. Now have some fun modifying the colours in the CSS file to produce a different colour display to that shown in Fig 5.
Go to top