Learning Resources

Home »  » Courses » Technology Education & Skilled Trades » Communications Technology 2104/3104 » Unit 02 » Set 05 ILO 04 » Go to Work

Lesson

As you have seen, web pages have html codes in them that the browser uses to format the page when it is opened. You probably also noticed that the pages are not very pretty. <H1> always gives the same font, size, and colour to the text, regardless of the browser and computer you use. You may have been wondering how to get around that. After all, this page doesn't look like that. The secret is to use a style sheet. You have already seen stylesheets in use for desktop publishing, so why not for web publishing?

There is a default stylesheet for web pages. It is built into the web browser. It is what makes the browser know how to format a regular page - it tells the browser what to do with <H1>, <p>, <br> and other codes.

Custom stylesheets are implemented in web pages using a protocol (agreed on method) called cascading stylesheets. The reason for this name will become apparent as you read through the lesson.

Styles and Stylesheet

Just like in DTP, style sheets are a way to assign fonts, font sizes, colours, and position to text, relative to the edges of the page. In this case page means the edges of the browser window. So, you can take the HTML style Heading 1 <H1>, for example, and make it Arial, 36 point, green, and positioned 10 points from the left edge. Similarly you can describe how the browser should format any other html text code, including all the headings, paragraphs, text decorations, lists, and text in tables.

Why call them Cascading Stylesheets?

They are called cascading stylesheets (CSS for short) because they can be used in three ways, or levels.

  1. External Stylesheet. The stylesheet is saved as a separate file, and there is a link to it in the page. The formatting information in the stylesheet will apply to every page that has the link. This method is used when you want all your pages to have the same formatting. The advantage is that you can change an entry (the font size and colour for paragraphs, for example) in the stylesheet page, and every page will be changed automatically. Stylesheet pages are usually given the file extension .css.
  2. Internal Stylesheet. The stylesheet information is put in the <head></head> section of the web page. In this case the styles apply to everything on that page only. If there is a link to an external stylesheet, the info in the head section will override the external stylesheet. This is a way to have a different style apply to one page.
  3. Inline style. The stylesheet information is put directly in the line with the regular html code. The style applies only to this instance, and takes precedence over internal or external stylesheets. All other parts of the page use the info from the internal or the external stylesheet.

In summary, then, they are called cascading stylesheets because there are three levels and inline takes precedence over everything for that line, and internal takes precedence over external for that page. We will look only at external stylesheets.

Structure of an External Stylesheet

You've seen that html codes use brackets <> to enclose codes. Cascading stylesheets also use brackets. In this case the { bracket starts the style, and the } bracket ends the style. Stylesheets may be written in detailed version as we do in this lesson, or in an abbreviated - sort of a shorthand - version.

Here is a typical stylesheet. Codes are in red and comments are in green, and are used to explain new items.

.StyleSheetHiddenPlaceHolder { display: none; } <!--- tells older browsers to ignore the stylesheet --->

