CSS: The Rules

Part 2/2, which lists the major CSS rules and how to apply them to your pages.
Last updated: May 17, 2007

This page lists and explains some of the CSS rules you can use to enhance your web pages. Most CSS rules have two ways to implement certain attributes. Using fonts as an example, you can define the font size using the specific 'font-size' property. However, you can also define it in the general 'font' property, along with all the other font properties. I will list the specific ones first, then give an example of using the general form. Also note that there is also a 'none' option for several properties, which overrides inherited properties (e.g. if one element is nested inside another).

 

Font & text properties

Here are several font properties you can use, and the values each one can take:

• font-family - the name of the font (e.g. Times) or a font type (e.g. sans-serif) or both (e.g. Times,serif)
• font-style - 'italic' or 'oblique'
• font-variant - 'small-caps'
• font-weight - 'bold', 'bolder', 'lighter' or a number between 100 and 900
• font-size - point size (pt) or absolute size in pixels (px)
• line-height - a number (e.g. 2 for double spacing), percentage or point size
• word-spacing - a length value, points or pixels
• letter-spacing - a length value again
• vertical-align - 'sub', 'super', 'top', 'middle' or 'bottom'
• text-decoration - 'underline', 'overline', 'line-through' or 'blink'
• text-align - 'left', 'right', 'center' or 'justify'
• text-indent - a length or percentage
• color - name of a color or a hexadecimal color number

Whew! I've got some explaining to do. The property, in italics, is what you put before the colon. The value goes after the colon, and is followed by a semicolon. It's not as confusing as it sounds. Here's an example:

#example1 {
  font-family: Times,serif;
  font-style: italic;
  font-weight: bold;
  font-size: 12pt;
  line-height: 2;
  letter-spacing: 14pt;
  color: #FFAD52;
  }

Note the following:

1. The font type (serif, sans-serif etc.) is useful to include in the font-family property because if the font you have specified is not on the system of the person visiting the site, it will be replaced by another font. Including the generic font type means that a similar font will be used.
2. Font names which contain a space in their name must be enclosed in quote marks, e.g. "Trebuchet MS"
3. Oblique is basically the same is italic; the only difference is that the computer slants the font to the right when using oblique, whereas italic is a style built in to the font.
4. Technically, color is not a text property, as it will change the color of borders and horizontal lines within the tag as well, but these can be overridden using their respective functions.
5. You can set out your style sheet as I have (i.e. put each property on a separate line) to make it easier to read.
6. Several of these values can be defined using the 'font' property, shown below:

#fontstyles {font: font-style font-variant font-weight font-size /line-height font-family;}

Replace each property listed with a value for that property. You do not have to include all the values, however, they must appear in the order listed above. Also note that the line-height must be preceded with a forward slash. For example:

#fontstyles {font: italic small-caps bold 12pt/2 "Trebuchet MS",sans-serif;}

 

List properties

The following are list properties:

• list-style-type - 'disc', 'circle', 'square', 'decimal', 'lower-roman', 'upper-roman', 'lower-alpha' or 'upper-alpha'
• list-style-image - 'url(address of picture)'
• list-style-position - 'inside' or 'outside'

#list1 {list-style: type position image;}

If the image does not load for some reason, the list-type will be displayed instead

 

Background properties

• background-color - a color name or hexadecimal
• background-image - 'url(address)'
• background-repeat - 'repeat', 'repeat-x', 'repeat-y' or 'no-repeat'
• background-attachment - 'scroll' or 'fixed'
• background-position - a length value or "plain English" value (see below)

#background {background: color image repeat attachment position;}

Things to note:

1. Setting 'repeat-x' will make the background repeat across the page (left to right), while 'repeat-y' will repeat it down the page.
2. Setting the attachment to 'fixed' means that when you scroll down, the text will move but the background will remain in position.
3. Plain English values: You need to set two values, one from "top, center, bottom" and one from "left, center, right"

 

Margin & Border properties

These properties set margins, padding and borders. To understand these you should think of a CSS element as a box, with text (or whatever) inside it. The border is the square line surrounding the box; the margin is the distance around the outside of the box, i.e. between the border and other content on the page; and the padding is the distance from the border to the content (text) in the element. You could also call this the margin around the text, if that helps (it may make things worse though!). Here are the various properties:

• width - a length value or percentage, for the width of the element
• height - length value, or percentage, for the height of the element
• margin-top - length value
• margin-right - length value
• margin-bottom - length value
• margin-left - length value
• padding-top - length value
• padding-right - length value
• padding-bottom - length value
• padding-left - length value
• border-color - color value
• border-style - 'solid', 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', or 'outset'
• border-width - 'thin', 'medium' 'thick' or a length value
• float - 'left' or 'right'

Note:

1. Although length values can be anything from pts to mm to in (or percentages in some cases), it is best to use pixels, as they are more universal.
2. Using the border-width property: typing one value will set the border for all four sides; typing two values will set the borders for the top/bottom and left/right pairs respectively; three values set borders for the top, left/right pair, and bottom respectively; and four values set borders for top, right, bottom, and left sides respectively. Got that? This also applies to the border-color property, and the general property values, shown below.
3. If you use the 'double' border-style, the border must be at least 3px wide for it to show, as the width value is for the whole border, not each line of the double border. The same applies to 'groove', 'ridge', 'inset', and 'outset'
4. The width and height properties do not take into account margins: these will increase the size the element takes up on the screen.
5. The 'float' property is used to wrap text around other text or images. For example, using float: right; will move that text to the right hand side of the screen, while any remaining text fills up the empty space on the left. The 'width' property should also be used with this.
6. Several border properties are not supported in either Internet Explorer or Netscape. Use the general border property instead, shown below.

#margin1 {all sides}
#margin2 {top/bottom left/right}
#margin3 {top left/right bottom}
#margin4 {top left bottom right}

#padding1 {all sides}
#padding2 {top/bottom left/right}
#padding3 {top left/right bottom}
#padding4 {top left bottom right}

#border {width style color}

 

CSS Positioning

CSS Positioning, or CSS-P is a great alternative to graphics or tables, as it allows elements to be displayed more quickly and positioned precisely. There are three types of positioning:

• static - the element displays in the normal position, and cannot be moved.
• relative - the element flows inline, but can be moved relative to it's original position.
• absolute - the element can be positioned anywhere on the page, independent of other elements.

The position type is set with the 'position' property:

#cssP {position: relative;}

This on its own will not do anything unless you define where you want the element positioned. To define where the element is on the page, use the 'top' and 'left' properties:

#absolute {position: relative; top: 151px; left: 37px;}
#relative {position: relative; top: -15px;}

The first rule will display an element 151 pixels from the top of the page and 37 pixels from the left, that is, from the very top left corner of the page. The second moves the text up 15 pixels from where it should be. Note the minus sign.

 

That's it!

That's all the basic CSS you will probably ever need to know. If you want to find out more, I recommend these sites:

The World Wide Web Consortium: http://www.w3.org/Style/
The Web Design Group: http://www.htmlhelp.com/reference/css

Have fun enhancing your web site!!