Adding Colour or Wallpaper
"To some of us, reading the manual is conceding defeat." (Jason Q)
Remember the Header section <head></head> tags in our example page that we've ignored so far?
Well, we're about to start adding information here.
The information we are going to add will relate to the way we want our page displayed - what background colour the page should have; what colour the text should be etc.
This sort of information is known as the page STYLE and can eiither be stored inside the web page markup itself or as a separate file. We'll be using the former method for now.
Open up your example web page in a text editor.
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>
Now add the following immediately BEFORE the </head> tag:
<style type="text/css">
body {
background-colour: #ccffcc;
color: #003300;
}
</style>
Your markup should now look like this:
<html>
<head>
<title>My First Page</title>
<style type="text/css">
body {
background-colour: #ccffcc;
color: #003300;
}
</style>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>
Now view the page in your web browser.
The background should now be a plain, pale green and the text is very dark green.
So, how did we do this?
<style></style>
The opening tag <style> tells the browser that it is about to receive some information relating to colour and text formatting. The addition of "type=text/css" tells it what form that information will be in.
CSS is short for Cascading Style Sheet - the W3C recommended method for incorporating such information into a web page.
Like most tags, there is an appropriate closing tag (</style>) to indicate when we've finshed supplying this information.
Inside the <style></style> tags
All style information follows the same format. First you tell the browser what part of the page you intend to describe. In our case, we are describing everything between the <body> </body> tags, so we begin by using the word:
body
The rest of the information gives specific instructions to the browser on what sort of display we want and is always enclosed between { and }.
Each line should include a single 'item', a colon (:), a space (for human readability), the colour or formatting information and, finally, a semi-colon (;).
For example:
background-colour: #ccffcc;
This tells the browser that the background of all text is to be set to pale green. Colours are referred to using hexidecimal codes ie a # followed by six letter and, or, numbers. You can find a list of colours and their associated codes here.
color: #003300;
This tells the browser that all text is to be displayed in dark green. Note the spelling of 'color' rather than 'colour'.
Add this altogether and you should end up with:
body {
background-colour: #ccffcc;
color: #003300;
}
Wallpaper
You can have a wallpaper/image background for your web page but be careful that it doesn't make the text difficult to read!
Download this background file by rightclicking the link and selecting Save Target As.. and place it in the same folder as your web page.
Edit your style information as follows:
<html>
<head>
<title>My First Page</title>
<style type="text/css">
body {
background-colour: #ccffcc;
background-image: url(paintblur.gif)
color: #003300;
}
</style>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>
Save and view your web page. You should now have a lightly patterned, yellow, background!