<p>Hi there! If you are reading this
then you have found my home page! Congratulations! I know it can be
hard to find my pages, but I bet that you feel lucky now. Now that
you are here, please take a look at my page of links to
<aHREF="http://www.mysite.com/coolsites.html">cool
sites</a> or sign my
<aHREF="http://www.mysite.com/guestbook.html">guest
book</a></p>

<divCLASS="foo"> My wonderful
poetry <br> is available
if you are REALLY bored. Why not give it a spin?</div>

<h2CLASS="ex1">
The Best Poetry I <em>NEVER</em> Wrote</h2>

<ul>

<li>'There Once Was A
Man From Nantucket' - <spanCLASS="class1">Anonymous</span></li>

<li>'Cool In Fur' -
<spanCLASS="class1">Harry B.
Foot</span></li>

<li>And My All Time Fave:

<ul>

<li>
'A Toast To My Toaster' - <spanCLASS="class1">Me!</span></li>

</ul>

</li></ul>

<blockquote>Brought to you by the
letter <spanID="tagid2">&quot;H&quot;</span> and <spanID="tagid1">Joe
Shmoe</span>
</blockquote>

<divCLASS="class5">
When you are done looking through these masterpieces, I encourage you to visit my proud sponsor!!
</div>

<pCLASS="special"><spanCLASS="funkyclass">ADVERTISEMENT:</span> Buy Navel Lint Contemplator! Its a browser and
its a sandwich spread! Go to our <aHREF="http://www.navellint.com">home
page</a> without delay! Why? Because shelf
life is only 8 hours unless refrigerated. We know that makes it hard to browse,
but it promotes frequent upgrading to the latest and greatest version.
</p>

<h6>All standard disclaimers apply.
Your life depends on NOT copying this document in any way. This tape will
<aHREF="http://www.mysite.com/selfdestruct.html"
CLASS="case1">self
destruct</a> in 10
seconds...</h6>

</body>

</html>

Analysis

Line: GeneralCSS Issues:External Style SheetsDescription: This example contains exactly the
same STYLE rule information as the Embedded
example does - just in a slightly different format. The big
advantage here is that multiple documents can share the 'example.css' style
sheet, thus reducing duplication of effort by both the author and the browser
(after downloading once, the external style sheet should be cached for possible
later use.)

Line:23CSS Issues:External Style SheetsDescription: The use of the LINK element here
serves to identify the stylesheet named 'example.css' for use by the
current document (example.htm.) The REL attribute describes the relationship
of the indicated file to the current document (showing that 'example.css'
is a stylesheet for the current document.)

Lines:1-19Description: Notice that no HTML formatting
is used in the external CSS file. Only CSS rules are used. The TYPE attribute
used in the LINK element on line 23 is sufficient to tell
the browser the MIME type of the information in the file.

Lines:1 /
25CSS Issues:InheritanceDescription: This is the normal background and
character color set for this site. Assigning these properties to the BODY element
means that all BODY content (child elements) will inherit the text color and
background color property values unless otherwise specified.

Lines:5 /
42CSS Issues:Pseudo-ClassesDescription: The special anchor case - This defines
a special behavior for all anchor elements in the 'case1' class (Note: This rule
only controls the LINK Pseudo-class - The other two link pseudo-class properties
will be inherited from the rules specified on lines 3 /
4)

Lines:6 /
28 / 41CSS Issues:Pseudo-ElementsDescription: Only the first line of paragraphs
will be indented (25 pixels)

Lines:7 /
8 / 30CSS Issues:Pseudo-ElementsDescription: The DIV element: DIV is an element w/o
much real semantic meaning of its own. We are assigning a special appearance
here to the first letter and line of the element.

Lines:11 /
30CSS Issues:Classes,
Inheritance and
CommentsDescription: Only heading level 2 elements with the
class name of 'ex1' are given these style rules. Note that the 'green' text
color overrides the '#80c0c0' color set on the BODY element in Line 1.
Notice also the CSS comment syntax used - it will be ignored by the browser.

Lines:12 /
26 / 41CSS Issues:Selector syntax,
ClassesDescription: Use of a class name only as a
selector - All elements having the 'funkyclass' class name will be displayed as
indicated. Notice this document has two diverse elements (H1 and SPAN) using
this class name. Any number of elements can share a class name, but be sure
to keep in mind that some properties only apply to certain HTML element types.

Lines:13 /
39CSS Issues:ID Selector syntaxDescription: Usage of an ID selector - Only one
element in the document may use this style rule. This usage is much more limiting
than other regular Class or element selectors, but allows extremely granular
control of elements in a document (which could be helpful if a document is
being generated dynamically.)

Lines:14 /
32 / 33 / 36 /
39CSS Issues:Shorthand Selector SyntaxDescription: Styles being assigned to both ID and Class
selectors. Note that the yellow font color overrides the bluish (#80c0c0) color
set on the BODY element in Line 6.

Lines:15 /
26 / 30 / 39 /
40CSS Issues:Shorthand Selector Syntax,
InheritanceDescription: This rule is the motherload - It specifies
rules for multiple elements using selector shorthand syntax. Several of these elements also
have other style information attached as well, but this does not conflict with those
other rules. If you know you will be using a single property/value assignment for
more than one element, it makes sense to use a shorthand syntax like this rather than
repeating yourself repeating yourself. (In the off case that a property assignment
made here is also made for the same selector elsewhere using a different style rule,
the style assignment that was made last will be applied.)

Lines:16 /
41CSS Issues:Shorthand property syntax,
Abbreviated property types,
Inheritance,
Cascading RulesDescription: Multiple styles are assigned in this
rule using both Style grouping and Shorthand property rules. Each of the
properties used can set multiple display behaviors with an abbreviated syntax.
These properties could all be set separately, but the extra space it would
occupy would be wasteful. The nested SPAN and A elements in this block inherit
any unspecified properties from this parent element. Note also that margin rules
are specified for the 'first-line' pseudo-class, as well as the 'special'
class for the P element in line 41. The problem lies in the
'margin-left' property which conflicts with the same component property in
the 'margin' property rule. Because the the 'margin' rule was specified
later, it will be used.

Lines:17 /
39CSS Issues:Inheritance,
Cascading RulesDescription: As mentioned before, the rules
specified here do not include the 'background' property indicated on Line
15 because it is more useful to specify that separately
in order to take up less space.

Line:18CSS Issues: NADescription: This is a normal rule applied to a
class. The problem is that it is not used. This is not a fatal mistake, but having
rules around that are never used takes up space - and extra space means more download
time. In the context of an external style sheet such an occurrence will be more
common (since a style sheet referenced by many documents will need to cover display
rules for ALL documents, and many documents may not contain ALL the selectors
indicated. In this particular case it might be better to eliminate this rule
if no other documents are using this rule, but it does not hurt much to leave it
where it is just in case.

Lines:19 /
42CSS Issues:Inheritance,
Cascading RulesDescription: The use of '!important' is unique
here in this document. It will indicate to the browser that the rule must be
used in preference to a normal rule set for this element situation specified using
another method (using a reader's own style sheet for example.) This is a good
way to guarantee that a crucial style element in your page survives the
uncertainty of a Cascading Order calculation. This control should not be abused
however, as it reduces the control the reader has over their browsing
environment (a reader may have, for instance, valid physical reasons for
their viewing environment settings.)