to my home page!</h1>
<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
sites</a> or sign my
<divCLASS="foo"> My wonderful
poetry <br> is available
if you are REALLY bored. Why not give it a spin?</div>
The Best Poetry I <em>NEVER</em> Wrote</h2>
<li>'There Once Was A
Man From Nantucket' - <spanCLASS="class1">Anonymous</span></li>
<li>'Cool In Fur' -
<li>And My All Time Fave:
'A Toast To My Toaster' - <spanCLASS="class1">Me!</span></li>
<blockquote>Brought to you by the
letter <spanID="tagid2">"H"</span> and <spanID="tagid1">Joe
When you are done looking through these masterpieces, I encourage you to visit my proud sponsor!!
<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.
<h6>All standard disclaimers apply.
Your life depends on NOT copying this document in any way. This tape will
destruct</a> in 10
Line: General CSS Issues:External Style Sheets Description: 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
Line:23 CSS Issues:External Style Sheets Description: 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-19 Description: 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.
25 CSS Issues:Inheritance Description: 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.
3 / 4 / 28 /
41 / 42 CSS Issues:Pseudo-Classes Description: This defines the general behavior
for all anchor elements in the document.
42 CSS Issues:Pseudo-Classes Description: 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 /
28 / 41 CSS Issues:Pseudo-Elements Description: Only the first line of paragraphs
will be indented (25 pixels)
8 / 30 CSS Issues:Pseudo-Elements Description: 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.
10 / 30 / 36 CSS Issues:Contextual Selectors Description: The specified rules only apply to
list items within doubly nested unordered lists and emphasized elements
within level 2 headings.
30 CSS Issues:Classes,
Comments Description: 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.
26 / 41 CSS Issues:Selector syntax,
Classes Description: 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.
39 CSS Issues:ID Selector syntax Description: 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.)
32 / 33 / 36 /
39 CSS Issues:Shorthand Selector Syntax Description: 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.
26 / 30 / 39 /
40 CSS Issues:Shorthand Selector Syntax,
Inheritance Description: 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.)
41 CSS Issues:Shorthand property syntax,
Abbreviated property types,
Cascading Rules Description: 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.
39 CSS Issues:Inheritance,
Cascading Rules Description: 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:18 CSS Issues: NA Description: 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.
42 CSS Issues:Inheritance,
Cascading Rules Description: 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.)