Saturday, March 21, 2009

Cascading Style Sheets

Learning about CSS Selectors in the CSS online tutorial

Selectors select (identify) HTML elements and apply a style to it. There are many selectors but the most important (common) ones are:

Type (Element) Selectors:
These selectors identify HTML based on the HTML type, such as body, p, h, etc. The CSS rule for a type is defined the the css file with the name of the type:

h1 {
background-color:black;
}

This rule will apply the defined style (background color is black) to all H1 heading elements.

Class Selectors:
These selectors identify HTML elements based on the class they belong to. The CSS rule for a class is defined in the css file with a .classname

.javacode {
font-size: 10pt;
}

This rule will be applied to all elements which have the class defined as javacode:


String s = new String("Hello World");


Id Selectors:
Id selectors select HTML elements based on the id of that element. An Id selector is defined in the css file as #idname

#prettyprint {
font-color: red;
}

This rule will be applied to all elements that have their id set to prettyprint


def s = 'hello'


One question that comes to mind is what happens if I have a rule defined for the class javacode and the id prettyprint, and I have an HTML element whose class is javacode and id is prettyprint. Which rule will take precedence?

I have asked this question as a comment on the blog post.

No comments: