Cascading Style Sheets (CSS)

A Cascading Style Sheet (CSS) is a great addition to HTML. It is a method of applying 'styles' to your pages, in a uniform manor.

One of the nicest features of using CSS is that you can reference all of your pages to one external style sheet document! So, if you want to change the look of your whole website's text, font size, font color, etc., you can do so in just one document. Anyone that has decided to change an item such as font type on every single page in their site, page by page, can appreciate the time you can save only having to change one document.

You can also embed 'styles' into your individual pages. There are three different ways to apply style sheets; Inline Styles, Embedded Style Sheets, and Linked Style Sheets.

Let's look at the Embedded Style Sheets method in which the style attribute is placed between the <head> </head> tags in an individual web page. We'll look at the Linked Style Sheets later on. There are a few links to informative CSS Tutorials at the bottom of this page.

  1. Open a New Page and copy and paste the following between the <head> </head> tags: (Make sure you copy and paste into Notepad, then into your document to strip out the formatting we have on this page.)

    <style type="text/css">
    b.header {color:blue; font-size:20px; font-family:arial;}
    </style>

  2. Copy and paste the below between the <body> </body> tags.

    <b>This is normal bold</b><br>
    <b class="header">This is header style bold</b>

    This is how your page should look in HTML View:

    <html>
    <head>
    <title>New Page 1</title>
    <style type="text/css">
    b.header {color:blue; font-size:20px; font-family:arial;}
    </style>
    </head>

    <body>
    <b>This is normal bold</b><br>
    <b class="header">This is header style bold</b>
    </body>

    </html>

If you Preview your page, it should look like this. By inserting the tag <b class="header"> you assigned the style class of "header" to that text.

Okay, let's jump into creating an external style sheet.

How to make a Linked Style Sheet:

  1. Open a New Page, copy the following into it, and name it csstest.htm:

    <html>
    <head>
    <title>My First External CSS Test</title>
    <link rel=stylesheet href="mystyles.css" type="text/css">
    </head>
    <body>
    <H1>STYLE SHEET TEST</H1>
    <H2>Header 2 Style</H2>
    <H3>Header 3 Style</H3>
    <a href="css.htm">This is the hyperlink style</a>
    <p>Done!!</p>
    </body>
    </html>

  2. Now create a separate text file and call it mystyles.css. Copy the text below into your mystyles.css document. This is the document that will control any web pages in which you 'apply' any of these styles, as in the example above. The H1 designation will produce the words STYLE SHEET TEST in the Comic Sans MS font, in bold, and in blue. Let your design tastes and imagination run wild!

    P {font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: purple;}

    H1 {font-family: Comic Sans MS, Verdana, Helvetica; font-weight: bold; color: blue;}

    H2 {font-family: MS Sans Serif, Verdana, Helvetica; font-weight: bold; color: silver;}

    H3 {font-family: Terminal, Verdana, Helvetica; font-weight: bold; color: green;}

    A:link {text-decoration: underline; color: blue;}

    A:hover {text-decoration: underline; color: #000080;}

    A:visited {text-decoration: none; color: orange;}

  3. Upload the mystyles.css file into the root of your web files. Take a look at your csstest.htm web page in Browser View, or on the Internet. If all went well, you should see the styles applied to your page that came from the css text file that you created. It should look something like this: csstest.htm.

Well, this has been a basic intro into CSS Stylesheets. You are encouraged to browse around on the Internet and read some of the very good tutorials on this subject, explaining all of the different ways it can be used. Happy Styling!

© Copyright Websites Ink 2010 - 2014. | Sitemap