CSS Syntax Overview

Original Author(s): Markus Gylling

A Cascading Style Sheet is made up of a series of rules, that applies to a selected set of elements in a document.

The following rule selects all heading level 1 elements and sets their color to red.


  h1 {color:red}

Each rule has two parts - the selector and the declaration.


  h1 {color:red}

Left side of the rule: the selector.
The part of the rule that selects the parts of the document to which the styles should be applied
Right side of the rule: the declaration.
A combination of a CSS property and a property value. Declarations always begin and end with curly braces.

Go to the folder CSS Practice 1 folder.
Open "default.css" in a Text Editor.
Open "sound_proof_book.html" in a browser.
Add a rule that makes all level 2 headings dark blue.

Refer to The CSS color Names

A single style can be applied to multiple elements via grouping. Use comma to delimit selectors.


  h1, h2 {color:red}

Modify the rule from the previous practice so that it applies to level 1 and level 2 headings.

Multiple declarations can be grouped as well. Use semicolon to separate the declarations.


  h1, h2 {color:red; background-color: grey}

Modify the previous rule so that level 1 and level 2 headings have dark blue text and a grey underline.

A rule specified for an element is can be inherited by that elements children, unless otherwise is specified. This is called inheritance.

Note: Not all values are inherited. In the CSS specification, each property defines whether it is inherited or not.

Modify the stylesheet so that all elements in the document use arial font. Tip: the CSS property for font is called font-family.

Note: For non-inherited properties the "inherit" property can be explicitly set.


  selector {property: inherit}

Class and ID attributes can be used in selectors.

The syntax for selecting elements with a certain class attribute value includes using the period sign:


  element.class-attribute-value {properties}

The syntax for selecting an element with a certain id attribute value includes using the hash (number) sign:


  #id-value {properties}

In the stylesheet, add a rule that makes elements with class "audiolink" appear with bold font. Tip: the CSS property to use is called font-weight.

Add a rule that makes the heading with rule id="copyright" appear within a thick red border.

You may also select an element based on that element being a child of a specific parent. To do this, the child element name is appended to the parent element name, separated with a space (" ") character.


  parent child {properties}

Add a rule in the stylesheet that makes <strong>elements that are children of <p> elements with class "notice" appear in italics. Tip: the CSS property to use is called font-style.

Line length
The style rule to shorten line lengths can be expressed:

  selector {
    margin-left: 20%;
    margin-right: 20%;
  }

Line height
The style rule to increase distance between lines can be expressed:

  selector {
      line-height: 200%;
  }

Word spacing
The distance between words can be increased to enhance the readability of the text.

  selector {
      word-spacing: 0.3em;
  }

Letter spacing
In the same way as for words, the distance between letters can be increased to enhance the readability of the text.

  selector {
      letter-spacing: 0.2em;
  }

Font size
In many user agents, the user is able to adjust the size of the text. However, it may sometimes be beneficial to provide a default font size that is somewhat increased.

  selector {
      font-size: 120%;
  }

Non-serifed fonts
Many users reading text with western characters prefer fonts without serifs. Font types can be set using the following property.

  selector {
      font-family: arial,verdana, sans-serif;
  }

Text color and Background color: contrast
Some users prefer reading text with inverted or adjusted colors, for example yellow text and black background. In either case, it is important to always keep a high contrast between foreground and background color.
Colors can be set using the following property.

  selector {
      color: yellow;
      background-color: black;
  }

Block-level separation: margin/padding
The separation of block level elements (by adding additional space), and the separation of text content from its surrounding box is controlled via the margin (outer space) and padding (inner space) properties.

  selector {
      margin-top: 2em;
      padding: 0.5em;
  }

Create rules that increase the apparent readability of the sound proof book document.

Which levels of the cascade are the most suitable for accessible styling of content?

  • Always make sure the created CSS is valid
  • Always compatibility-check using browsers or dedicated compatibility-checking tools

W3C Online Validation

W3C Jigsaw CSS validator

DAISYpedia Categories: 


This page was last edited by PVerma on Saturday, August 28, 2010 20:07
Text is available under the terms of the DAISY Consortium Intellectual Property Policy, Licensing, and Working Group Process.

Comments

see subject line, but also: Link to CSS sample 1 folder and The CSS color chart lead to the wrong places

Refer to The CSS color chart

I flagged this as needs updating due to broken links and hard-to-follow training content.