P { <!--- P for paragraph, { to start the style --->
color : #000000; <!--- sets the colour to black (red is 00, green is 00, and blue is 00)--->
font-family : Arial, Tahoma, Helvetica, sans-serif;
<!--- tells the browser to look on the computer for fonts in this order, and to use the first one it finds. sans-serif will use whatever the computer designates as sans-serif --->
} <!--- ends the style --->

H1 { <!--- heading 1 --->
color : #663300;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : 200% <!--- twice as big as paragraph text --->
}

H2 {
color : #663300;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : 160% <!--- 1.6 times as big as paragraph text --->
}

H3 {
color : #663300;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : 140%
}

H4 {
color : #663300;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : 115%

}

H5 {
color : #663300;
font-family : Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size : 100%;

}

H6 {
color : #663300;
font-family : Arial, Helvetica, sans-serif;
font-size : 100%;
font-style : italic;
margin-bottom : -0.8em <!--- 8/10 ths of the height of a lowercase x in paragraph text --->
}

BLOCKQUOTE {
margin-left : 5%; <!--- sets the left margin to 5/100 th the width of the browser window. If you resize the window, the spacing will change --->
}

A:LINK { <!--- hyperlink --->
color : #6495ED;
text-decoration : none; <!--- turns off underline --->
}

A:VISITED { <!--- hyperlink --->
color : #6495ED;
text-decoration : none;
}

A:ACTIVE{ <!--- hyperlink --->
color: Maroon; <!--- uses a colour name instead of red, green, blue values --->
text-decoration : none;
}

Text formatting options

Stylesheets are used to format text. As you have seen in the sample above, there are a number of text properties. Here is a more detailed list. Note that all settings have a colon : between the setting name and the setting value, and end with a semicolon ;. Codes are shown in red.

  • color As discussed in previous lessons, it can given in hexadecimal, or three pairs of 2 digits. It can also be given as a name. It must be spelled color and not colour. Examples
    • color : #000000;
    • color : #FF0000;
    • color : blue
  • font-weight Can be specified as normal or bold. Examples
    • font-weight : bold;
    • font-weight : normal;
  • font-family Can be used to list a number of fonts, and generally ends the list with the generic font type such as serif, or non-serif. If a name has spaces in it it must be enclosed in quotes. Names are separated by comas. Example
    • font-family : Times, "Bookman Old Style", serif;
  • font-size Can be used to set how large the font is. There are several ways to do it, including
    • Number, or length values. Examples
      • points. (1/72 of an inch) An absolute measure
        • font-size : 10pt;
      • pixels. (1 dot on the screen) This is the most useful measurement for the web. An absolute measure
        • font-size : 10px;
      • inches. An absolute measure
        • font-size : 0.2in;
      • millimetres. An absolute measure
        • font-size : 10mm;
      • ems. (height of a font) A relative measure
        • font-size : 1.5em;
    • Keyword values. Examples
      • xx-small (font-size : xx-small;)
      • x-small (font-size : x-small;)
      • small (font-size : small;)
      • medium (font-size : medium;)
      • large (font-size : large;)
      • x-large (font-size : x-large;)
      • xx-large (font-size : xx-large;)
  • font-style Can be one of three things - normal, italic, oblique. Not all fonts support oblique, so the first two are most useful. Example
    • font-style : italic;
  • text-decoration Can be none, or one of several things - underline, overline, line-through. By default it is none, except for hyperlinks. Examples
    • text-decoration : none;
    • text-decoration : underline;
    • text-decoration : overline;
    • text-decoration : line-through;

Formatting hyperlinks

Hyperlink formatting codes are a special case. You saw them in the sample stylesheet above. Here is a bit more detail about them

  • A:link has the state of link, or 'not-yet-visited. The browser's built-in stylesheet applies colour blue to text and the text decoration blue underline
  • A:active has the state of active, or 'clicked on'. The browser's built-in stylesheet applies colour purple to text and the text decoration purple underline
  • A:visited has the state of visited, or 'been there'. The browser's built-in stylesheet applies colour purple to text and the text decoration purple underline

As you know the web is based on hyperlinking. It is the single major feature that makes everything work. The initial standard for hyperlinks was to have them underlined and in blue text. When you clicked on them, they changed colour. Built-in browser stylesheets knew how to format the link. This is called a Standard. Everyone came to recognize this style as a hyperlink.

As you now know, making your own stylesheet allows you to modify the colours, and even turn off underlining of hyperlinks. Of course, if you turn it off, you need to make sure people recognize it as a hyperlink. The code below has the links turned off, Can you identify which code does that?

A:link {

font-family: 'Verdana', 'Arial', 'Comic Sans MS', 'Trebuchet MS', 'Sans-Serif';
text-decoration : none;
font-size: 11pt; color: #0000FF;

}

A:visited {

font-family: 'Verdana', 'Arial', 'Comic Sans MS', 'Trebuchet MS', 'Sans-Serif';
text-decoration : none;
font-size: 11pt; color: #990000;

}

A:active {

font-family: 'Verdana', 'Arial', 'Comic Sans MS', 'Trebuchet MS', 'Sans-Serif';
text-decoration : none;
font-size: 11pt; color: #FF0000;

}

There is another hyperlink property that we have now discussed. It is called Hover. When you mouse passes (or hovers) over the link, this property allows you to cause a visible reaction.

Hover

Over time people wanted variety, and since internet users were becoming educated about the web, different ways to implement links could be used and recognized. Hover is one of those different ways. Hover causes the text to change when you move the cursor over it. You don't have to click to get the change in appearance.

  • A:hover has the state of hover, or "active when the cursor is over it" Hover is usually applied with a stylesheet. It can have any colour you want. It can have any text decoration you want. When you move the cursor over the text, the styles are applied

When you use hover, you can leave the underline on or turn it off. Generally you apply custom settings to the other parts of the link as well. Here is an example. Remember that text-decoration : none turns off underline. The default browser stylesheet would normally turn underline on. The stylesheet entry for hover looks like this.

A:hover {

font-family: 'Verdana', 'Arial', 'Comic Sans MS', 'Trebuchet MS', 'Sans-Serif';
text-decoration : none;
font-size: 11pt; color: #FF0000;

}

Hover is added to the stylesheet, along with the A:link, A:visited, and A:active.

Sample stylesheet

The following samples illustrate a stylesheet in use. Normally you would not use so many colours. They are used to for illustration purposes.

  • A stylesheet, samplestyle.css, with all the regular HTML text formatting codes would look like this.
  • A page using the samplestyle.css stylesheet would look like this. If you view the source code for this page, you will see the following entry in the <head> section of the page.

Using an external stylesheet

If you use an external stylesheet, you will need to use this line of code. Remember to change the name of the .css file to the name you used.

<link rel="StyleSheet" href="samplestyle.css" type="text/css">

By making a number of different versions of a stylesheet, you can create a variety of layouts for your web pages, and change them just by changing the file.

It is important to note that not all browsers support all features of stylesheets. Netscape and Internet Explorer support different features, and in different ways, so it does not always look the same in both. The stylesheet that is used in this course is designed primarily for Internet Explorer.

More on Stylesheets

This has been an introductory look at style sheets. Stylesheets can be much more sophisticated and specify a very large array of settings for web pages. If you are interested in learning more about stylesheets, try a few of these sites.

Activity

Assigned activities

The purpose of this activity is to develop capability with using stylesheets

This activity will be done using Notepad. You will need to save the following files into the same folder. If they are in different folders, the link for the stylesheet will need to be changed.

  • stylesheet1.css
  • webpage.htm

Complete the following. You will be making a series of changes to the web page and to the stylesheet, so you need to save your files after each change.

  • View the non-stylesheet page
    • Open webpage.htm in your browser and note the style of the page
  • Use the stylesheet with the webpage
    • Open webpage.htm in Notepad
    • Add the following line of text in the <head> section of the page

      <link rel="StyleSheet" href="stylesheet1.css" type="text/css">
    • Save the file as webpage1.htm (Use File / Save As)
    • View the stylesheet-linked page
      • Open webpage1.htm in your browser and note the effects of the stylesheet
  • Modify the stylesheet
    • open stylesheet1.css in Notepad
    • make changes to font colours, sizes and so on
    • save the stylesheet as stylesheet2.css (File / Save As)
    • change the stylesheet link in webpage1.htm to the stylesheet2.css

      <link rel="StyleSheet" href="stylesheet2.css" type="text/css">
    • save webpage1.htm as webpage2.htm (File / Save As)
    • keep webpage1.htm open in the browser and open webpage2.htm in a new browser. Note the differences in the two documents.
  • Repeat this process several times, renaming and saving the pages each time. Have a look at the effects each time
  • Make an entry in your portfolio, and import the folder and files you have been using. Make links to all the stylesheet and web files you used
  • Publish to your web portfolio.

Test Yourself

There is no self test for this lesson.