Cascading Style Sheets (CSS) provide a powerful way of controlling style in HTML documents. Style can be set on your pages in three ways. Your HTML page can refer to an external stylesheet (*.css file). Also, it can have style rules in the HEAD section of the document, which augment or override the rules in the external stylesheet. Finally, you can place rules "inline" (within HTML tags, as you learned in the last lesson), which will augment or override rules from the two other methods. Inline style rules override style rules in the HEAD section, which override style rules from a master stylesheet, thus the cascading nature of style.
The Style attribute (inline Style) is placed directly within a specific HTML tag. It formats everything controlled by that tag. However, you can insert Style Rules that control all of the same kind of tags on the entire page. This way, you insert a Rule once, and it formats all like tags for the entire page.
You may recall that the Head section of the file is where you put commands that give information to the browser, but don't display anything. This is where we put Style Rules. To insert style rules, you first need to insert an HTML Style tag, like so:
<html>
<head>
<style type="text/css">
<!--
-->
</style>
<title></title>
</head>
<body>
</body>
</html>The 'type' attribute tells the browser this is a text file (as compared to binary) and the file is using css (Cascading Style Sheets). On all of your pages, you will always use 'type=text/css'.
Although not required, it is a good idea to insert Comment tags between the Style tags. Some older browsers don't recognize the Style tags, and as mentioned in Lesson 2B, the tags will be ignored. Then a bunch of nonsensical script will appear on the page. If an older browser ignores the Style tag, it will not ignore the Comment tag. Anticipating this, early programmers designed Style to ignore HTML comments when inserted between Style tags.
We are now ready to learn Style Rules. Here is a sample rule:
A word of explanation on the syntax -- selector { property:value; } -- First type the selector (name of the HTML tag you want to control). In the example we typed 'p', which means we want anything between the start and end Paragraph tags to be affected. Next type left '{' and right '}' braces (not parentheses). Then, between the braces, put your Style declarations, which consist of the property, followed by a colon, followed by the value, followed by a semicolon. (Try it). Here is a list of Style properties that control font formatting:
| color: | sets the font color. (try it) |
| font-family: | sets the font family (similar to the font face attribute learned in Lesson 3C). In addition to the font names you can find on your computer, generic values are also available. 'Serif' (similar to Times New Roman), 'sans-serif' (similar to Arial), 'cursive' (similar to Lucida Handwriting), and 'monospace' (similar to Courier). If any of the generic names are used, the viewer's computer will substitute an appropriate default font (try it). For a list of Web-Safe fonts, see this page |
| font-style: | possible values are 'normal', 'italic' or 'oblique'. Note that depending on the font chosen, 'italic' and 'oblique' may appear the same. (try it) |
| font-variant: | possible values are 'normal' and 'small-caps'. (try it) |
| font-weight: | possible values are 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800' or '900'. The numerical values are various shades of bold, with '100' being least and '900' being most. '400' is the same as 'normal' and '700' is the same as 'bold'. (try it) |
| font-size: | possible values are the absolute size ('#px', '#pt', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large' and 'xx-large'), the relative size ('larger' and 'smaller'), length ('#em' or '#ex') and percentage ('#%'). '#px' is the number of pixels. '#pt' is the number of points (72pt = 1 inch; most standards for correspondence use 11pt or 12pt). '#em' is the height of an upper-case letter 'M' of the default font (1em = medium, 1.5em = large). '#ex' is the height of a lower-case letter 'x'of the default font. 150% = larger. (try it) For more on units of length, go here. To practice style declarations, go here. |
| line-height: | possible values are 'normal', a number, a length or a percentage. 'Normal' is the default. This declaration sets the distance between two adjacent lines' baselines. A number is the multiplier of the current line-height. 1.2 = 1.2em = 120%. (try it) |
You can also combine several of the font declarations into one compact declaration, such as font: italic lighter small-caps 11pt/14pt "Times New Roman". Type the font property followed by a colon, then type the values of the font-style, font-weight and font-variant properties in any order (if you omit any of them, default values will be used). Separate each value by a space with no punctuation. Then type the value for the font-size property, followed by a '/', followed by the value of the line-height property (either or both can be omitted). There can be no spaces between the font-size and line-height values. Lastly type the value of the font-family property (which is also optional). (try it).
Open sample2.htm, and within the Head section, insert Style tags:
<html>
<head>
<style type="text/css">
<!--
-->
</style>
<title>XYZ</title>
</head>
<body>
blah blah blah
</body>
</html>
Now add some style rules:
<style type="text/css">
<!--
body { color:fuchsia; font-family:"Times New Roman";
font-style:italic; font-variant:small-caps;
font-weight:bold; font-size:14pt }
-->
</style>
. . .
How does your web page look now? Try changing some of the values and see what happens. Try deleting some of the declarations and see what happens.
- In this lesson, we learned about these HTML tags:
- <style> and </style>
- and about these Style properties:
- color
- font-family
- font-style
- font-variant
- font-weight and
- font-size
For more information on the topics of this Lesson, see this site and this site for general style information, and this site for fonts.
