Understanding selectors, css properties and values

Cascading Style Sheets are composed of three elements: selectors, CSS properties and CSS values.

What are selectors ?

Selectors describe the element or Markup Tag to be styled on a .html web page. Some common selectors are: body, h1, h2, h3, h4, h5, h6, p, a and a:hover. Selectors can be defined in your CSS Style Sheet as a div with the # number symbol ( e.g. #banner{ ) or as a class with a . period ( e.g. .title{ ).

What are div selectors ?

# div selectors identify a particular element or tag and can only be used once in an .html web page.

# div selector example


#header{

What are class selectors ?

Class selectors identify more than one element or tag and can be used several times in an .html web page.

. class selector example


.title{

What are CSS properties ?

CSS properties describe the property in the element or tag that is to be styled. Some common CSS properties are: background, color, font, margin, and padding.

CSS property example


font:

What are CSS Values ?

CSS values define or style the CSS property in the element or tag. CSS values ( e.g. 0.8em verdana, arial, sans-serif; ) always follow the CSS property ( e.g. font: ) in the CSS style sheet. CSS values can be defined in long form ( e.g. #ffffff; ) or in shorthand ( e.g. #fff; ) property value.

CSS value example


bold 200% "Times New Roman", Verdana, Arial, sans-serif;


Continue with: Understanding the basics of XHTML


Go back to: Top of page