starting with HTML + CSS (Step 2: adding some colors)
You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)
We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.
We need to add a <style> element to the HTML file. The style sheet will be inside that element. So go back to the editor window and add the following five lines in the head part of the HTML file. The lines to add are shown in red.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>My first styled page</title> <style type="text/css"> body { color: purple; background-color: #d8da3d } </style></head><body>[etc.]The first line says that this is a style sheet and that it is written in CSS (“text/css”). The second line says that we add style to the “body” element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.
Style sheets in CSS are made up of rules. Each rule has three parts:
- the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;
- the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set;
- and the value ('purple' and '#d8da3d'), which gives the value for the style property.
The example shows that rules can be combined. We have set two properties, so we could have made two separate rules:
body { color: purple }body { background-color: #d8da3d }The background of the body element will also be the background of the whole document. We haven't given any of the other elements (p, li, address…) any explicit background, so by default they will have none (or: will be transparent). The 'color' property sets the color of the text for the body element, but all other elements inside the body inherit that color, unless explicitly overridden. (We will add some other colors later.)
Now save this file (use “Save” from the File menu) and go back to the browser window. If you press the “Reload” button, the display should change from the “boring” page to a colored (but still rather boring) page. Apart from the list of links at the top, the text should now be purple against a greenish yellow background.
How one browser shows the page now that some colors have been added.
Colors can be specified in CSS in several ways. This example shows two of them: by name (“purple”) and by hexadecimal code (“#d8da3d”). There are about 140 color names and the hexadecimal codes allow for over 16 million colors. Adding a touch of style explains more about these codes.
Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Step 6 | Step 7
(W3)
Related Posts
Related Posts |
