3.2: Writing CSS specifications

Writing style specifications

A cascading stylesheet is a set of specifications that control the look of your HTML tags:

On your stylesheet, each specification consists of:

Each declaration consists of:

A block, the part between the curly brackets, can have many declarations, each with a property:value and a semicolon at the end. Each declaration affects some aspect of how an HTML tag works.

Here is an example using the paragraph tag as the selector:

paragraph specification

What the declaration means:

  1. Line-height sets the white space between lines of type, what printers call “ledding,” In this spec, we have 10-point type plus 4 points of white space, giving us 14-point line height. See the typography handout (PDF) for more on point size, line height and other typographical terms.
  2. The margin specification is 0, meaning each paragraph will have no extra space above or below it. This along with the first-line text indent will produce the kind of paragraphs you see in most books.
  3. The text-indent is set at 14 points. This means that the first line of each paragraph will be indented the same as the line-height, a common type-setting practice.
  4. The color specification applies to type. The hexidecimal number #000 stand for black. Usually we leave out the color spec for basic type styles.

Types of selectors

  1. HTML tag: any HTML tag can be altered or extended using CSS. In the example above, the p (paragraph) tag was used as a selector.
  2. Class selector: A class selector begins with a period and can be any descriptive word. Class selectors are preferred for use with text or repeated items, such as links. Example:
    
    	.red
    	{
    	color:red;
    	}
    	
    The class “red” can be applied to any HTML tag like this:
    			
    	<p class="red">This paragraph will have red type.</p>
    	
  3. ID selectors: ID selectors begin with a pound sign and can be any descriptive word. As with class selectors, an ID can be used to modify or extend any HTML tag. In general, use ID selectors to control space. Example:
    #wrapper
    	{
    	width:1000px;
    	margin:30px auto;
    	}
    	
    The ID selector can be applied to any HTML tag, but is generally reserved for block tags:
    	<div id="wrapper">
    	This division will produce a space 1000 pixels 
    	wide with 30 pixels of margin top and bottom, 
    	and equal margins left and right.</div>
    	
  4. Parent-child selectors: We will set up unique typography for each area of our web page. For example, our typography for the main content section of the page might be much different from the typography of the aside (sidebar) section. This is where the parent-child selector comes in. It starts with an HTML tag or an ID selector and is followed by one or more HTML specifications separated by commas. Example:
    main h1, h2, h3, h4, h5, h6
    	{
    	margin-top: .5em;
    	margin-bottom: .25em;
    	color: #900;
    	}
    main h1
    	{
    	font-size:18px;
    	line-height:18px;
    	}
    	
    It is applied to the HTML page like this:
    	<main>
    	<h1>This heading will have proper space above and below, but 
    	only within the <main></main> tags.</h1>
    	</main>
    	

Styling the body tag

Remember that all content goes between the <body></body> tags. Create a style for the body tag that includes global qualities for your web pages. A key declaration is the default font style. The defaults are set in the body-tag specification, like this:

body    
{ 
	font-family: verdana, helvetica, 'sans-serif';
	background-color: #FFF;
	color: #000;
}

DO NOT put a font-size declaration in the body style!

The body specification cascades into the other styles, such as a paragraph specification; thus the name, cascading style sheets.

More about class selectors

Class selectors extend the usual set of HTML tags, allowing the variations in type to fit your uses. A class selector can be applied to any tag. For example, the two classes below allow us to apply red or blue to any piece of type using aclass attribute. Here are the class specs:

.red  
	{
	color: #900;
	}

.green
	{
	color: #090;
	}
	

Here is how you could apply the specifications to your Web page:


<h1 class=red>This headline will be red.</h1>

<p class="green">The text of the paragraph will be green.  Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 
ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, 
quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea 
commodo consequat.</p>

Here is how it looks in the browser:

This headline will be red.

The text of the paragraph will be green. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.

Important notes about class selectors

Notice that the class selector on your CSS is preceded by a period: .red