In your Lesson 3 folder,
create a single HTML document with the following components:
<h1>Heading</h1>
<h3>Sub-heading</h3>
<p>First
paragraph – Any text is fine</p>
<p>Second
paragraph – Any text is fine</p>
STEP 2
In the folder with your
webpage, create a text document. Rename
it to myStyles.css. This will contain
your styles.
Go to your html document and
add the line:
<link
rel="stylesheet" type="text/css"
href="myStyles.css" />
This line tells your
browser to use the rules in myStyles.css to display the document. |
In you CSS document, add the
following rule:
body{background-color:yellow}
Save your document and see
what effect it has had on your html document.
STEP 5
Add this rule:
h1{color:blue}
STEP 6
Now try changing both the
text colour and the background colour for all <p> tags.
p
{
color:blue;
background-color:pink
}
We can also set the text
colour and background colour for the body
body
{
background-color:green
color: white
}
Make the background repeat
in only one direction by using:
body
{
background-image:url('filename.jpg');
background-repeat:
repeat-x
}
Make a single background
image stay fixed in the center of your page:
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}