Al's TAFE Certificate IV I.T. (Website Design) Exercises

Cascading Style Sheets 2

CSS » Develop Cascading Style Sheets (CSS) .

Conflicting Styles

Style sheets are known as cascading because they cascade or "flow" from one level to another. For example any styles defined by the person who made the web page take precedence over styles defined by a user of the web page, and they take precedence over styles defined by their web browser. When several different styles appear on a web page the styles defined by the bigger or parent element may be inherited by the child or lesser element. An example is in the code we used in CSS 1 where there was an <em> tag inside a paragraph. The font colour and font size had been set by the style sheet for the paragraph, and because the <em> was within the paragraph you would think it would take on all the characteristics of the paragraph (or parent) style. But instead where the style for the child element differs from the parent, the child style takes precedence over the style defined for the parent.

In the example below line 10 applies a property called text-decoration to all a elements whose class attribute is set to nodec that says that where nodec appears in an a element apply no decoration or underline instead of the usual underline. Some other values for text-decoration are blink, overline, line-through and underline.

Lines 11 – 12 declare a style for the hover element (or mouseover).

Line 13 declares a style for all <em> elements when they occur in a list, but not for those outside of lists.

Line 14 declares that an unordered list shall be 75 pixels indent from the margin.

Line 15 declares that a nested ul element, meaning a list inside another list, or a child element of the parent list, will be underlined with a 15 pixel indent. Pixels are relative measurements based on screen resolution. Other size measurements are the em which is the size of a capital M, or the ex which is the size of a lowercase x. Other measurements are percentages. These are all relative measurements which is good because if the screen size changes so do the sizes of the elements .

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. <!-- conflicting.html -->
5. <!-- More advanced style sheets -->

6. <html xmlns = "http://www.w3.org/1999/xhtml">
7. <head>
8. <title>More Styles</title>

9. <style type = "text/css">

10. a.nodec { text-decoration: none }

