External CSS Example
= Index DOT Css by Brian Wilson =

Main Index | Property Index | CSS Support History | Browser History

Example | Analysis

Example External File: 'example.css'

      body {
                 background: black;
                 color: #80c0c0 }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
a.case1:link { background: green }
p:first-line { margin-left: 25px }
      div.foo:first-line {
                 font-weight: bold;
                 margin-left: 30px }
      div:first-letter {
                 font-size: x-large;
                 color: #ffffff }
      ul ul li {
                 font-size: x-large;
                 font-decoration: italic }
h2 em { font-weight: 900 }
      h2.ex1 {
                 color: green;       /* This type of heading MUST be Green and Large! */
                 line-height: 50px;
                 font-size: 40px }
      .funkyclass {
                 font: 36pt/40pt courier;
                 font-variant: small-caps;
                 border: thick dashed blue }
      #tagid1 {
                 padding: 20px;
                 border: 20px groove #ffffff }
.class1, #tagid2 { font-family: 'comic sans ms', fantasy; color: rgb(100%,100%,0%) }
h1, h2, div.class5, blockquote { background: #000080 }
      p.special {
                 font: 12pt/14pt sans-serif;
                 margin: 5px 0px 2px 25px;
                 border: medium dashed #ff0000;
                 background: white url(http://www.foo.com/image.gif) repeat-x fixed top right }
      blockquote {
                 margin-left: 2cm;
                 color: #00ff00 }
      .part1 {
                 font-size: xx-large;
                 color: #808000 }
      h6 {
                 font-size: xx-small ! important;
                 color: red ! important }

Main Document: 'example.htm'

<html>
<head>
<title>Document Title</title>
<link REL="StyleSheet" TYPE="text/css" HREF="example.css">
</head>
<body>
<h1 CLASS="funkyclass" ALIGN="center">Welcome to my home page!</h1>
<br><br>
<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 <a HREF="http://www.mysite.com/coolsites.html">cool sites</a> or sign my <a HREF="http://www.mysite.com/guestbook.html">guest book</a></p>
<div CLASS="foo"> My wonderful poetry <br> is available if you are REALLY bored. Why not give it a spin?</div>
<h2 CLASS="ex1"> The Best Poetry I <em>NEVER</em> Wrote</h2>
<ul>
<li>'There Once Was A Man From Nantucket' - <span CLASS="class1">Anonymous</span></li>
<li>'Cool In Fur' - <span CLASS="class1">Harry B. Foot</span></li>
<li>And My All Time Fave:
<ul>
<li> 'A Toast To My Toaster' - <span CLASS="class1">Me!</span></li>
</ul>
</li></ul>
<blockquote>Brought to you by the letter <span ID="tagid2">"H"</span> and <span ID="tagid1">Joe Shmoe</span> </blockquote>
<div CLASS="class5"> When you are done looking through these masterpieces, I encourage you to visit my proud sponsor!! </div>
<p CLASS="special"><span CLASS="funkyclass">ADVERTISEMENT:</span> Buy Navel Lint Contemplator! Its a browser and its a sandwich spread! Go to our <a HREF="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 <a HREF="http://www.mysite.com/selfdestruct.html" CLASS="case1">self destruct</a> in 10 seconds...</h6>
</body>
</html>

Analysis

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 later use.)
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.
Lines: 1 / 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.
Lines: 2 / 3 / 4 / 28 / 41 / 42
CSS Issues: Pseudo-Classes
Description: This defines the general behavior for all anchor elements in the document.
Lines: 5 / 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 / 4)
Lines: 6 / 28 / 41
CSS Issues: Pseudo-Elements
Description: Only the first line of paragraphs will be indented (25 pixels)
Lines: 7 / 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.
Lines: 9 / 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.
Lines: 11 / 30
CSS Issues: Classes, Inheritance and 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.
Lines: 12 / 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.
Lines: 13 / 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.)
Lines: 14 / 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.
Lines: 15 / 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.)
Lines: 16 / 41
CSS Issues: Shorthand property syntax, Abbreviated property types, Inheritance, 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.
Lines: 17 / 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.
Lines: 19 / 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.)

External CSS Example = Index DOT Css by Brian Wilson =

External CSS Example
= Index DOT Css by Brian Wilson =