Kevin W. Tharp

Eagle

Designer Developed Browser Presentation with Embedded Styles

In this page, the embedded code has been given more context by using a compound selector. In this case the compound selector is "#mainbody h1". What this tells the browser is when it encounters an h1 inside an element with the id of mainbody, to change the color to #00F. The way this works can be seen by noticing that the header at the top of the page is still the burgundy color even though the directive to change the color of h1 text to blue comes later in the cascade. Because the last directive is compound, it will ignore any elements that do not fit all of the characteristics of the style. This could have also been done by giving the individual h1 tags either a class or an id. However, if you were giving the h1 an ID, you could only use one instance of an ID in a page. If you were to use a class, you could apply that property to as many elements in the page as you wish.

<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/base.css" rel="stylesheet" type="text/css">
<style type="text/css">
h1 {
color: #600;
}
#mainbody h1 {
color: #00F;
}
.sampleclass {
color: #0F0;
}
</style>

Notice also that there is one additional selector for the class of .sampleclass that converts the color to #0F0. If you look lower in the page, you will see that the Heading 2 below the code box has the letters "adi" presented in bright green, whereas the beginning and ending of that h2 are presented as the other elements. This is an example of the most specific way to use the cascade to do inline styles that can be applied to parts of block elements. In this case, it sets aside the letters adi as a span with the class of sampleclass and applies the rules as such. This is the end of the cascade and overrides all higher level rules in the cascade.

<h2>He<span class="sampleclass">adi</span>ng 2</h2>

 

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

A Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

A hyperlink

Unformatted Text

An unordered list An ordered list
  1. Item 1
  2. Item 2
  3. Item 3