CSS

Style sheets are made up of CSS rules that contribute to the design and placement of elements. Each CSS rule is made up of a selector and one or more declaration blocks. A declaration block consists of a property and a value.

CSS rule:

h1 {
color: gray;
font-weight: bold;
}

Selector: h1
Declaration: what is between the curly brackets
Properties: color & font-weight
Values: gray & bold

Selector { property: value; property: value; property: value;

Style sheets

The CSS rules can be written in a separate file (external style sheet) and linked to html documents, written in the head of a html document (embedded or internal style sheet) or the CSS rule can be set directly to one html element (inline style).

Linking :

<head>
<title> ........... </title>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>

Embedding :

<head>
<title> ........... </title>
<style type="text/css">

</style
</head>

Inline :

<a href:="http://www.nb.no" style="text-decoration: none"> National Library</a>

Selector types

Dreamweaver: The "New CSS Rule dialog box comes up when you click the + icon in the css panel. You can choose between several selector types. If you can use a html tag (element) for your selector, do it!

css dialog box

Class
- Use it when you cannot find an element to apply the css rules to, maybe you want some images to be aligned to the left and some others to the right, or you want a different look for your h1 headings on one particular page, or a special look for the first paragraph on your page etc. Use the same class rule as often as you want to and to any element you like
- You need to put a dot (full stop) . in front of the class name: .imgleft
Id
- Similar use as class but can only be used once in a file and only for one element. In the css file set a hash mark in front of the selector: #intro
Tag
- The preferred selector. Choose Tag in the pull down menu, all html elements are listed. Nothing needs doing in the html document unlike for class and id. Just find the tag you want for example: h1
Compound
- Used in any other instance for example for descendant selectors:
  #menu p which defines the look of a paragraph when it is within the menu div or grouped selectors for example: h1, h2, h3. Compound is also used for styling links, pseudo classes. Use the pull down menu and select a:link etc

The cascade

The cascade is the order in which the rules are applied.

Style sheets operate in a hierarchy in which certain sheets take precedence over others. In the absence of any other style sheet, the browser style sheet determines how the page looks.

Users can create user style sheets and set them as the the defaults in their browser preferences, and those styles, user style sheets, will take precedence over browser styles.

Author style sheets that we designers and developers create for our pages have the final authority over the look of the page.

Specificity

Some CSS rules win over others! The more specified or the closer it is, the more likely it is to "win".

body {color: red;}
p {blue;}

Inheritance

Inheritance is the process by which the value of a CSS property on one element passes down to a child element. Children inherit their parents.

<p>This is text in a <em>a single</em>paragraph</p>

A general rule of thumb is that child elements inherit text-related properties but not box-related properties.

The box model

box model

The box model is an essential CSS concept. Each block element generates a box, invisible by default, that can be given padding within to push the content away from the edges, and margins to hold it away from other elements. The values for these properties can be applied as global values for the box or as individual values for each side.

The width of a page or block element, div for example, is caculated by adding up the width of the content plus the margins, borders and padding.

CSS comments

It is good coding practice to include comments in your style sheets.

/* This is a comment in a style sheet explaining something */

Validation

Validate your css file http://jigsaw.w3.org/css-validator/

css formatting (Norwegian) http://www.buntz.no, click css
css formatting (English example css-file with comments)
css formatting (Norwegian example css-file with comments)
css formatting (css file used in the planet exercise)

Castro: http://www.elizabethcastro.com/html6ed/extras/
Castro: http://www.elizabethcastro.com/html6ed/examples/
W3Schools - courses: http://www.w3schools.com/ click CSS
W3Schools - tag lists: http://www.w3schools.com/tags/default.asp
Curriculum library studies HiO (inks not always active) in Norwegian:
http://www.hio.no/content/view/full/48576
http://www.jbi.hio.no/bibin/KoG1vev/ressurser/designhjelp.html