Personal tools
  •  

Cascading Style Sheets (CSS)

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Tutorial 1 of 3

Objectives:

  • Learn the basics of Cascading Style Sheets.
  • Link a stylesheet a web document.
  • Make changes to the document's formatting the stylesheet.
  • Tags discussed: <link> with attributes HREF, TYPE and REL.

Readings:

Optional Readings:

http://www.w3schools.com/css/

(Note: If you have not already downloaded the html template files please do so by clicking here .)

Linking to style sheets

Overview of using linked style sheets:

  • The <LINK> tag resides within the <HEAD> section of your document.
  • Web browsers that do not support HTML 4.0 can't see style sheets. Thus, make sure your HTML formatting is still usable for older browsers.
  • Unlike most html tags, the <LINK> link tag does not have a "closing" element.

<link> tag:

The <LINK> tag is used to link a stylesheet. Although it looks a little complicated it's pretty similar to the <A HREF> tag you use all the time for implementing hyperlinks. The syntax is as follows:
<LINK HREF= "file path" TYPE="text/css" REL="stylesheet">
Use the same conventions you do for an <A HREF> tag when you specify the "file path" attribute. Although there are other options for the "type" and "rel" attributes, there is no real advantage to using them (in fact there are some disadvantages), so all you really need to worry about is the file path.

Example

First, open the file cxlinkedcss1.html in Internet Explorer . Pay special attention to the font (which should be Times).
Now, open the same file cxlinkedcss1.html in your HTML text editor (for example, notepad).
After the </TITLE> tag add the following line (make sure firststylesheet.css is in the same directory as cslinkedcss1.html):
<LINK HREF= "firststylesheet.css" TYPE="text/css" REL="stylesheet">
Now reload the file cxlinkedcss1.html in Internet Explorer , most of the characters should now be Sans-Serif. The only exception should be the list items.

Now open the same file in Netscape Navigator . Notice that in Netscape, the list items and the text within the table are still in Times font. This is a little sample of how style sheets are implemented differently on various browsers due to the clash of open standards with companies trying to get market share. It is important that you look at your web pages not only with different browsers but on different computing platforms (Mac and Windows) to make sure you are getting the effect you want.

Next, we'll fix this problem with our stylesheet.






Tutorial 2 of 3

Objectives:

  • Add a "rule" to a stylesheet for an entire html element.
  • Modify a "rule" for an html header element.

Readings:

Optional Readings:

http://www.w3schools.com/css/

(Note: If you have not already downloaded the html template files please do so by clicking here .)

Style sheet rules

Overview of stylesheet rules:

  • A stylesheet can consist of any number of rules.
  • Each rule can consist of any number of arguments with a corresponding parameter.
  • Each argument line ends in a semi-colon (;).

Stylesheet rules

Right now, firststylesheet.css consists of two rules:
            P  {

        font-
family : sans-serif;
}

H2 {
        font-
family : sans-serif;
}
           
Both of them apply to existing html elements (the paragraph and header 2 tags). Each of them has a single argument (font-family) set to the same value (sans-serif).

Example

Now we'll add some rules so that our cxlinkedcss1.html page has a uniform font type.
Open the firststylesheet.css file in your editor and add the following text:
               TD {
        font-
family : sans-serif;
}

UL {
        font-
family : sans-serif;
}

OL {

        font-
family : sans-serif;
}
              
Open the cxlinkedcss1.html file in Internet Explorer (or reload it if it is already there). Notice that all of the fonts on the page are now sans-serif. (Of course, all the fonts were already sans- serif in Netscape )

Example

Now lets add a little bit of color to our page using the stylesheet.

Open the firststylesheet.css file in your editor and add the following line to the H2 rule :

color : #660000;
Now reload the cxlinkedcss1.html file in your browser, and notice that the first line of the page has changed colors. Keep in mind that these changes would happen on all .html pages that link to your stylesheet. If you set up your web site the right way, it can be easy to make uniform and dramatic changes to the layout and color scheme of your entire site with very little work!





Tutorial 3 of 3

Objectives:

  • Add a "rule" to a stylesheet for a custom html element (class selector).
  • Modify a class selector so that it can be used with any html element.

Readings:

Optional Readings:

http://www.w3schools.com/css/

(Note: If you have not already downloaded the html template files please do so by clicking here .)

Class Selectors

There are times when you might want to use a formatting set on a limited basis. For example, you might have some "warning" text that you always want to be bold and red. Since you don't want all text to be warning text and there are only so many html elements you can work with, you've got a problem. Stylesheets have the answer: Class selectors.

Example

Open the firststylesheet.css file in your editor and add the following rule:
            P.warning
 {
        font-
family : serif;
        color : 
#ff0000;
        font-
weight : bold;
}
           
This rule won't make any changes in our html document until we specify an html element that uses this specific selector.

Open cxlinkedcss1.html in your editor and add the following text:

<p class=warning> This is a warning, repeat this is a warning.
Open (or reload) cxlinkedcss1.html in your browser. Notice that the warning text is red, bold and serif just like you specified in the style sheet. These settings will be applied only to paragraph tags that use the custom attribute "class=warning".

Class selectors don't need to be applied to just one html element. You can leave them open ended so that they can be used anywhere.

Example

Open firststylesheet.css in your editor. Remove the "P" from "P.warning" so that the entire rule reads:
               .warning  {
        font-
family : serif;
        color : 
#ff0000;

        font-
weight : bold;
}
              
Now open cxlinkedcss1.html in your editor. Modify one of the <TD> tags so that it now uses the warning class modifier as follows:
<TD CLASS= warning>
Open (or reload) cslinkedcss1.html in your browser. Notice that the paragraph warning works in the same way, and that the .warning argument was also applied to one of the table cells.

Now try incorporating a stylesheet with the final project you are working on. (Don't forget that you will have to link the stylesheet to each page you want to use it in by using the <LINK> tag).

[End of tutorial]

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). Cascading Style Sheets (CSS). Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource90.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.