Elements of Style

  1. Selector (the html tag, i.e. p, b, li, tr, etc.)
  2. Declaration (the style to be assigned to that tag)
    1. Property (the type of style, i.e. font-size, background, left-margin, etc.)
    2. Value ( amount of that style to apply, i.e. 14pt, blue, 2em, none, etc.)

To link to an external style sheet, include the following tag nested inside the html head:

‹link rel="stylesheet" href="location/filename.css" type="text/css"›

Font & Text Styles

Specifying how fonts are displayed

{ font-family: }

  1. font name (i.e. courier, "Times New Roman", arial)
    • use lowercase spelling
    • put quotes around more-than-one-word names; use single quotes for inline declarations
    • for grouped declarations, put font-family last
  2. serif
  3. sans-serif

{ font-size: }

  1. points, ems, pixels
  2. keywords
  3. percentage (based on value of parent element

↑ Return to the top of the page ↑

{ font-weight: }

(bold and values if availabe in font)

{ font-style: }

(italics)

{ font-variant: }

(small-caps)

{ text-transform: }

(uppercase, lowercase, capitalize, none)

{ text-decoration: }

  1. underline
  2. overline
  3. line-through
  4. blink
  5. none--use this to remove the underline from hyperlinks

{ font: }

(shorthand for assigning font-size, line-height & font-family all at once)

↑ Return to the top of the page ↑

Paragraph alignment & spacing

{ word-spacing: }

(add space between words)

{ letter-spacing: }

(add space between letters)

{ line-height: }

(add space between lines)
  1. number (multiples of font size)--relative
  2. length unit (specific size)--fixed
  3. percentage (percent of font size)--relative

↑ Return to the top of the page ↑

{ text-align: }

(controls horizontal alignment of paragraph)
  1. left
  2. center
  3. right
  4. justify

{ vertical-align: }

(controls vertical alignment relative to parent element)

{ text-indent: }

(creates a first-line indent)

↑ Return to the top of the page ↑

Alignment

The Float Property

The float property allows you to flow or wrap text around any block-level element (html tags that define new paragraphs on their own, i.e. p, h1, blockquote, ul, etc.) or replaced element (i.e. images, plug-ins, etc.). This can be very useful for page layout and design because it allows for more flexibility with less coding than html tables.

The two float properties are defined as follows:

For a complete table listing all of the CSS properties available, visit the World Wide Web Consortium at www.w3.org.

↑ Return to the top of the page ↑

The CSS Box Model

Margin
Border
Padding
Block-Level Element

CSS puts an invisible container around every block-level or replaced element. Each box has padding, border, and margin properties that can be styled. Margins refer to the space outside the border, and padding refers to the space inside the border.

Margins, borders, and padding can be set independently on each side, using any unit of measurement. This is especially helpful in fine-tuning the look of a page by precisely controlling the spacing around each element.

In addition, borders can also be styled with the width, color, and style properties.

↑ Return to the top of the page ↑

Margins

{ margin-top: }

{ margin-bottom: }

{ margin-left: }

{ margin-right: }

{ margin: }

Borders

Width:

{ border-top-width: }

{ border-bottom-width: }

{ border-left-width: }

{ border-right-width: }

{ border-width: }

↑ Return to the top of the page ↑

Color:

{ border-color: }

Style:

{ margin-style: }

  1. solid
  2. double
  3. dotted
  4. dashed
  5. groove
  6. ridge
  7. inset
  8. outset
  9. none

Padding

{ padding-top: }

{ padding-bottom: }

{ padding-left: }

{ padding-right: }

{ padding: }

↑ Return to the top of the page ↑

Colors & Backgrounds

Colors can be specified in three ways using Cascading Style Sheets: with names browser colors, hexadecimal codes, and RGB values. This last option is especially helpful for users of graphic software, as this eliminates the need to translate RGB values into hexadecimal code. CSS also allows for a shorthand in hexadecimal codes that allows for three decimal places rather than 6.

The color and background properties are defined below.

{ background-color: }

{ background-image: url(*.gif) }

{ background-repeat: }

{ background-attachment: }

{ background-position: }

{ background: }

↑ Return to the top of the page ↑

Layout with CSS

The Position Property

CSS allows you to precisely position any element on the page. Using the position property, an element can be positioned according to the "normal flow" (static), relative to its normal position in the normal flow (relative), or absolutely, meaning it has been taken out of the normal flow.

Once an element has been positioned, its placement can then be specified in the page with measurements taken from the left, top, right, and/or bottom of the browser window (absolute postitioning) or relative to its normal position in the flow of the document (relative psotioning).

It is now possible with cascading style sheets to specify the amount of space an element should occupy, rather than filling the browser window as needed. CSS also allows for specification of how to display content that is too large for its containing box, as well as how to make an element invisible or crop a part of it. This feature is especially useful when combined with dynamic scripting that allows the element or cropped part to appear when the end user performs an action (i.e. mouseover).

When positioning elements on the page, it is possible to create overlapping elements. To control the order of where items appear in the stack, the z-index property can be specified on any and all relatively and absolutely positioned elements.

{ position: }

{ left: }

{ top: }

{ right: }

{ bottom: }

↑ Return to the top of the page ↑

{ width: }

{ height: }

{ overflow: }

{ visibility: }

{ clip: }

{ z-index: }

↑ Return to the top of the page ↑