CSS Standards - Part 1

Alex · #1 (**permalink**) 02-27-2008, 04:35 AM

Introduction

Cascading Style Sheets (CSS) are there to define the look and feel of one or several (x)HTML documents. By using CSS we separate content from presentation. Anything that is visual should be achieved via CSS (granted the targeted browsers permits that).

CSS should reside in its own document and should only be mixed with HTML when absolutely necessary. Furthermore, CSS should enhance the current markup and not replace it.

Applying CSS to documents.
CSS can be applied to one or several documents in different ways:

Linked in the document head via the LINK element
Linked in the document head via a STYLE element and the @import directive
Added directly to the head via the STYLE element
Inline in the HTML element via the STYLE attribute

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
	<title>CSS standards</title>

	<!-- Standard LINK (works in all CSS able and half able browsers -->
	<link rel="StyleSheet" href="basic.css" type="text/css" />

	<!-- @import does not work for NS4.x -->
	<style type="text/css">
		@import url(advanced.css)
	</style>
	
	<!-- We can also mix imported style sheets and CSS definitions -->
	<style type="text/css">
		@import url(advanced.css)
		HTML,BODY {
			font-family:Arial,Sans-Serif;
			font-size:80%;
			color:#333;
			background:#fcc;
		}
		H1 {font-size:120%;margin:0;}
		P {margin:.5em 0 0 0;}
	</style>
</head>
<body>
<!-- Inline styles should ONLY be used in dire emergencies -->
<a href="/contact/" style="text-decoration:none;color:#c00">Contact</a>

Generally, style sheets should be added via a LINK element. If you want to use alternative style sheets you'll need to add a title to each. Alternative style sheets are supported by some browsers (Mozilla for example) and allow the user to change to the style most appropriate for him. Style switcher scripts, written in various languages, can simulate this feature for IE.

Code:

<link rel="stylesheet" type="text/css" 
href="sheet1.css" title="Default" />
<link rel="alternate stylesheet" type="text/css" 
href="bigtext.css" title="bigger font" />
<link rel="alternate stylesheet" type="text/css" 
href="contrast.css" title="high contrast" />

If we want to ensure that Netscape 4.x also gets a style sheet (by right it shouldn't, Netscape never claimed Communicator supports CSS, a shame that it does, partly at that), we can take a two track approach. The main stylesheet gets added via LINK (body font and colours) and the more sophisticated CSS gets added to a second style sheet that gets applied via @import.

Code:

<link rel="StyleSheet" href="basic.css" type="text/css" />
<style type="text/css">
	@import url(advanced.css)
</style>

Depending on the project at hand, we might want to add the main style settings into one CSS document and special settings into smaller documents that get added should they be needed.

Style definitions in the head of the document should only be added when they are absolutely necessary, it is an unclean way of applying CSS, as it once again means mixing content and presentation. The HTML document should only contain the text and the necessary markup.

Inline styles are only to be used for hacks or when a fast fix is necessary, normally there is no need for them. CSS should be CSS, not a FONT element on steroids.

Christian Heilmann

ultimatewarrior8888 · #2 (**permalink**) 06-02-2008, 06:20 PM

Good writing. Keep up the good work.I love this site, let's try our best together, seize everyday, just do it!Runescapecoin.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode