Ten little known tricks with CSS.
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-size: 10pt}
- -->
</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}
There are a variety of properties that can be affected with CSS. The Web Design Group
maintains a summary of these properties and possible values. Among the ones they have documented are:
Consider some of those that might make your pages look different than others. For example, background color. Suppose
you want all examples of <H1> to have a particular background. You might use the following
code:
<STYLE TYPE="text/css">
<!--
- H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
- H1 {color:white; background-color:purple}
- -->
</STYLE>
|
Then, every time you use Heading Size, <H1>, you get white font on a purple background. Look at this
example. This means all of a certain kind of heading will look the same.
Or, for example,
"word spacing" which defines the amount of space between words. If you used it on only some items, like words
in italics, you can get some interesting effects. Consider this example which includes
only this paragraph, but also has the following style sheet commands added to those we
have already discussed.
<STYLE TYPE="text/css">
<!--
- H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
- H4 {font-size: 10pt}
- I { word-spacing: 0.4in }
- -->
</STYLE>
|
If you look at the example using Netscape 4.x, you probably see no
substantial differences. If you look at the example using IE or Netscape 6.0
you will see a big difference. This leads to the point that not every combination works in all browsers. Look here
for information about what combinations work in what browsers.
Sometimes you want to make changes in blocks of code to emphasize (or de emphasize) them.
In this case, you want to use the "SPAN" selector. It allows you to set a particular feature
globally and use it as you want. Consider the following code:
<STYLE TYPE="text/css">
<!--
- H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
- SPAN {font-size: 20pt; color:white; background-color:purple}
- -->
</STYLE>
|
This means that any text between the <SPAN> and the </SPAN> tags will be larger, white and on an
purple background. Look at the example where we used this definition in
the style commands AND applied the <SPAN> and the </SPAN> tags to this paragraph. Please note
that we also defined the <SPAN> and the </SPAN> tags on this page, but did not define
them in the style commands.
This example is defined using the <DIV> and </DIV> tags similarly to the <SPAN>
tags above. Notice the primary difference is the divider lines.
<STYLE TYPE="text/css">
<!--
- H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
- SPAN {font-size: 20pt; color:white; background-color:purple}
- DIV {font-size: 20pt; color:white; background-color:purple}
- -->
</STYLE> |
Another useful concept is that of "classes." Classes allow us to define rules for applying our styles in an easy way.
The best example is where we want to have a table with alternating color rows. In our style
area (still located in the heading), we define two classes as shown below.
<STYLE TYPE="text/css">
<!--
- tr.first {background-color:red}
- tr.second {background-color:yellow}
- -->
</STYLE>
|
Then, we would apply these classes as we define our table using the following code:
<center><table>
- <tr class=first><td><h4>This is the first row of the table.</td></tr>
- <tr class=second><td><h4>This is the second row of the table.</td></tr>
</table></center>
|
The result would appear as below:
This is the first row of the table. |
This is the second row of the table. |
You want more information? Check out W3C's overview of CSS.
|