Kevin W. Tharp

Eagle

Designer Developed Browser Presentation with Embedded Styles

Now we have moved on to styles that are embedded in the html document being viewed. This is the third level of the Cascade, and it overrides the items in the default and external levels of the cascade. In the code snippet window you can see how the cascade is working on this document. The default level has been modified by attaching the reset.css stylesheet as an external stylesheet. This was then overridden by the base.css stylesheet which is also an external stylesheet. You can tell that they are external stylesheets because of the "link" tag that the href sits within to call that stylesheet. Both of these are then overridden by the elements in the <style type="text/css"> tag. The style attributes applied in this location address only the h1 tag, and adjusts only the color by changing it to #600. The observable result of this is that on this page (and only this page), the color of the Heading Level 1 elements change to a burgundy color. Notice however, that the size of the h1 did not change. The rule for size that was defined in the base.css still applies because it has not been overridden in the cascade. Also notice that all of the h1 elements in the page have the new color applied.

If we want to get even more precise in our use of embedded styles, we can use compound selectors that give a greated level of control. This shown on the next page.

<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;
}
</style>

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