CSS Guide

Basic Concepts

Element type as selector

The simplest selector is the element tag name. The rule will apply to a elements of that type unless overridden by succeeding rules.

      <style type="text/css">
        p {
          font-size: 0.9em;
        Paragraph one ...
        Paragraph two ...

Class attribute as selector

Class selectors are used to define style rules which apply to more than one element in a page. the class selector in the style sheet is a string preceded by a period. It is applied using an element’s class attribute. The period does not appear in the value of class.

      <style type="text/css">
        .example {
          color: brown;


      <p class="example">
        This is an example.

ID attribute as selector

ID selectors are used to define style rules which apply to only one element in the page. The ID selector in the style sheet is a string preceded by a hash mark (#) | and is applied to the element with the matching ID attribute. The hash mark does not appear in the value of ID.

      <style type="text/css">
        #i5 {
          color: brown;


      <p id="i5">
        This is text with an ID of ‘i5’.

Combined selectors

In order to restrict the scope of a rule, the type and class selectors can be combined.

      <style type="text/css">
        p.special {
          font-size: 0.9em;
        Paragraph one ...
      <p class="special">
        Paragraph two ...

Only the second paragraph is targeted. Incidentally, this construction is valid for id attribute selectors but would rarely make sense—there can only be one id of that name on the page.

Contextual selectors

Contextual selectors are used when styles should be applied to a given element only under specific circumstances. One example is descendant (parent-child): the style is applied only when the child element is in the specified parent.

      <style type="text/css">
        h1 em {
          color: red;


        This is <em>red</em>.
        This is <em>not</em>.


Grouping allows the author to assign a single style declaration to multiple elements.

      h1, h2, h3, h5 {
        color: purple;


CSS allows an author to leave comments in the style sheet. The format is identical to that used in most variants of C/C++.

      /* This is a comment. */


A child element inherits properties from its parent element.

Style sheet in page

Place the style sheet in head section

        <style type="text/css">
          /* ... style rules ... */

Linking to external style sheets

Place a link element in the head element.

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

Font Properties


<font-name> | serif | sans-serif | monospace | cursive | fantasy

Used to declare a specific font to be used | a generic font family | or both.

      body { font-family: Verdana, sans-serif; }


normal | italic | oblique

Selects between normal and italics (oblique).

      .answer { font-style: italic; }


normal | bold | bolder | lighter | <100 – 900>

Sets the weight of a font.

      .question { font-weight: bold; }


<length> | <absolute size> | <relative size> | <percentage>

Sets the size of the font.

Length units: mm | cm | in | pt | pc | em | ex | px
Absolute size names: xx-small | x-small | small | medium | large | x-large | xx-large
Relative size names: smaller | larger

      h2 { font-size: 200%; }
      h3 { font-size: 36pt; }


Shorthand property combining the other font properties. The order of values is important | and is as follows: font-style font-variant font-weight font-size/line-height font-family. Any of these values may be omitted.

      body { font: bold 12px/14px Georgia, sans-serif; }

Text Properties


none | underline | overline | line-through | blink

Sets text effects like underlining. Combinations of the values are legal.

      a { text-decoration: none; }
      a:hover { text-decoration: underline; }


none | capitalize | uppercase | lowercase

Changes the case of the letters in the element | regardless of the original text.

      h1 { text-transform: uppercase; }
      .title { text-transform: capitalize; }


left | right | center | justify

Sets the horizontal alignment of the text in an element. May only be applied to block-level elements.

      p { text-align: justify; }
      h4 { text-align: center; }


<length> | <percentage>

Sets the indentation of the first line in an element. Most often used to create a tab effect for paragraphs. Only applies to block-level elements; negative values are permitted.

      p { text-indent: 5em; }
      h2 { text-indent: -25px; }


<length> | <percentage>

Sets the vertical distance between baselines in an element. Negative values are not permitted.

      p { line-height: 18pt; }
      h2 { line-height: 200%; }

Color and Background Properties


Sets the color of a given element. For text | this sets the text color; for other elements | such as hr | it sets the foreground color.

      strong { color: #6C6; }


<color> | transparent

Sets the background color of an element. This background extends out to the edge of the element’s border.

      h4 { background-color: white; }



Sets an image to be the background pattern. In conjunction with the other background properties | may tile or repeat in one direction only.

      body { background-image: url(imgs/bg41.gif); }


repeat | repeat-x | repeat-y | no-repeat

Sets the repeat style for a background image.

      body { background-repeat: no-repeat; }


<percentage> | <length> | top | center | bottom | left | right

Sets the position of a background image | both single and repeated.

      body { background-position: top right; }


Shorthand property for the other background properties. The values can be written in any order.

      body { background: white url(bg41.gif) bottom repeat-x; }

Box Properties

margin-top | margin-right | margin-bottom | margin-left

<length> | <percentage> | auto

Sets the size of the top | right | bottom | and left margins of an element. Negative values are permitted.

      ul { margin-top: 0.5in; }
      img { margin-right: 30px; }


Sets the size of all the margins of an element. Negative values are permitted. The sequence of values is

      h1 { margin: 12px 0;}
      p { margin: 2em 2em 3em 2em; }

padding-top | padding-right | padding-bottom | padding-left

<length> | <percentage>

Sets the size of the padding for each side of an element. Negative values are not permitted.

      ul { padding-top: 0.5em; }


Sets the size of the overall padding of an element. Negative values are not permitted. See margin for sequence of values.

      h1 { padding: 2em 3em 4em; }

border-top-width | border-right-width | border-bottom-width | border-left-width

thin | medium | thick | <length>

Sets the width of the top border of an element | which will inherit the element’s background | and may have a foreground of its own (see border-style). Negative values are not permitted.

      img { border-top-width: 0.5in; }


thin | medium | thick | <length>

Sets the width of the overall border of an element | which will inherit the element's background | and may have a foreground of its own (see border-style). Negative values are not permitted.

      H1 { border-width: 2ex; }


Sets the color of the foreground of the border. The background is inherited from the element.

      #sidebar { border-color: #5E5E5E; }


none | solid | double | groove | ridge | inset | outset

Sets the style of the overall border of an element | using the color set by border-color.

      #sidebar { border-style: solid; }


Shorthand property which defines the width | color | and style of the overall border of an element.

      #sidebar { border: 1px dashed #5E5E5E;}

width | height

<length> | <percentage>

Used to set the width and height of block or replaced (images | objects) elements. Negative values are not permitted.

      .popup { width: 25%; height: 100px; }


left | right | none

Sets the float for an element | which allows other elements to flow around them.

      img.content { float: left; }


none | left | right | both

Used with float to specify whether other elements may not float beside it.

      div.clear { clear: both; }

Classification Property


inline | block | list-item | none

Specifies the type of box the element will generate.

      .hide { display: none; }



disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Used to declare the type of bullet or numbering system to be used in an unordered or ordered list. Applies to elements with a display value of list-item.

      ul { list-style-type: square; }
      ol { list-style-type: lower-roman; }


<url> | none

Replaces the bullet with a user-defined image.

      ul { list-style-image: url(../imgs/smbull.gif); }


inside | outside

Replaces the bullet with a user-defined image.

      ul { list-style-position: inside; }


Shorthand property for setting all list-styles at once. Applies to all elements with a display value of list-item.

      ul { list-style: square inside; }


Length Units

The following units are used by various properties to define size in absolute terms; i.e. | distances which will be consistent regardless of their context:

in inches
cm centimeters
mm millimeters
pt points (1/72 inch)
pc picas (12 points)

These units define lengths relative to the font-height:

em ems (height of font)
ex x-height (height of lower-case letter x)
% percent

The pixel unit is special; its size is determined by the display media.

px pixels
      .sidebar {
        width: 50px;
        margin-left: 2em;


#000 | #000000 | rgb(000, 000, 000) | rgb(0%, 0%, 0%) | <color names>

Used by various properties to define colors.

      color: #F0F;
      color: #FF00FF;
      color: rgb(100%, 0%, 100%);
      color: rgb(255, 0, 255);

Color Names

maroon (#800000) | red (#FF0000) | orange (#FFA500) | yellow (#FFFF00) | olive (#808000), purple (#800080) | fuchsia (#FF00FF) | white (#FFFFFF) | lime (#00FF00) | green (#008000), navy (#000080) | blue (#0000FF) | aqua (#00FFFF) | teal (#008080) | black (#000000) | gray (#808080) | silver (#C0C0C0)


Used by various properties to define the location of images. Partial URLs are interpreted relative to the style sheet, not the document.

      body { background-image: url(../imgs/picture.gif) }
      table { background-image: url(http://www.pix.org/lib1/pic278.gif)}

CSS positioning

There are three positioning schemes in CSS: normal flow (including relative positioning), float, and absolute positioning.


static | relative | absolute | fixed

Sets the way the element is positioned. static means normal flow is used.

top, right, bottom, left

<length> | <percentage> | auto

These are the box offsets. They set the position of the element’s edges. For absolutely positioned elements, this is relative to the document edge. (e.g. The page’s upper left corner is coordinate [0, 0]). For relatively positioned elements, this is a positive or negative offset from the default position.

The position can be specified either by a length unit (such as 200px) or as a percentage of the containing element’s width (such as 50% for half the parent element’s width).

auto specifies placement at the element’s default location.


<shape> | auto

Applies to absolutely positioned elements. The clipping area defines the part of the element which is visible. auto (the default value) makes the whole element visible.

The only clipping shape allowed is a rectangle, specified by the notation rect (<top> <right> <bottom> <left>). Each of <top> <right> <bottom> <left> is either a length unit (with coordinates relative to the element’s origin) or the value auto, which makes the element fully visible in that direction.

      p { clip: rect(5px, 40px, 45px, 5px); }


visible | hidden | scroll | auto

overflow specifies what happens when an element’s contents exceed the element’s height or width.

      .scroller {
        position: absolute;
        width : 100px;
        height: 10em;
        overflow: scroll;


visible | hidden

visibility determines whether an element’s content can be seen. This setting does not affect HTML layout; an element uses the same amount of space regardless of whether it is visible or hidden.

      #container2 { visibility: hidden; }


auto | <integer>

z-index specifies the element’s stacking level. It is set to an integer. The higher the value the higher up the stack the element is (i.e. closer to the user than lower values). auto lets the browser choose a default stacking order. A stacking context is generated by positioned element.

      #first {
        position: absolute;
        top: 100px; 
        left: 100px;
        z-index: 1; 
        color: yellow;
      #second {
        position: absolute;
        top: 103px; 
        left: 103px;
        z-index: 2; 
        color: lime;


Specifying media

      <style type="text/css">
        @import url(includes/screen.css) screen;
        @media print {
          /* style rules for print go here */

Media types

The following keywords are the recognized types of media.

all | braille | embossed | handheld | print | projection | screen | speech | tty | ty

Paged media

Page boxes: @page rule

Page boxes consist of a page area and a margin area. The :first, :left, and :right psuedo classes control which pages rules apply to; only margin properties may be used the margin area. Only absolute lengths are meaningful (e.g. in or pt).

@page {
  margin: 3cm;
@page:first {
  margin-top: 10cm;
@page:left {
  margin-left: 4cm;
@page:right {
  margin-right: 4cm;

page-break-before, page-break-after

auto | always | avoid | left | right

These rules control how pages break around generated boxes. The breaks ends layout in the current page box and starts a new one.


auto | avoid

Breaks inside elements: orphans and widows


Specify the minimum number of lines to leave at the bottom (orphans) or top (widows) of the page. The default is 2.