CSS

Submitted by Alan on Sat, 04/25/2009 - 18:12

Style sheets allow you to control the rendering, e.g. fonts, colors, leading, margins, typefaces, and other aspects of style, of a Web document without compromising its structure. After HTML, the other most important development concerning the presentational aspects of modern web sites is 'cascading style sheets' (CSS). CSS allows presentational specifications to be removed from web pages and put into separate, reusable documents called style sheets.

CSS is a simple style sheet mechanism that allows authors and readers to attach style to HTML documents. It uses common desktop publishing terminology which should make it easy for professional as well as untrained designers to make use of its features. Visual design issues, such as page layout, can thus be addressed separately from the web page logical structure.

Unfortunately most browsers are very poor in their support for CSS - in some cases, they are worse than useless and actually mangle the display or even crash the browser. If you see that happening at this site, please upgrade or switch to another browser.

Style sheets contain rules to determine how the styles shall be applied. Rules comprise:

selectors
HTML elements are known as selectors in CSS. The selector is the link between the HTML document and the style, and all HTML tags are possible selectors. There are two kinds of selectors:
  1. Type
  2. Attribute (Class or ID)
We'll address those later.
declarations.
The declaration has two parts:
  1. property (e.g. 'color') and
  2. value (e.g. 'blue').
CSS supports many different properties which can be applied to selectors to determine the presentation of an HTML document. Properties include background (color or graphic), font-size, font-weight, line-height (leading or interlinear spacing), font-family, letter-spacing and word-spacing.
A rule generically looks like: 
 
selector	{
	property1	:	value1	;	/* declaration1 */
	property2	:	value2	;	/* declaration2 */
	property3	:	value3	;	/* declaration3 */
	)
For example, to make a green paragraph:- 
 
p	{	color	:	green;	}

p is the selector, and the rule has just one declaration - that the color property of the paragraph will be green. A property and its associated value is known as a declaration. Multiple declarations are separated by semicolons. For example, the following style rule assigns the <h1> tag a specific font size (15 points) and font weight (boldface): 

 
h1	{
	font-size	:	15pt	;
	font-weight	:	bold	;
	}
If the same properties are to be applied to several selectors (i.e. HTML elements) then the selectors may be grouped thus:- 
 
h1, h2, h3	{
	color	:	navy	;
	}

Applying Styles

There are several ways to include styles in your document. The simplest is to place the declarations (not rules) directly inside the tags they affect, e.g. 

<p	style = "color: green; font-size: large;">
	A big green paragraph.
	</p>

This method is of very limited use, if any. It only applies to the tag it's in. It fails to separate presentation from content.

Another way is to make use of the <style> tag placed in the <head> portion of your document, which will define styles for tags which appear later. For example, the following few lines will set all text which appears inside a <p> to a face of Arial, a point size of 12, and green, and all level 1 headings italic: 

<style type="text/css">
<!--
p	{
	font-family	:	arial;
	font-size	:	12pt;
	color		:	green;
	}
h1	{
	font-style	:	italic	;
	}
 
// -->
</style>

Note the type="text/css" statement inside the style tag. This tells your browser that the enclosed markup is text/css. Notice toom the use of comment tags <!-- and -->) to prevent the source from being displayed in older browsers which do not support the <style> tag. This helps retain backwards compatibility.

Another very important way to include styles in your document is to link an external file containing your styles. The <link> uses an URL to source a file containing your styles. It's syntax is shown below : 

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

The MIME type is specified as~text/css~. The location of the style sheet may be relative or absolute. The external style sheet must contain only style definitions; HTML markup is not permitted. A style tag is not necessary inside an external style sheet.

By using single document linked into all your HTML documents, you can change the formatting of every single HTML page by editing one CSS file. Imagine a site containing hundreds or thousand pages of HTML, and you want to change the background colour of every page from white to pale yellow. Before style sheets, it was necessary to update the bgcolor attribute of every <body> tag in every document. With linked style sheets, simply edit your body property to reflect the changes: 

body	{
	background-color	:	#ffffcc	;
	}

Inheritance

Styles are inherited. This means that if you define a style for a particular element, then place another element inside that first element, it inherits the style of the first element along with whatever was defined for itself. In the first example, <p> was defined to be blue arial 12-point, and <a> was defined to have no underlining. If you placed an anchor in your code that was inside a <p> tag, it would be blue arial 12-point, along with not being underlined.

If you set properties on the body then they will apply to all elements in the document, unless overridden by more specific rules. That is, every element is a child of body. The following will set generic properties on the HTML document; white background, black text, and preferred font and alternates, 'sans-serif' being the catch-all fallback. 

 
body	{
	background	:	#ffffff	;
	color		:	#330000	;
	font-family	:	"Trebuchet MS",
				"Palatino",
				"Verdana", sans-serif;
	}

