Cascading Style Sheets

Speaker Notes

Slide 1:

This is an introduction to cascading style sheets. Style sheets can be used to establish a style for a site, a style for a page or a style for an individual element.

Note: You need to be even more careful with Cascading Style Sheets then with regular HTML to check your work in Netscape and Explorer - there are variations!!!

Note also that CSS is not supported in early versions of browsers.

This presentation covers some of the examples posted - not all of them.

Slide 2:

The concept of cascading says that you can include all three types and all three will be applied to the work you are doing. This means you can establish a look for the site, a look for the page and a look for an individual element and all three will apply if there are no conflicts.

Slide 3:

This slide shows the html code for testcss1.html and the separate style sheet that it links to which is called testcss1a.css. Notice that this is saved as a separate file. The style sheet is connected to all pages that will use the style sheet by using the LINK HREF="testcss1a.css".

The LINK statement establishes the reference for the style sheet, specifies that it is a style sheet and that it is of a type css which means it is using the css language.

Note that I am showing you the whole file for testcss1a.css.

I have posted the .css on the board, they can also be saved through explorer. They will not open since they are not pages.

Slide 4:

This defines the selector BODY as having a default font color of green and a default background color of pink.

H1 and H2 will be done in verdana if it is available, if not then the default sans-serif font should be used. Font-family allows the developer to list the fonts they would like applied in order and then finally resort to a font-family. If three fonts are listed it will try to apply the first, if unavailable it will try to apply the second etc. H1 and H2 will also have a font color of red.

H3 will have a font color of blue and the font family specifies either verdana or the default in sans-serif.

Paragraphs (anything designated with <P> will have a color of blue and will be in Times New Roman if available. If not the default serif font will be used.

Note: Times New Roman is in quotes because the name has embedded spaces.

Slide 5:

This slide shows two ways to use inline style. The STYLE code in the HEAD applies to the page while the STYLE code in the paragraph only applies to that paragraph.

Slide 6:

This is the output from testcss1.html and the css code that effected that output.

BODY made the background pink and all default fonts green. This means when the font isn't effected by another style it will be green.

Note: Even when headers are coded inside a paragraph they cause a paragraph break. Think of English. When we put a header after a paragraph, we have ended the paragraph. The same applies to HTML.

Slide 7:

Looking for a minute at the information on this page, we see ways to have special characters appear in your code in such a way as to not conflict with their use in HTML.

Slide 8:

The page is css1html.html. They style shee that is being used is css1.css. The style sheet is shown in the box to the left.

Remember, when you are using a style sheet use LINK HREF followed by the name of the style sheet.

Again note that I have shown the entire css1.css file on this slide. Simply key this information into notepad and save with a .css extension.

Slide 9:

This slide contains the BODY of an HTML document at the top left, the output on the top right and the separate cascading style sheet below - it didn't fit so I pasted the bottom in the second column.

The HTML page is called css1html.html.

It links to the style sheet called css1.css as shown below.



<LINK HREF="css1.css" REL="STYLESHEET" TYPE="text/css" >


Slide 10:

This slide shows a page with the STYLE embedded in the head.

There is no LINK to an external style sheet.

The layout of the page will follow the configuration set up in the style sheet.

Slide 11:

The STYLE is embedded in the HEAD of the page and applies to the elements in the page as shown.

Slide 12:

Because the style sheet do not come up as visible on the web, I have included css2.html and css3.html in this show without analyzing them.

Note that using a background image in an area is illustrated in these sheets but is not recommended - the appearance on different computers is very unreliable.

This slide introduces the concept of classes. For more information see the next slide.

Note: There wasn't room to show the whole sheet so the bottom part is shown in a second column.

Slide 13:

This slide shows the CLASS of .CENTER and .RIGHT which are defined on the css2.css and the application of these classes in the css2.html.

The HTML set up a table and used the class within the cells of the table. The class of right called for right alignment, bold, and orange. The CENTER called for pink and centered.

Note that the class is defined with a point before the word (any word can be used - probably better to not conflict with a reserved word as I did). When the CLASS is used, the name is contained in quotes.

Once the CLASS has been defined it can be applied to any element within the page. The advantage of CLASS is that it can be used with a variety of elements as opposed to be defined for a particular element.

Slide 14:

This is css3.html displayed in two columns. Note that a background image of CISa.gif is used. Also paragraphs will have a background image of flag.gif (not recommended since too hard to control).

Slide 15:

The DIV in front of .PICBOX limits the application of the PICBOX CLASS to <DIV...>.