!
Spot the mistakes in the HTML
<!doctype html>
<hmtl>
<head>
<h1>Sample webpage</h1>
</head>
<body style="colour:green;">
<title>My website</title>
<para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
</body>
</hmtl><!doctype html>
<hmtl>
<head>
<h1>Sample webpage</h1>
</head>
<body style="colour:green;">
<title>My website</title>
<para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
</body>
</hmtl>Spot the mistakes in the HTML
Know how to add basic styles to make webpages more interesting by making use of stylesheets
Be able to test a webpage to see that the CSS applied to a webpage works
<html>
<head>
<title>My webpage</title>
</head>
<body>
<p>Hello everyone!</p>
</body>
</html>
<html>
<head>
<title>My webpage</title>
<style>
p { color : green; }
</style>
</head>
<body>
<p>Hello everyone!</p>
</body>
</html>
The selector
The properties and property values
Describes what we want to style
Describes how we want to style it
p {
color : green ;
}
p {
color : green ;
}
Describes what we want to style
Describes how we want to style it
The selector
The properties and property values
p {
color: green;
font-size: 20pt;
}
p {
color: lightblue;
font-size: 20pt;
}
body {
background-color: gray
}
h1 {
background-color: red;
color: white;
border: 2px green solid;
font-size: 14pt;
}
head {
background: green;
}
<html>
<head>
<title>My website</title>
<style>
h1 {
background: green;
}
</style>
</head>
<body>
<h1>I'm green!</h1>
</body>
</html>
<html>
<head>
<title>My website</title>
</head>
<body>
<p style="color:green">I'm green!</p>
</body>
</html>
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>I'm green!</p>
</body>
</html>
Open the sample webpage. Your task is to make it look more like the second webpage. You will need to modify the CSS of the webpage to achieve this.
Write down five things you’d like to see on your webpage using CSS. For example:
Now add these five things to your webpage
Remember to keep testing your webpage in Google Chrome
If you finish, try adding an external stylesheet to each page of your website – making your website similar across every page.
Answer the following questions:
Why is CSS used?
What ways can CSS be added to a website?
Write down the CSS property that would change the following:
Font
Font size
Background image
