Cascading Style Sheets- part 2- Style Sheet Syntax
What Style Sheets can do
Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the colour attribute in HTML 3.2. Styles are normally saved in files external to your HTML
documents.
External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing a single CSS document.
A Web developer can define a style for each HTML element and apply it to as many Web pages as required. To make a global change, change the style in the style sheet, and all
elements in the Web are updated automatically.
Using CSS
Style Sheet Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
For example:
H1 {color: blue}
The selector is normally the HTML element/tag you wish to define (e.g. header tag <h1>), the property is the attribute you wish to change (e.g. color), and each property can take a
value (e.g. blue).
The property and value are separated by a colon and surrounded by curly braces. If the value comprises multiple words (e.g. sans serif) then put quotes around the
value:
p {font-family: "sans serif"}
You can also specify more than one property; each property should be separated by a semi-colon. For example to define a centre aligned paragraph, with a red text colour:
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on each line, like this:
p
{
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
The font-family property in the code above offers the browser several values to choose from; the browser will go down the line until it finds a typeface it recognizes. The first item
listed (Arial) is the preferred typeface, and the second item (Helvetica) is an alternate typeface in case the user's system doesn't have Arial.
The third item (sans-serif) is a generic style of font rather than a specific one--this is recommended as a last alternative because most systems have at least one
typeface in that generic family. If the browser doesn't find any matches, it will use its default font.
Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. Each header element will be green:
h1,h2,h3,h4,h5,h6
{
color: green
}
Other Selectors
A selector identifies the part of the document to which the formatting applies. Any HTML element can be a selector, but sometimes you want to be more specific in your style
definitions.
Suppose, for example, you have a table with many rows, and you want to format the rows several different ways. Using the <TR> element as your selector limits you to
one style definition, which would make all the rows look alike.
This is where classes and IDs come in handy. Once you define a class or ID, you can attach it to any HTML element within the document to apply a style, without
limiting the element itself to a particular style.
The Class Selector
A class is defined by giving it a name (always preceded by a period) and adding the standard style definition of properties and values inside curly brackets:
.classname {Style definition}
With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one centre
aligned paragraph in blue, and one centre aligned paragraph in red. Here is how you can do it with classes:
Defining:
.red-center {text-align: center;color: red}
.blue-center {text-align: center;color: blue}
Using:
In your HTML document you have to assign the class to the element i.e.HTML tag:
<p class="red-center">
This paragraph will be center aligned and red.
</p>
<p class="blue-center">
This paragraph will be center-aligned and blue.
</p>
The id Selector
IDs are used in basically the same way, except that they are preceded by a number sign (#) instead of a period:
#idname {Style definition}
However the id selector is different from the class selector in that an id selector always applies to only one element on a page whereas a class selector may apply to SEVERAL
elements.
Using an ID is like giving a selector a unique name, which comes in handy when working with scripts. If you are not working with scripts the convention is to use
classes instead of IDs as selectors.
The style rule below will match a p element that has the id value "red-center":
Defining:
p#red-center
{
text-align: center;
color: red
}
Using:
<p id="red-center">A paragraph which has the id selector "red-center" assigned</p>
