LESSON 03 – INTRO TO CSS

WORK

STEP 1

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.

STEP 3

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.

STEP 4

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

}

STEP 7

We can also set the text colour and background colour for the body

body

{

background-color:green

color: white

}

STEP 8

Make the background repeat in only one direction by using:

body

{

background-image:url('filename.jpg');

background-repeat: repeat-x

}

STEP 9

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;

}