Skip redundant pieces
KU Web Template
KU Home   :   CSS Documentation

CSS Primer

Cascading Style Sheets can be quite complex. This primer will attempt only to cover the basics and provide a summary of the principles which will be most helpful in understanding KU's site-wide CSS file. For a complete reference guide, please see the specification provided by w3.org.

In this document, all CSS code will be presented in a grey box like this: 
.outline {
	border:  1px solid #cccccc;
}

Basic Style Sheet Construction

In a style sheet, it is possible to include text which is ignored by the browser. These "comments" are a helpful way to document the style sheet internally. A comment is any text found between /* and */. 
/*  This text is a comment and will be ignored by the web browser. */
The KU site-wide style sheet contains many internal comments, often used to label topical sections of the style sheet.

Every style sheet directive is of the following form 
thing_to_modify {
	property: setting;
	property: setting;
	property: setting;
}
The spacing is not critical, but the punctuation is very important. Without the { }, colons, and semicolons in the right places, the style sheet will not be read correctly by the web browser. There are a few minor variations to this basic directive which will be covered later in this document.

Tags, classes, and IDs

A style sheet can be used to specify how a certain HTML tag should be displayed in the browser. For example, suppose you want to re-define the size, color, and boldness of the <H1> tag. In the KU Style Sheet, it's defined like this: 
h1 {
	color:       #666666;
	font-size:   19px;
	font-weight: 400;
	padding:     0px 0px 0px 0px;
	margin:      10px 0px 0px 0px;
}
The "h1" at the beginning of the { } block tells the web browser that all the properties within that { } block describe how all <H1> text should look. Any HTML tag descriptor can be modified in this way. The KU Style Sheet has specifications for many of the basic HTML tags including H1 through H6, the anchor tag <a href="">, and others.

The style specification for the <body> tag is used to set the default font and color options for the page. This is where the KU Style Sheet defines the default white background color and grey text for the KU Web Site. 
body {
	font-family:      Arial, Helvetica, sans-serif;
	font-size:        11px;
	line-height:      17px;	
	color:            #666666;
	text-align:       center;
	margin:           0;
	padding:          0;
	background-color: #FFFFFF;		
}

A style sheet can dictate settings for other things besides basic HTML tags, and this is where CSS is the most useful for web designers. By labeling a certain style with a name like ".redtext" (note the leading dot before the name), the style sheet can define a style "class" which can be applied almost anywhere in the web page. For example, adding this block to a style sheet: 
.redtext {
	color:  #f66666;
}
allows the class name "redtext" to be used to modify text in the web page: 
<p class="redtext"> This is a red paragraph. </p>
producing web content that looks like this:

This is a red paragraph

As a refinement, style sheets also allow a class to be attached only to a specific tag. By using the style declaration "p.redtext { ... }", the "redtext" class will only be usable by the <p> tag. If the class name is non-specific (like ".redtext { ... }"), the class can be used in nearly any tag:
  • <a class="redtext" href="...">
  • <td class="redtext">
  • <span class="redtext">
  • <div class="redtext">
  • <pre class="redtext">
  • <h3 class="redtext">
    • ...and others

There is another style sheet labeling method which is widely used in the KU Web Template. HTML 4 and XHTML support the concept of attaching an ID to an individual tag on the page. The ID is an arbitrary name that the web page creator invents and uses once, and only once, on a web page. By giving a name to individual web page elements, the web designer gains the ability to control them individually, by name, via the style sheet. For example, in HTML: 
<p id="first_paragraph"> This is the first paragraph on the page,
so it needs special treatment. </p>
Now that individual paragraph can be modified with the style sheet using this syntax: 
#first_paragraph {
	font-size: 1.2em;
	border:    1px solid #cccccc;
}
When the HTML code is displayed in the browser, the #first_paragraph style will be applied, making it look like this:

This is the first paragraph on the page, so it needs special treatment.

Using IDs can be very useful, but be careful to never re-use an ID. The browser expects an ID to appear only once on a web page. Any more than that is an error, and will produce unpredictable results.

Those are the basic guidelines for reading and creating Cascading Style Sheets. The only things left to discuss for this primer are the various settings and properties, how they work, and what they do.

The <div> tag

The use of CSS for page layout purposes means using a new HTML tag: 
<div>
	...
</div>
You can think of the DIV tag as creating a DIVision of the web page. Used on its own, it has very little impact on the page contents. The DIV tag is rarely used on its own, however. Usually, it's used as a way to establish a region of the page which should use a certain Style (a class or ID) from the style sheet. When the DIV is used this way, it's almost like creating a table in HTML, but the DIVs are used in place of the TD tags from the table. There are no tags which define rows or columns, as such. Instead, the style sheet is used to govern how much space a given DIV should use in the page.

