|
Syntax
The CSS syntax is made up of three parts: a selector, a property
and a value:
selector {property: value}
The selector is normally the element/tag you wish to define, the
property is the attribute you wish to change, and each property
can take a value. The property and value are separated by a
colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: If you wish to specify more than
one property, you should separate each property with a
semi-colon. The example below shows how to define a center
aligned paragraph, with a red text color:
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 }
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 }
The class Attribute
With the class attribute you can define different styles for the
same element. Say that you would like to have two types of
paragraphs in your document: one right-aligned paragraph, and
one center-aligned paragraph. Here is how you can do it with
styles:
p.right {text-align: right}
p.center {text-align: center}
You have to use the class attribute in your HTML document:
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
You can also omit the tag name in the selector to define
a style that can be used by many elements:
.center {text-align: center}
In the code below both the h1 element and the p element
are classed with "center". This means that both of the elements
will follow the rules in the ".center" selector:
<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned.
</p>
The id Attribute
The id attribute has to be unique on the page. There can
only be one element with a given id in a document.
They are marked in the HTML document with id instead of class:
<p id="intro"> This paragraph will be right-aligned. </p>
The id attribute can be defined in two ways. It can be defined
to match all elements with a particular id, or to match only one
element with a particular id.
In this example the id attribute will match all elements with
id="intro":
#intro { font-size:110%; font-weight:bold; color:#0000ff;
background-color:transparent }
In this example the id attribute will match only p elements with
id="intro":
p#intro { font-size:110%; font-weight:bold; color:#0000ff;
background-color:transparent }
CSS Comments
You can insert comments in CSS to explain your code, which can
help you when you edit the source code at a later date. A
comment will be ignored by the browser. A CSS comment begins
with "/*", and ends with "*/", like this:
/* This is a comment */
p { text-align: center; /* This is another comment */ color:
black; font-family: arial }
|