Press enter to go to start of page

Cascading Stylesheets

Introduction to CSS

Learning Outcomes

On completion of this page you will know the three ways of using CSS to style an HTML page:

You will also be familiar with the relative merits and demerits of each.

Go to top

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 top

No 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.

Listing 1
                        <!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.

An unstyled block of text
Fig 1: An unstyled file rendered in a browser.

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:

We need CSS to fix those two problems.

Go to top

Inline 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.

Listing 2
                        <!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>
                    
A block of text using inline styling
Fig 2: The same HTML file as Fig 1 after inline styles have been applied.

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:

Using internal stylesheets should fix those problems for us.

Go to top

Internal Stylesheet

Listing 3
                    <!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.

A block of text styled using internal stylesheet
Fig 3: Changing from inline styling to an internal stylesheet has not altered the display
Go to top

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.

Listing 4
                        <!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.

Listing 5
                        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;
                        }
                    
A block of text styled using external stylesheet
Fig 4: Changing from an internal stylesheet to an external one has not altered the display
Go to top

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.

Listing 6
                        /*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.

Shows how the same HTML file produces a very different output due to a different CSS file
Fig 5: Wild colours

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

Summary

The uploaded HTML file serves as an introductory lesson on Cascading Style Sheets (CSS). It is structured as a webpage with a navigation menu, header, main content, and footer. The primary goal of the content is to explain how CSS enhances the visual appeal of HTML documents, which are otherwise rendered in a plain and default format by web browsers.

The document begins by outlining the learning outcomes, which focus on familiarizing readers with the three primary ways CSS can be applied to an HTML document: inline styling, internal stylesheets, and external stylesheets. It also highlights the benefits and limitations of each method, preparing learners to make informed decisions about when and how to use them.

In the introduction, the content emphasizes the limitations of HTML’s styling capabilities. While a plain HTML document is accessible to screen readers and assistive technologies, it lacks the visual appeal necessary for an engaging user experience. CSS addresses this gap, offering the ability to style web pages with colors, layouts, and other design elements.

The document provides a demonstration of unstyled HTML, illustrating how a plain HTML document is displayed using default browser formatting. While functional and readable, such documents lack customization, and accessibility issues like color schemes and spacing remain unaddressed. CSS is introduced as the solution to these problems.

The next section discusses inline styling, where CSS rules are applied directly within HTML elements using the style attribute. While this method allows for quick and localized styling, it suffers from inefficiencies, such as repeated code and poor maintainability. For example, applying the same style to multiple elements requires duplication, making changes cumbersome and error-prone.

The concept of internal stylesheets is introduced as an improvement over inline styling. In this approach, CSS rules are defined within a block in the <head> section of the document. This centralizes styles, making them easier to maintain and modify. However, the scope of internal stylesheets is limited to the specific HTML document in which they are defined, which can lead to inconsistencies across multiple pages.

The external stylesheet is presented as the standard and most effective way to use CSS. In this approach, CSS rules are placed in a separate .css file, which can then be linked to multiple HTML documents using the tag in the section. This method promotes reusability, consistency, and better organization of code, making it ideal for larger projects.

The file concludes by showcasing the creative potential of CSS. By experimenting with features such as gradients, colors, and text styles, developers can transform the appearance of a webpage dramatically. The lesson encourages learners to explore these creative possibilities, emphasizing how CSS can turn simple HTML documents into visually engaging and accessible web pages.

Overall, the content provides a comprehensive introduction to CSS, gradually building from basic inline styling to the use of advanced external stylesheets. It balances technical explanations with practical demonstrations, making it suitable for learners beginning their journey into web development.

Go to top
"

Revision

Multi choice

Fill in the blanks

Go to top

Assignment

As part of your learning journey into Cascading Style Sheets (CSS), this assignment will evaluate your comprehension of the material discussed in the "Introduction to CSS." Using a flowing narrative style, you are required to demonstrate an understanding of the three primary methods of applying CSS to HTML documents: inline styling, internal stylesheets, and external stylesheets. You are not expected to create an actual webpage but to express your understanding in a descriptive and structured manner.

Begin by explaining why CSS is essential for enhancing the visual and functional aspects of HTML documents. Reflect on the differences between unstyled HTML and styled documents, emphasizing how CSS transforms the user experience for both accessibility and aesthetic appeal.

Next, describe inline styling. Discuss its application, advantages, and disadvantages. Use examples to illustrate how inline styling might be implemented and the challenges associated with maintaining large-scale projects when this method is used.

Continue with an exploration of internal stylesheets. Explain how they are embedded within the HTML document, their advantages in comparison to inline styles, and their limitations, particularly when consistency across multiple web pages is required.

Finally, elaborate on external stylesheets. Highlight their significance in professional web development. Explain how they promote reusability, consistency, and scalability. Discuss the process of linking an external stylesheet to an HTML document and the benefits this brings to larger projects.

Conclude your narrative by reflecting on how CSS enables creative freedom and accessibility. Provide examples of advanced CSS features such as gradients, colors, and typography, and how these can be used to create visually striking designs while maintaining usability and accessibility.

Your response should demonstrate a thorough understanding of the concepts and reflect on how they can be applied in real-world scenarios. Submit your narrative in a structured format with clear paragraphs addressing each section of the assignment.

Go to top