HTML builds the structure of a page, but not its look. To colour or enlarge text we use a second language, CSS. It is written in a separate editor, and the browser applies it to the page.
A CSS rule has three parts: the selector (which element), then inside { } the property (what to change) and the value (how), with a colon between them and a semicolon after. Change red to blue:
h1 {
color: red;
}| Property | Changes | Example values |
|---|---|---|
| color | text colour | red, blue, navy |
| background-color | background colour | yellow, orange |
| font-weight | font weight | bold, normal, 100 … 900 |
| font-size | font size | 10px, 50px |
| text-align | text alignment | left, center, right |
One rule can hold several properties, one per line. Sizes are written in px (pixels):
h1 {
color: blue;
background-color: yellow;
text-align: center;
}
p {
font-weight: bold;
font-size: 24px;
}; after every line. And no space between the number and px: 24px, not 24 px.Classes
The selector p changes every paragraph. To pick out one paragraph, give it a class name in its start tag: class="sea", then in CSS write a dot before the name: .sea.
.sea {
color: blue;
}
.mountains {
color: green;
}A CSS comment goes between /* and */ (not <!-- --> as in HTML):
/* Sea in blue */
.sea {
color: blue;
}sea { } looks for a tag called <sea> and finds nothing; the correct form is .sea { }. The dot goes only in CSS, not in class="sea".Practice
Make the text of the p tag red (red).
Complete the rule so the h1 background becomes yellow (yellow).
h1 {
color: blue;
___: ___;
}In one rule for the p tag: set font-weight to 900, then font-size to 50px (in that order).
p {
}The CSS is ready. Give the first paragraph the class apple and the second the class watermelon.
<p>Apple</p> <p>Watermelon</p>
Colour each greeting by its class, in this order: .arabic lime, then .english purple, then .french navy.
Make the first line a CSS comment.
___ Change the text color to navy. ___
p {
color: navy;
}Style the class notice board with two rules in this order: (1) h1 with text-align center. (2) The exam class: colour red, then font weight bold.
Hint
Remember the dot beforeexam.Key points
- A CSS rule:
selector { property: value; }. color,background-color,font-weight,font-size(in px) andtext-align.- A class
class="x"in HTML matches.xin CSS; comments use/* */.