Style sheets represent one or more rules that guided how HTML is interpreted.
Style rules have two parts: the selector and the declaration.
The rules always appear in the "heading" section (between <HEAD> and </HEAD> and
before the <BODY ....> section of the page), and must be identified as style rules.
<STYLE TYPE="text/css">
<!--
- Selector {property: value}
- -->
</STYLE> |
In this example,
- <STYLE TYPE="text/css"> and </STYLE> identify the code
as style rules.
- The selector are the HTML tags to which the rule will apply.
- Any HTML tag can be a selector. For example, the heading tag, <H1> is the selector
in the example below. Note, you do not put the pointed brackets (<, and >) around
the selector in the style commands.
H1 {font-family:"arial"}
- Multiple selectors can be assigned to the same declaration by separating them
with commas. For example, if you wanted to control the font family of <H1> and <H2>
your statement would be:
H1, H2 {font-family:"arial"}
- The declaration identifies the property that will be affected by the
style rule and the value to be assigned to that property.
- Declaration/value pairs are always put in "curly braces" { } For example,
H1 {font-family:"arial"}
- You must put a colon (:) after the declaration to indicate the beginning of the value. In the example above,
the declaration is 'font family' and the value is '"arial"'. Fonts and font families
are the only thing around which one puts quotes.
- Multiple declarations can accompany a given selector. If you have multiple declaration/value pairs, these are separated by a semicolon (;).
For example, if you wanted to control not only the family, but also
the color of the heading tag, <H1>, your statement would be:
H1 {font-family:"arial"; color:purple}
- Note, the <!-- and --> do not really have an impact on the style sheet.
These are HTML code for "the beginning of a comment" and "the end of a comment," respectively,
within the style block. Their real purpose is to keep browsers that are not able to handle style
sheets from misinterpreting the code in between them. That is, if the browser
does not know how to process style sheets, it will take everything between these
two tags as a comment, and thus ignore them.
- If you would like to comment on your style rules, you begin the comment with /*
and end the comment with */. For example,
H1 {color: purple} /*this turns all first level headings purple*/
This particular page has a simple style sheet as shown below.
<STYLE TYPE="text/css">
<!--
- H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
- H4 {font: 16pt}
- -->
</STYLE>
|
The first command simply causes all text that is governed by a "heading tag" to use the font-family of
"arial," So, if I eliminate the heading tag use with a </font>, we get a font face change
like this.Or, look at the example page that does not have the first line of the style
command in it at all.
The second command makes the <h4> tag always appear at 10 point. See an example of a page that uses
22 point instead. he only difference in the pages up until that point is that I substituted the following code in the
style sheet.
H4 {font-size:22pt}
|