Introduction to Cascading Stylesheets (CSS)

by

In a previous post title Designing Web Pages: Tables or CSS, I briefly talked about using CSS to layout the content of a Web page. I didn’t go into detail about how CSS files are used in conjunction with Web pages or even how they are created.

In this post I will provide a simple introduction to cascading stylesheets and how you can link them to an HTML file.

Overview of a CSS file

Before discussing how to create a CSS file, it is important to provide a quick overview on stylesheets. Cascading stylesheets (CSS) are nothing more than simple text files that define the look of a Web page. Before CSS files, you would define fonts and colours within your HTML file. When you use CSS files, those definitions would be stored in a CSS file and removed from the HTML file. You can then link a CSS file, or even multiple CSS files to a single HTML file.

Using CSS files to define the look of your Web site has a few benefits. The first is that you can now change the look of your entire Web site by simply changing one CSS file as opposed to multiple HTML files. The second advantage to using CSS files is download speed. When you have all your definitions within your HTML files, it makes the files much larger, which takes more time to download. By moving the definitions to a CSS file, visitors would request a HTML file, which would also download the linked CSS file. Now any subsequent pages that use that CSS file would now read it from the visitor’s cache instead of re-downloading the CSS file again. Your HTML files will also be much smaller as they no longer contain the definitions.

Creating a CSS File – An Example

Let’s use a quick example to show how easy it is to create and link a CSS file to a HTML file. To follow this example you will need only a text editor such as Windows Notepad.

  1. Create a directory on your local computer that will contain the CSS and HTML files.
  2. Open your text editor and type the following (include the semicolons):
    3. p
    {
    font-family: Arial;
    font-size: 20pt;
    }

    This will define any paragraph (the p tag) as using the Arial font with a font size of 20pt.

  3. Now save the file as site-style.css into the directory created in step 1.
  4. Create a new text file and type in the following:
    5. <html>
    <head>
    <link href=”site-style.css” type=”text/css” rel=”stylesheet”>
    </head>
    <body>
    <p>This is a test Web page for CSS files.</p>
    </body>
    </html>

    All this text file does is display a message on the Web page. The important part in the HTML is the link definition in the head section. This tells the browser to use the file defined in the href tag. That file is of type text/css and it is a stylesheet. This entire line is how a CSS file is linked to a HTML file.

  5. Save the new file as csstest.htm in the same directory as the CSS file.
  6. Open the csstest.htm into your Web browser.

    7. What you should now notice is that the message on the Web page is now displayed in the Arial font and has a size of 20pt. You should try changing the font family and size in the site-style.css file and refresh your Web page. You will notice that the message text changes.

    You can also try using other HTML tags such as the heading tags (H1-H6), or create a second Web page that links to your CSS. You will then notice that as you change your CSS file both Web pages change.

Summary

This post provided a quick overview on CSS files and a very simple example of using CSS files but you can see how they can be very useful. There are entire Web sites on the Internet dedicated to learning CSS including all the various definitions you can use. If you want to make your Web site easier to manage and maintain, I suggest you learn more about CSS files.

Follow Me