When a DIV is given a class that doesn't say anything about its size or position, most browsers will place the DIV on the page so that it takes up one solid horizontal space, going from the left edge to the right edge of whatever HTML tag contains the DIV. In the following example, each DIV will use one line of text, and will stretch all the way across the browser window: 
<html>
<body>
	<div> First div. </div>
	<div> Second div. </div>
	<div> Third div. </div>
</body>
</html>
The DIV tag can be used to give you much more specific control over different parts of the page by simply applying a style Class or ID to the div. For example, this style can be used to make the contents of a DIV appear in a box on the left, with all text inside in italics: 
.boxleft {
  width:        100px;
  border:       1px solid #cccccc;
  float:        left;
  font-style:   italic;
  margin-right: 4px;
}
In action, the DIV looks like this:
This is the text inside the "boxleft" DIV
The DIV is "floating" to the left side, while this text wraps around it on the right. This is a common style used in the KU Style Sheet for images and their captions.

The only limit to what you can do with styled DIVs is the CSS capability of the web browser. Some more advanced DIV layouts are beyond the abilities of older browsers, but as new browser versions come out, more and more will be possible. Right now, the DIV tag is still very powerful: You can nest DIVs within other DIVs, use them to block off your page in multiple columns or rows or a mix of the two, use different colors and font styles for different regions of your page text, and many other things.

The KU Web Template makes extensive use of the DIV tag to organize the various regions of the web page into blocks, each with its own particular styles. Many of the styles provided in KU's Style Sheet are applicable to the DIV tag, so it's important that you understand how they work and what they do. For the curious, a couple of useful CSS tutorials can be found here:

Style Sheet Properties and Settings

This will be a brief, incomplete reference, describing the style sheet settings which are most commonly used within the KU Web Template. For a complete list, see the reference page at w3.org.

Font Settings
Set the font in order of preference. Font names with spaces should be in quotes, like "Times New Roman". 
font-family:	Arial, Helvetica, sans-serif;
font-size:    Set the size of the font. This can be in pixels ("px"), points ("pt"), or "em". "em" is a unit which sets the font-size relative to the default, so "1.0em" is "same size as default" and "1.4em" is "1.4 times the size of the default". 
font-size:	11px;   /* absolute setting */
font-size:	1.2em;  /* relative setting */
color:    Set the color of the text. This is given in the HTML standard #...... form 
color:  #666666;	/* medium grey */
text-align:    Set the horizontal alignment of the text. Possible values are "left", "right", and "center". 
text-align:  left;
vertical-align:    Set the vertical alignment of the text. Common values are "top", "bottom", "baseline", "middle". 
vertical-align:  top;
font-weight:    Set the thickness of the text. This is how style sheets make boldface text. Column values are "bold" and "normal". 
font-weight:  bold;
font-style:    Set the style of the text. This is how style sheets make italic text. Common values are "normal" and "italic". 
font-style:  italic;
text-decoration:    Set text decoration. The most common choices are "none" and "underline". 
text-decoration:  none;

Object Spacing
HTML units like paragraphs (<p>), anchors (<a>), divs (<div>), etc. can be assigned buffer zones of blank space around them. There are only two CSS properties which govern how much space to use, but there are variations in how they can be spelled out in the style sheet. The basic model, which is the most self-explanatory, is the one given below.

margin:    Set the spacing around the outside of the object. The units can be given in pixels, percentage, or "em". 
margin-top:    10px;   /* absolute value */
margin-right:  5%;     /* relative to the size of the HTML object */
margin-bottom: 6px;    /* absolute value */
margin-left:   1.0em;  /* relative to the size of the font */
padding:    Set the spacing within the bounds of the object. The distinction between "margin" and "padding" can be most clearly seen in objects with borders. The difference is illustrated in w3.org's CSS reference. The units are the same as with "margin" above. 
padding-top:    10px;   /* absolute value */
padding-right:  5%;     /* relative to the size of the HTML object */
padding-bottom: 6px;    /* absolute value */
padding-left:   1.0em;  /* relative to the size of the font */

HTML Object Size
CSS can dictate the size of an HTML object in the browser.

width:    Set the width of the HTML object. This can be given in pixels, percentage, and "em". 
width: 100%;   /* relative to the surrounding HTML element */
width: 200px;  /* absolute value */
height:    Set the height of the HTML object. This can be given in pixels, percentage, and "em". 
height: 100%;   /* relative to the surrounding HTML element */
width:  200px;  /* absolute value */

Borders
Any HTML object can be given a border, or can have one taken away. The border can be assigned different colors, styles, and thicknesses, and can be described in various ways. A simplified set of examples follows.

border:    Set the entire object border in one line. The setting can be "none" or a full border specification. 
border: none;
border: 1px solid #cccccc;  /* thickness, style, color */
border-top: (and others)    Set a single border edge. The setting can be "none" or a full border specification. 
border-top:    none;
border-top:    1px solid #cccccc;  /* thickness, style, color */
border-right:  1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left:   1px solid #cccccc;