Free technical help for digital creators - music, video, art, photography, graphic & web design

Style sheets by Matt Ottewill

style sheet

 

Style sheets are an important component of multi-page documents. Once defined, a style sheet can be used to automatically format, control and change the styling and positioning of text and other elements throughout an entire document (or web site). A Style sheet is made up of one or more defined styles and each style is made up from a number of properties (or attributes).

If a change to the type size of a sub-heading is required, for example, then that style is edited in the style sheet and the change will then "cascade" down throughout the entire document and update all sub-headings formatted with that style.

A style sheet consists of one or more styles. Therefore ... a style sheet is a collection of styles.

What programs use style sheets?

In general, all multi-page document creation applications will use style sheets, such as ...

  • Word (word processing)
  • AppleWorks & Pages (word processing)
  • QuarkXpress (page layout for graphic designers)
  • Adobe InDesign (page layout for graphic designers)
  • Dreamweaver (web site design)
  • Adobe GoLive! (web site design)

What is a style?

A style sheet will consist of one or more styles. Typically, each style will contain a number of attributes which together will define the appearence of one or more of the following ...

  • Character styling (the letters themselves)
  • Paragraph styling (line spacing, indentations, kerning etc)
  • Positioning
  • Box shapes, borders and backgrounds

Therefore .... a style is a collection of attributes.

What is a property (attribute)?

Each style will comprise a series of "properties" such as ...

  • Typeface family (eg Arial)
  • Typeface/font (eg Arial regular)
  • Typeface styling (eg Italic)
  • Type size (eg 10pt)
  • Type colour (eg black)
  • Background colour
  • Leading/line spacing (eg 12pt or double line)
  • Indentation
  • Position
  • Border
  • etc

Here is an example style (a sub-heading, h5) used on this web site ...

h5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: bold; color: #CCCCCC}

Read about the stylesheet format for web sites, CSS, here.