Using CSS - Implementing a Style Sheet


fancy rule divider graphic

Linking & Embedding CSS

There are two ways to associate the CSS with an HTML document:

1) Embedding the Style Sheet - we can embed the style sheet in the head of the webpage, but we lose most of the advantages of using CSS. It is done using the following syntax:

 <style type=”text/css”> </style>

2) Linking to an External Style Sheet - by far the best way to implement CSS, we link to an external style sheet in the head of the HTML using the following syntax:

 <link rel=”stylesheet” type=”text/css” 
 href=”http:style.css”/>

Linking to an external style sheet is the REAL advantage of CSS. Instead of the styling CASCADING through just that web page, it cascades to every page that you link it to across the entire website!

A Cascading Style Sheet is just a simple text file ending with a .css suffix. Like HTML, you need no special software to write the code if you know the markup well enough not to need a WYSIWYG editor.


Examples of CSS Markup

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo?"

The above dummy text (Lorem Ipsum) is styled with the following markup in the external CSS:

  p {
	font: 1em/1.4em Verdana, Arial, Helvetica, sans-serif;
	color: #3300FF;
	padding: 1em;
	border: 3px double #993300;
	background: #CCCCCC;
	display: block;
	}

With that small amount of code, every paragraph it is applied to will have that font family, font color, font size, line height, background color, border color, border style, and text inset in relationship to the border (padding).

Note: the ORDER of the CSS is important. If there are any conflicts in the markup (you have told the browser to do two different things by mistake), the W3C markup guidelines tell the browser to follow what was stated LAST in your markup.

The W3C has a list of CSS markup references containing the (nearly) endless capabilities of Cascading Style Sheets.


fancy rule divider graphic

Powerful Examples of CSS Styling


Zen Garden Banner

For some GREAT examples of CSS styling, and more awareness of its power, just visit “The Garden.” The Zen Garden aims to excite, inspire, and encourage participation.

You will find it hard to believe, but the HTML code is the same in all of the examples. The only thing that has changed is the external .css file.


fancy rule divider graphic

CSS Commenting & Conditional Statements

Many webmasters will break their style sheets into modular units as an organizational tool; one for layout position, another for links, and yet another to control fonts & colors.

Another application for separate style sheets is to make adjustments to IE (Internet Explorer). Although IE has made vast improvements in IE7 and IE8, it has been a source of irritation for years to webmasters using CSS due to it's slow adoption & poor conformance to the W3C web standards.

Conditional Comments to Control IE

First, link to your standard style sheet in the normal way <link> tag. Then, use conditional comments to link to one or more other style sheets that contain the CSS targeted towards IE.

The IE-only style sheets should contain only the required CSS fixes, not a duplication of your standard CSS. If you want to target IE6 and IE7 with separate CSS instructions, the markup is written:

 <link href="style.css" rel="stylesheet" type="text/css">

 <!--[if IE 7]>
 <link href="ie7.css" rel="stylesheet" type="text/css">
 <![endif]-->

 <!--[if IE 6]>
 <link href="ie6.css" rel="stylesheet" type="text/css">
 <![endif]-->

CSS Commenting

A webmaster can make comments (take notes) within style sheets.
Comments are formatted: /* comments & notes go here */

HTML COMMENT TAGS

To ensure that older browsers don’t display style sheet markup embedded in the HTML as text, the style sheets can be surrounded by HTML comment tags ( <!-- comments & notes go here -->).

– Professional Website Design & Development · Search Engine Optimization · Freelance Graphic Design Services –

Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Kansas City, Independence, Olathe, Kansas, Overland Park, Blue Springs, Missouri, Belton, Excelsior Springs, MO, Gardner, KS, and Gladstone               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Grandview, Missouri, Lansing, Leawood, Leavenworth, Kansas, Lees Summit, Lenexa, KS, Liberty, Merriam, Ottawa, Prairie Village, Raymore, Raytown, MO, Shawnee, Avondale and Basehor, Kansas               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Birmingham, Bonner Springs, Kansas, Buckner, Claycomo, Countryside, KS, De Soto, Edgerton, Edwardsville, Fairway, Garden City, Glenaire, Grain Valley, MO, Greenwood, Missouri, Harrisonville, Houston Lake and Kearney               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Lake Lotawana, Lake Quivira, Lake Tapawingo, Lake Waukomis, Lake Winnebago, MO, Lawson, Levasy, Lexington, Linwood, Lone Jack, Missouri, Louisburg, Mission, Mission Hills, KS, and Mission Woods               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Missouri City, Napoleon, North Kansas City, MO, Northmoor, Oak Grove, Missouri, Oaks, Oakview, Oakwood, Oakwood Park, Odessa, Orrick, Paola, Parkville, Peculiar, Platte City and Platte Woods               Graphic Connection provides websites styled with Cascading Style Sheets (CSS) in Pleasant Valley, Pleasant Hill, Randolph, Richmond, River Bend, Riverside, MO, Roeland Park, Kansas, Sibley, Smithville, Spring Hill, Sugar Creek, Tonganoxie, Unity Village, Weatherby Lake, Wellington, Westwood, Kansas and Westwood Hills.