11. a:hover { text-decoration: underline; color: red;

12. background-color: #ccffcc }

13. li em { color: red; font-weight: bold }

14. ul { margin-left: 75px }

15. ul ul { text-decoration: underline; margin-left: 15px }

16. </style>
17. </head>

18. <body>

19. <h1>Shopping list for <em>Monday</em>:</h1>

20. <ul>
21. <li>Milk</li>
22. <li>Bread

<ul>

<li>White bread</li>
<li>Rye bread</li>
<li>Wholemeal bread</li>

</ul>

23. </li>
24. <li>Rice</li>
25. <li>Potatoes</li>
26. <li>Pizza <em>with mushrooms</em></li>
27. </ul>

28. <p><a class = "nodec" href = "http://www.food.com">
29. Go to the Grocery store</a></p>

30. </body>
31. </html>

Click here for my sample

Linking External Style Sheets

We have already looked last week at two Internal Style methods. The first was Inline Styles, which places the style information in a line of XHTML code, and the style information then applies ONLY to that line where it is placed. The second was an Embedded style sheet, where the style information is embedded into the HEAD area of your page, and the style information then applies to the whole web page. Now we are looking at External Style Sheets, which actually place all the style information external to the web page in a separate web page. This page then controls all the styles for all web pages that are linked to it. The following is an example of this method : - This is the style sheet here. It could be created and saved in a text editor as a plain text document named styles.css

1. /* styles.css An external stylesheet */

2. a { text-decoration: none }

3. a:hover { text-decoration: underline;
color: red;
background-color: #ccffcc }

4. li em { color: red;
font-weight: bold;
background-color: #ffffff }

5. ul { margin-left: 2cm }

6. ul ul { text-decoration: underline;
margin-left: .5cm }

This is the XHTML page that references or “calls for” the style sheet above.

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.<!-- external.html-->
5.<!-- Linking external style sheets -->
6.<html xmlns = "http://www.w3.org/1999/xhtml">
7.<head>
8.<title>Linking External Style Sheets</title>
9. <link rel = "stylesheet" type = "text/css" href = "styles.css" />
10.
11. </head>

12. <body>

13. <h1>Shopping list for <em>Monday</em>:</h1>
14. <ul>
15. <li>Milk</li>
16. <li>Bread

<ul>

<li>White bread</li>
<li>Rye bread</li>
<li>Wholemeal bread</li>

</ul>

17. </li>
18. <li>Rice</li>
19. <li>Potatoes</li>
20. <li>Pizza <em>with mushrooms</em></li>
21. </ul>

22. <p>
23. <a href = "http://www.shopfast.com.au">Go to the Grocery store</a>
24. </p>

25. </body>
26. </html>

Click here for my sample

In line 9 above you see a rel attribute that specifies a relationship between this document and another document, in this case being a link between the web page and the style sheet page. The linked document is in fact declared to be a style sheet by the coding link rel = "stylesheet" The type attribute specifies the MIME type as text/css, which is something we covered in Week One notes. The next attribute of the rel element is the URL of the style page, and this is seen also in line 9 of the above coding as href = "styles.css". This means that the file that determines the styles for this web page is called styles.css and is located in the same folder as the web page is.

Style sheets are very reusable in the sense that once you have a good style sheet for some web pages you could use with modifications for many other websites.

W3C CSS Validation Service

Like with XHTML, there is also a validation service for CSS provided by the World Wide Web Consortium (W3C). The URL for this service is http://jigsaw.w3.org/css-validator . It works in a very similar way to the XHTML version.

Positioning Elements

CSS allows you to have much more control over where things sit on a web page. Much more control than you could ever have had with HTML or even XHTML, where basically the browser was determining where things would sit. This feature in CSS is known as the position property and it has a capability known as absolute positioning.

Absolute Positioning
The following code gives 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.<!-- positioning.html -->
5.<!-- Absolute positioning of elements -->
6.<html xmlns = "http://www.w3.org/1999/xhtml">
7.<head>
8.<title>Absolute Positioning</title>
9.</head>

10.<body>
11.<p><img src = "i.gif" style = "position: absolute;
12. top: 0px; left: 0px; z-index: 1"
13. alt = "First positioned image" /></p>
14. <p style = "position: absolute; top: 50px; left: 50px;
15. z-index: 3; font-size: 20pt;">Positioned Text</p>
16. <p><img src = "circle.gif" style = "position: absolute;
17. top: 25px; left: 100px; z-index: 2" alt =
18. "Second positioned image" /></p>

19. </body>
20. </html>

Click here for my sample

In line 11 – 13 the first img element is positioned on the page. It is positioned "0" or no pixels away from the top left corner of the <p> block or paragraph that it sits in.

In line 14 to 15 the text is positioned 50 pixels out from the top and left.

In line 16-18 the second img is positioned 25 pixels from the top and 100 pixels from the left.

But the important point here is that each of the three has a different z-index, and the z-index determines what layer sits on top of what so that you can overlap the page elements, with absolute positioning. You couldn't do that with HTML!

Relative Positioning

With relative positioning you position elements relative to other elements on the page. So instead of saying it will appear so many pixels from the top, you would say it will appear so many pixels from another element, so its position is relative to that other element.

Look at the following code for an example . In line 12 it creates a class called super where the position is relative (to something else) and in this cases -1 ex or the size of a small x and in line with the top of the other words.

Lines 13, 14 & 15 create similar classes. The span element is a grouping element. It does not apply any formatting to its contents. Its main purpose is to apply CSS rules to a block of text. It is an inline level element in that it is displayed inline with other text. The div element is similar.

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. <!-- positioning2.html -->
5. <!-- Relative positioning of elements -->

6. <html xmlns = "http://www.w3.org/1999/xhtml">
7. <head>
8. <title>Relative Positioning</title>

9. <style type = "text/css">
10. p { font-size: 1.3em;font-family: verdana, arial, sans-serif }
11. span { color: red;font-size: .6em; height: 1em }
12. .super { position: relative; top: -1ex }
13. .sub { position: relative; bottom: -1ex }
14. .shiftleft { position: relative; left: -1ex }
15. .shiftright { position: relative; right: -1ex }
16. </style>

17. </head>
18. <body>

19. <p>The text at the end of this sentence
20. <span class = "super">is in superscript</span>.</p>

21. <p>The text at the end of this sentence
22. <span class = "sub">is in subscript</span>.</p>

23. <p>The text at the end of this sentence
24. <span class = "shiftleft">is shifted left</span>.</p>

25. <p>The text at the end of this sentence
26. <span class = "shiftright">is shifted right</span>.</p>

27. </body>
28. </html>

Click here for my sample

Activity One

Additional CSS References

These are useful reference sources for CSS 1 and CSS2.

Using Classes and IDs as Selectors
Any HTML element can be a selector, but sometimes you want to be more specific in your style definitions. For example, suppose you have a huge table with many rows, and you want to format the rows four different ways. Using the <TR> element as your selector limits you to one style definition, which would make all the rows look alike.
This is where classes and IDs come in handy. Once you define a class or ID, you can attach it to any HTML element within the document to apply style, without limiting the element itself to a particular style.
Define a class by giving it a name (always preceded by a period) and adding the standard style definition of properties and values inside curly brackets:

.periwinkle { color: #6699ff }

Once the style sheet containing the class is applied to the HTML document (see step 2), you can use the class within any HTML tag in the document:

<STRONG class="periwinkle">This is bold, periwinkle text.</STRONG>

This is much more versatile than using the <STRONG> element as the selector, which would make every instance of strong text periwinkle.
IDs are used in basically the same way, except that they are preceded by a number sign (#) instead of a period:

#bright { font-weight: bolder; color: #00ff00 }

Add it to an HTML tag like so:

<P id="bright">This text is hard to read.</P>

Using an ID is like giving a selector a unique name, which comes in handy when you start working with scripts. (You'll need to identify elements individually then.) But if you're sure you'll be sticking with style sheets and not venturing into scripting, the convention is to use classes instead of IDs as selectors.
Matt Rotter and Charity Kahn are software engineers for CNET.com.
Paul Anderson is an associate technical editor for CNET Builder.com.