Embedded Style Sheets in XHTML

An embedded style sheet is declared within the <head> element of an XHTML document. It applies to the whole document, rather than just one element. Each style declaration (or CSS rule) gets applied to everything in the document that matches that rule. Each rule has 2 parts: the element the rule applies to and the rule itself within curly braces {}. Look at the source of this page for more details.

This document has an embedded style sheet rule for all paragraph elements that defines the font-color as blue. It also has the same in-line style declarations that were included in the file style1-inline.html

This paragraph has an inline style declaration in its opening <p> tag that causes the paragraph to be printed in green and in italics.

To apply a style to just part of a paragraph rather than the whole paragraph, the <span> tag is often used. The <span> tag is just used for grouping (like parentheses in a mathematical formula) and carries no meaning. Putting <span> tags around part of a paragraph allows you to apply an inline style to just that section of text between the <span> and </span> tags.

Look at the source code of this page (styles1-inline.html) and answer the following questions:

2. What happens when styles from in-line styles conflict with those from embedded style sheets?

A style can also be declared for only a certain class of instances of an element. For example, this paragraph is tagged as being a paragraph of the class special. A rule in the embedded style sheet for this document applies only to paragraphs of class special - it says to display them in a purple font color.

3. Which style won out in determining how the previous paragraph was displayed? The style declared for all paragraphs, or the style for "special" paragraphs?

4. How are classes identified in an embedded style sheet? How is a class identified within a markup tag within the body of the document?

This level 4 heading and the following paragraph are both within a <div> element that has the class attribute of "veryspecial." The <div> tag is like the <span> tag, except it can be used to group large sections that contain multiple paragraph elements, etc.

This is a "special" paragraph, with a very special phrase within it.

5. Does the order in which the styles are declared in the head of the document affect which one gets applied when they conflict? Copy this page (styles2-embedded.html) to you public_html directory and change the order of the styles to determine the answer.

6. The CSS (Cascading Style Sheet) specification says that when two or more conflicting styles are applied to the same element, the style with the greatest specificity is the one that wins out. From the examples on this page, what would you conclude about how "specificity" is determined? In other words, can you draw any conclusions about what styles have greater specificity than others?