[Main Site Page: Freeing the Mind]
[Cascading Style Sheets: Contents]
[Previous: Creating Style Sheet Files]
[This Page: Selectors]
[Next: Declarations]
This page deals with:
Selectors, Properties, Values, Declarations
Background Images, and
A statement is simply a line in a cascading style sheet. This line is often a rule or an HTML comment. This is an example of a statement, or if you like a rule:
BODY {background-color: #66cc99; }
The above rule consists of a selector (BODY), properties (background-color) and values (in this case, #66cc99). We could also say that a rule contains a selector and a declaration. The declaration is the properties and values for the given selector. So BODY is the selector and
{background-color: #66cc99; }
is the declaration.
A selector is a reference to the HTML in your document. For example, rules applied to paragraphs have the selector P. And rules applied to the body have the selector BODY. For a simple selector, it is the same as the HTML code without the angle brackets. So <A> is A!
BODY {background-color: #66cc99; }
This is the rule for a green background colour. The whole page would look like this.
At the top is the statement, or rule, to create this green paragraph. It is actually written in the style-sheet. The selector is BODY and the property is background-color. Its value is #66cc99, which is the colour of this section. Did you notice the curly brackets which enclose the property? You would always use these curly brackets to write rules in an external style sheet or in an embedded style sheet. (But not with an inline style!)
Here is the code for a background image. We write the selector, BODY, and in curly brackets we write code for the image, in this case the URL fireringd.gif.
BODY {background-image: url(fireringd.gif);
This is an example of what the whole page would look like, if the above rule were put in a
style sheet. The selector is BODY, the property
is background-image and its value is url(fireringd.gif).
Using style sheets we can specify the page margins. We can use a percentage value. We can make the value negative, if we want, say, the heading indented. In the example below the heading is indented 10% and the page has 15% margins on both sides.
(Notice the heading is indented -10%)
Margin
BODY {background-image: url(fireringd.gif);
margin-left: 15%;
margin-right: 15%}
The above is an example of what the whole page would look like, if the rule were put in a style-sheet. Here you see the left- and right-margins. The above statement or rule has three properties:
Each of these has the values shown above.
You can use:
margin: 15%
For margins all round the page!
Let's look at some declarations now.
| Contents |