OK, so now I can make all paragraphs green or all level 1 headings italic. But suppose I only want some paragraphs to be green, or some level 1 headings to be italic?

All body elements can be classed, and the class can be addressed in the style sheet. Classes establish grouping schemes for identifying HTML tags within a Style Sheet. Different HTML tag types can share the same Class Name value - this allows an entire class to be identified by a common label.

A class attribute may be used to reference either all tags or only selected tags within the class. To address a specific element within the class, use the element joined to the class name by a period as selector (e.g. 'body.Astro'). To specify all elements in the class, use only the class name with a leading period as a selector (e.g. '.screen'.) 

 
body	{
	font-family	:	garamond;
	color		:	#000000	;
	background	:	#ffffcc	;
	}
body.Astro
	{font-family	:	garamond;
	color		:	#ffcc33	;
	background	:	#000000	;
	}
.screen {
	background	:	#000033	;
	color		:	#66ff33	;
	}

In this example, documents will be rendered with black text on an off-white background unless class = Astro is specified inside the body tag.

In a previous example, all <p> tags will be rendered in blue text. But suppose you want some paragraphs to be blue, and some to be red? Create a regular <p> tag (rendered in blue text), and a class of <p> tag which contains a different colour modifier. The following snippet of code illustrates the example : 

p	{
	color		:	blue;
	font-family	:	arial;
	font-size	:	12pt;
	}
 
p.Warning	{
	color	:	red;
	}

The period notation represents a class of p which will be red. Because it is defined this way, only the <p> tag may make use of it. If you want to apply it to all tags, use : 

.Warning	{
	color	:	red;
	}

and then any tag may use the Warning class. A class modifier is specified using the class attribute in your document: 

<p>This text will appear in the standard blue colour</p>
<p class="Warning">This text will render in red</p>

Fonts

In the above example, font-family was defined to be Arial. What happens if the viewer does not have this particular font installed on their system? You can list several alternatives, separated by commas. If the first on the list isn't found, the browser will look for the next, and so on down the list. The last alternative you provide should be a generic "family", one of which is almost guaranteed to be present on your viewer's system. There are five generic families to choose from. They are, in no particular order, serif, sans-serif, cursive, monospace, and fantasy. The exact font from each family that may be used is system dependent. The following line of code will start with verdana, try garamond if that is not present, and then default to serif in the end if the first two aren't present. 

font-family	:	verdana,garamond,serif;

Fonts come in a wide range of sizes. The font-size property allows you to specify exact point-size definitions. The following line of code specifies a font with a height of 12 points : 

font-size	:	12pt;

There are several ways to specify the size of a font. You may also use an "absolute-size" keyword instead of a point size. These include xx-small, x-small, small, medium, large, x-large, and xx-large. If you do decide to use an absolute-size keyword, you then have the option of re-defining a child style with a relative size. There are two - larger, or smaller. A percentage size is also possible if a parent size has been defined. 80%, for example, will size a font to 80 percent of its parent.

Turning Off Link Underlining

A commonly asked question is "How can I turn link underlining off? Before you do, be sure that there are other cues to let the reader know that there are clickable links there, e.g. they are in an area that is clearly a navigation menu. Here's how to remove link underlining: 

 
a	{
	text-decoration	:	none	;
	}
a:link img, a:visited img {
	border-style	:	none	;
	}

Margins

The margin-left, margin-right, and margin-top properties set the side margins and top-margin for an element. You can specify the margins in pt, in, cm, or px: 

 
body {	margin-left	:	100px	;
	margin-right	:	100px	;
	margin-top	:	50px	;
	}
Or you can combine them into one property called margin: 
 
body {margin: 100px 100px 50px}
The order is top, right, and left. If you specify a single value, it will be applied to all three margins.

Style sheets will be the best solution once browsers that support them are widely deployed. They separate presentation directives from structural markup and are explicitly designed to address the presentation issues. 

 
<p style="margin-left: 100pt;
	border: ridge; background: #ffffcc">
	Style sheets will be the best solution once
	browsers that support them are widely deployed.
	They separate presentation directives from
	structural markup and are explicitly designed
	to address the presentation issues.
</p>

Note that the above example does not separate presentation from markup, to keep the example simple; normally the style would be defined in a separate style sheet.

Create Your Own HTML Tags

Well, almost. The <div> tag used with the class attribute allows you to define logical containers that are almost as good as new HTML tags. For example, I want all documents to begin with an 'abstract' - i.e. a paragraph giving a quick overview of the document, like this:- 

 
<div	class="Abstract">
	This page introduces the basic concepts of
	<em>cascading style sheets</em>, and provides
	some examples and links to further resources.
</div>

Examples

These examples are taken from our own style sheet, so you should be able to see the effects on this page. There could be slight differences, in the case that I update the style sheet and forget to update this article...