HTML : More about CSS
Understanding CSS rules
A CSS rule consists of two parts, the selector and the declaration. The selector determines the element(s) affected by the rule. The declaration specifies the action taken. When specifying a selector, you can narrow the affected element to only elements of a specific class or a specific id. When specifying elements of a specific class you use a period between the element and the class name.
element.classname
When specifying an element with a specific id you place a hash sign between the element and the id.
element#id
When the browser reads the selector, it knows to only apply the declaration to the elements specified by the selector. For instance,
p {color:red;}
tells the browser, ‘make all paragraph text red’. The selector,
p#a1 {color:green;}
tells the browser, ‘make paragraph a1’s text green’. The selector,
p.important {color:orange;}
tells the browser, ‘make all important paragraphs have orange text’.
The declaration is the actual style to apply to the selector. A declaration consists of an opening curly brace, the property, a colon, the property’s value and a closing curly brace. You can optionally include a semicolon if desired.
element#id {property:value}
or
element#id {property:value;}
If specifying multiple declarations for one selector, you include a semicolon between the declarations.
element#id {property1:value1;property2: value2;property3:value3}
You can also specify the same declaration for multiple elements. To do this, place a comma between the elements.
element, element {property:value;}
Specifying CSS Styles
You can specify CSS styles three different ways. First, you can include an external stylesheet in your HTML page.
<head>
<link href=”mystylesheet.css”
rel=”stylesheet” type=”text/css”/>
</head>
Second, you can include a style element in your HTML page’s header, and place the CSS formatting within the <style></style> tags.
<head>
<style>
p {border-style:solid;}
</style>
</head>
Third, you can include the style inline, directly in the tag as an attribute.
<p style=”border-style:dotted;”>
The order of precedence goes from styles set in an external stylesheet, to styles set in a style element, to styles set in an actual HTML tag. For instance, if you set an element’s colour in an external stylesheet to blue,
p {color:blue;}
but then set the same element’s colour to red in the page’s style element,
<head><style>
p{color:red;}</style></head>
the value from the style element would override the style set in the external stylesheet, and the colour would be red. If you then set the colour to purple in the tag,
<p style=”color:purple;”>
the in-line style would override the style set in the style element, and the colour would be purple.
Most CSS properties take a measurement unit as a value. For instance, you might want to set a paragraph’s font size.
p {font-size: value}
The property’s value can be a length or a percentage. Valid lengths include points (pt), picas (pc), centimetres (cm), inches (in), millimetres (mm), pixels (px), em space (em) and x space (ex).
You should reserve using absolute values for printing. Use relative values for display.
In the subsequent articles we would be learning more about the use of CSS in HTML web pages.
