|
| Why we use Cascading Style Sheets on the web |
 |
- CSS allows the coder to go beyond the few limited HTML tag attributes and give additional formatting to text, tables, images, and more that couldn't be accomplished with HTML alone.
- Using CSS creates consistency across multiple web pages and keeps the HTML code cleaner by defining styles at the top of an HTML document (between the <head></head> tags, or in a separately saved (external) document.
- CSS = cleaner code = less code = smaller file sizes = quicker load times.
|
| Components of a CSS rule |
|
|
p {font-size: 14px;}
p.font_red {color: #cc0000;}
.font_bold {font-weight: bold;}
| p |
The HTML selector. This tells the browser which HTML tag we're adding a style to. |
| { } |
Curly brackets. Contains the style's defination. |
| font-size: |
The attribute. Tells the browser what aspect of the selector we're changing. Always followed by a colon (vs. an equals sign, as used with HTML). There can be multiple attributes within a css defination. |
| 14px; |
The attribute value. Tells the browser how exactly how to display the attribute. Always followed by a semicolon. |
| p.font_red |
HTML selector with a class. When an HTML selector is followed by a period and a description (.font_red), this is called a class. Classes that are attached to an HTML selector can only be used with that HTML tag. |
| .font_bold |
A class by itself. Classes don't need to be attached to an HTML selector. When a class is by itself, it can be used with any HTML tag. |
The above CSS rule states that all paragraphs will have a font size of 14px. When you code the HTML, all you need is the tag <p>.
- Sample 1:
<p>This paragraph will automatically have a font size of 14 pixels.</p>
To apply the red font color, as defined in our p.font_red class, we have to tell the browser which paragraphs we want red.
- Sample 2:
<p class="font_red">This paragraph will have a red font.</p>
<p class="font_red">This paragraph will be red with a <span class="font_bold">bold red font</span> in the middle.</p>
Because style sheets are cascading, Sample 2 will also automatically have a font size of 14px, because we defined that all paragraphs would be that size. When we added the span of "font_bold" our font also remained red, because the paragraph is displaying the "font_red" class.
|
| In-line styles |
|
|
One way to use CSS is in an in-line style. This is NOT the recommended way to use CSS, but occasionally you may need to modify an HTML tag in the HTML code on the fly.
When coding an inline style, we use the HTML tag attribute style="", placing the CSS defination within the HTML quotes.
<p style="padding-top: 7px;">This paragraph will have 7 pixels of padding above it.</p>
|
| Embedded styles |
|
|
A better way to use CSS is in an embedded style, where all the CSS rules are contained at the top of each HTML page. This is better than using in-line styles, but you'll need to copy and paste your css onto everypage in your website, so this doesn't really save you on code or file size.
When coding an embedded style, we place the CSS rules between the HTML <head></head> tags, inside <style></style> tags.
<head>
<title>My Web Page</title>
<style>
p {
font-size: 14px;
color: #000099;
}
.intro {
font-size: 20px;
font-weight: bold;
color: #cc0000;
text-align: center;
}
</style>
</head>
<body>
<p class="intro">This paragraph will be centered, red, bold, and have a font size of 20px.</p>
<p>This paragraph will be dark blue and have a font size of 14px.</p>
</body>
|
| External styles |
|
|
The most efficient way to use CSS is in an externally saved document that contains all your css rules, that each of your HTML pages then link to.
When coding an external stylesheet, we only need to list the CSS rules. The document is then saved with the extension .css
p {
font-size: 14px;
color: #000099;
}
.intro {
font-size: 20px;
font-weight: bold;
color: #cc0000;
text-align: center;
}
When linking your external stylesheet to your HTML pages, the link goes between the <head></head> tags, just like where you'd place an embedded stylesheet. (Note that the link tag is self-closing.)
<head>
<title>My Web Page</title>
<head>
<link rel="stylesheet" href="filename.css" type="text/css" />
</head>
<body>
<p class="intro">This paragraph will be centered, red, bold, and have a font size of 20px.</p>
<p>This paragraph will be dark blue and have a font size of 14px.</p>
</body>
|
|
