Lesson 5 - styling pages with css

LEARNING OUTCOMES

ASPIRE: To be able to modify other page attributes, such as font for the web page

CHALLENGE: To be able to change the background colour of a web page

TASK 1: PRACTICE USING CSS

CSS lets us make our HTML pages look great. In the example below, you have two files. One is called index.html and one is called style.css

We need to link together these files. To do this, copy and paste the following code so that it is on the line underneath the <title> tags on the index.html page.

<link rel="stylesheet" href="style.css">

If you have done this correctly, you will see that the whole page changes colour, so does the text.

Now click on the style.css file. Your challenge is to change the colour of the background and the text.

TASK 2: CREATING A WANTED POSTER

To practice your CSS skills, you are now going to make a wanted poster look better.

Click on the “style.css” tab. You’ll notice that there are already CSS properties for the div containing the different parts of the poster.

div {

    text-align: center;

    overflow: hidden;

    border: 2px solid black;

    width: 300px;

Let’s start by altering the text-align property:

text-align: center;

What happens when you change the word centre to left or right?

How about the border property?

border: 2px solid black;

2px in the code above means 2 pixels. What happens when you change 2px solid black to 4px dotted red?

Change the width of the poster to 400px. What happens to the poster?

Using what you have already learned about CSS, make the background yellow.

task 3: setting up HTML and css in notepad

Create a new folder in your Computer Science folder called "HTML and CSS"
Inside that folder, create two files using Notepad (reminder on Lesson 1 if you have forgotten how to do this).
- index.html
- style.css

Your files should include the code below:

index.html

<!DOCTYPE html>

<html>

<head>

<title>Styling Web Pages Using CSS</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>This is a page that uses HTML and CSS!</h1>

<p>CSS allows us to make our websites better, by changing how things look. If we want to make a change to lots of pages at the same time, all we need to do is change one line of code in the style.css file of the website. If Instagram wanted to change their font, they only need to do that in one line of code of their style.css document.</p>

</body>

</html>

style.css

body {

    background-color: lightblue;

h1 {

    color: white;

    text-align: center;

p {

    font-family: verdana;

    font-size: 20px;

CHANGING THE CSS TO MAKE IT LOOK EVEN BETTER

Now that you have set up your web page to use CSS, we can experiment. Test out adding these lines of code in your CSS file. Make sure to put lines of code in between the { } squiggly brackets!

Task 1: Change the background color to a colour of your choice. If you would like a very specific colour, you can use this link to get the colour codes.

Test the following and make a note of what each does:

Change the h1 style to be aligned to the left. What does it do?
Add a line of code to the h1 element to change the font-size to 50px.
Add this line to the body element: width: 50%;
Add this line to the h1 element: text-transform: uppercase;
Add this to the h1 element: text-shadow: 3px 2px black;
Add this to the p element: font-style: italic;
Add this to the h1 element: font-family: impact;
Add the following code to your CSS document:

.top {

background-color: purple;

padding: 20px;

If you have made this changes correctly, yours should look something like mine:

task 4: CREATING AN ADVERT

Create a new folder in your Computer Science folder called "Advert"
Inside that folder, create two files using Notepad (reminder on Lesson 1 if you have forgotten how to do this).
- index.html
- style.css

Now, using the success criteria below, use all of the skills you have learnt to create the webpage that is shown to the right.

Extension:

Using this website link, can you create the CSS code to centre align the image, click here to visit the website.

index.html

Webpage title is "Advert for Tartan Paint"
Biggest heading states "Tartan Paint for Sale"
Image inserted with height 310px and width 460px (https://goo.gl/K2XtTc)
Second largest heading states "Buy it Now: £1,000,000"
Third largest heading states "Description"
Paragraph text states "The best quality tartan paint available, when painted on a wall it gives a perfect check pattern"
Paragraph text states "If you wish to see how to perfectly apply Tartan paint click here for a YouTube video
"here" is hyperlinked to the following address (https://www.youtube.com/watch?v=z1RMVG5Tk6E)

style.css

body background colour is #CCCCCC and includes a 2px solid black border
the largest heading is colour red, font impact and center aligned
the second largest heading is colour red, font verdana and center aligned
the third largest heading is colour green and font verdana
the paragraph text is font verdana and size 20px

Report abuse