Al's TAFE Certificate IV I.T. (Website Design) Exercises
Cascading Style Sheets 1
The idea behind Cascading Style Sheets or CSS is that it works in really well with XHTML to allow you to control the presentation or “look” of your web pages, separately from the structure of those pages. XHTML controls structure of documents like what is on the page; headings, pictures, paragraphs, tables etc. CSS controls things like the formatting and presentation of the headings, pictures, paragraphs, tables etc. It lets you set what colour, font style, size and so on of the document. So XHTML and CSS are designed to work together very well, with the XHTML looking after the content of your web pages, and the CSS looking after the “look” or presentation of your web pages. In the dark old days of HTML 2 or HTML 3, all the presentation coding had to be built into each page. That meant that if you were building a 150 page website and you decided to change the colour and font style of your headings throughout, or you wanted to make your paragraph font a bit smaller or a different style, then you would have to make that change on every one of those 150 pages separately.
Now with CSS you make those changes on one style sheet, and the style change flows to every one of those 150 web pages. This is clearly a much easier and quicker way to control the presentation than before. That is one of the reasons why XHTML is so picky about having closing tags on everything. With HTML2 & 3 many tags could be left open, and never closed. The browsers still cope with that because they still have to be able to display older web pages made with HTML2 or HTML3, because many of those pages are still on the Net. But CSS styles work best when linked to web pages where every element is properly closed, so the browser knows exactly where to start and where to stop applying a particular style. That is why we learn XHTML and that is why it works best with CSS.
Inline Styles
The simplest form of applying styles to a web page is by using “inline styles”. The style is applied in a line of your XHTML, so it is called an “inline” style. It’s the least powerful style application because it only applies to the line you put it in and not to the whole page or many pages. Here is an example :-
1. <?xml version = "1.0"?>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4. <!-- inline.html -->
5. <!-- Using inline styles -->6. <html xmlns = "http://www.w3.org/1999/xhtml">
7. <head>
8. <title>Inline Styles</title>
9. </head>10. <body>
11. <p>This text does not have any style applied to it.</p>
12. <!-- The style attribute allows you to declare -->
13. <!-- inline styles. Separate multiple styles -->
14. <!-- with a semicolon.-->
15. <p style = "font-size: 20pt">This text has the
16. font-size style applied to it, making it 20pt.
17. </p>18. <p style = "font-size: 20pt; color: #0000ff">
19. This text has the font-size and color styles applied to it,
20. making it 20pt. and blue.</p>21. </body>
22. </html>
In line 15 the first “inline style” coding appears. It starts straight after the <p or paragraph element in this example. Attribute style specifies the style for an element. For example in the one above the style then is followed by a property here being “font-size”. Each property is followed by a colon (:) and a value. In this case the property is “font-size” and the value is 20 point.
In line 18 there is another example of inline styles, but in this case there are two properties, font-size and color. The two properties are separated by a semi-colon (;) and the colour name can be specified by a hexadecimal code or by a colour name e.g. “blue”.
Inline styles override any other style applied to a web page.
Embedded Style Sheets
A second way of using style sheets is by using embedded style sheets, which puts the style information into the <head> section of your web page. This style information will then apply to the whole web page instead of only applying to the elements on the page where it is placed as with an inline style.
The following code gives an example of an embedded style sheet .
1.<?xml version = "1.0"?>
2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4.<!-- embedded.html -->
5.<!-- Declaring a style sheet in the header section. -->
6.<html xmlns = "http://www.w3.org/1999/xhtml">
7.<head>
8.<title>Style Sheets</title>
9. <!-- this begins the style sheet section -->
10. <style type = "text/css">
11. em { background-color: #8000ff; color: white }
12. h1 { font-family: arial, sans-serif }
13. p { font-size: 14pt }
14. .special { color: blue }
15. </style>
16. </head>
17. <body>
18. <!-- this class attribute applies the .blue style -->
19. <h1 class = "special">Deitel & Associates, Inc.</h1>
20. <p>Deitel & Associates, Inc. is an internationally
21. recognized corporate training and publishing organization
22. specializing in programming languages, Internet/World
23. Wide Web technology and object technology education.
24. Deitel & Associates, Inc. is a member of the World Wide
25. Web Consortium. The company provides courses on Java,
26. C++, Visual Basic, C, Internet and World Wide Web
27. programming, and Object Technology.</p>
28. <h1>Clients</h1>
29. <p class = "special"> The company's clients include many
30. <em>Fortune 1000 companies</em>, government agencies,
31. branches of the military and business organizations.
32. Through its publishing partnership with Prentice Hall,
33. Deitel & Associates, Inc. publishes leading-edge
34. programming textbooks, professional books, interactive
35. CD-ROM-based multimedia Cyber Classrooms, satellite
36. courses and World Wide Web courses.</p>
37. </body>
38. </html>
In line 10 the style element begins. The type attribute refers to the MIME (Multipurpose Internet Mail Extension) type that describes a file's content. Don’t worry too much about what the MIME type means now; all you need to know is that the type for CSS documents is text/css. For JavaScript the MIME type is text/javascript, which we will learn more about later.
Most of the style information then follows from lines 11 to 14, and then the style element closes on line 15 with the </style> tag. The style information is telling the browser the CSS rules for this stylesheet. So when the browser goes to display this web page it knows that every <em> element should be displayed with a background colour of #8000ff, and a text colour of white. The body of each style rule needs to be enclosed in curly braces { }.
There is also a special kind of style declaration known as a style class and these always begin with a full-stop, as does the .special element declared in line 14.
The syntax or "correct grammar" for embedded style sheets is the same as for inline style sheets. The property name is always followed by a colon: and more than one property will be separated from each other by a semi-colon; (see line 11 for an example of this).
The font-family defined in line 12 has 2 values, separated by a comma, shown as { font-family: arial, sans-serif }. The first value for font is Arial, meaning that the H1 headings on this web page should always be displayed in Arial font. If the viewer's computer doesn't happen to have Arial installed on it, then it will go to the second choice, which in this case is a sans-serif font. This is a generic name for any sans-serif font that may be installed on the viewer's computer. In Dreamweaver you will see the font settings in the "Property Inspector" work in a similar way to this.
In line 13 the font size is specified to be 14 pt. for every new paragraph. This is shown as { font-size: 14pt }.In line 14 the special class is defined and this is shown as .special { color: blue }
Wherever the .special class is referred to in the document, the characteristics of that rule will apply. In this case it means that wherever you see .special the text will be "blue". The characteristics of the special style apply to everything within the tag where the .special element is included. If another "nested" style applies within that area, for example the <em> element on line 30, then the colour characteristics of that style will override the .special one.
