Focus 6

fundamental web design

CSS - the <style> section

We can style elements in our webpages! Click an element to view the style.

<h1>Welcome to my page.</h1>

<h3>- by mistermoosi</h3>

<p>I was born in Vietnam.</p>

<p>I stayed in Ho Chi Minh City.</p>

<p>Welcome to my page</p>

Great! But there is an issue - look at all of the elements using the <p> tag. What if the web designer has a change of heart?

What if we now want to use arial instead of chiller?

That's right. We have to edit each line of html, changing arial to chiller.

It's no big deal!

However, if there are many p tag elements on our page, it will be time-consuming to make changes. Also, human error could mean we mess things up!

So, one brilliant solution to this problem is to create a <style> section in our webpage.

This new section should be placed inside the <head> section:

<html>

<head>

<style>

</style>

</head>

<body>

<p>I was born in Vietnam.</p>

</body>

</html>

Inside the style section, we can style our different types of element:

<html>

<head>

<style>

color:red;

font-size:8px;

font-family:arial;

}

</style>

</head>

<body>

<p>I was born in Vietnam.</p>

</body>

</html>

As you can see, we need the name of the tag and 2 curly brackets for each style that we create.

}

Then, we can type the styles that we want to apply to the tag between the curly brackets:

font-size:8px;

}

We can add many styles to one tag by using css:

color:red;

font-size:8px;

font-family:arial;

}

Then we can start to style other tags too!

h1{

color:red;

font-size:48px;

font-family:chiller;

}

img{

border:2px solid pink;

}

h2{

color:orange;

font-size:36px;

font-family:Tohoma;

}

Now, if we want to change the style of the p elements in our page, we only need to change the information in the style section!

Task

Follow these steps and let's style a webpage.

1. Get organised

First, let's set up a project folder for Focus 6.

2. Download the html file

Download this file. It is a web page that you will work on.

Save it in your Focus 6 project folder and open it in a text editor.

3. Images

Download these 2 images and save them in your project folder.

click me

4. guitar.jpg

In the web page document, find the comment about guitar.jpg and write a line of html to display the image in the correct place.

4. Main task

You are going to complete the design of the webpage. Open it in a browser - you can see it looks very bland. Let's give it some style!

CSS style section guideline		description
p		Make all p text color white and use the font-family comic sans ms.
h1		Make all h1 text orange color with a font-size of 48px. Also, style h1 elements to be text-align:center
h2		Make all h2 text yellow color and font-family Chiller.
li		Make the bulleted list yellow with a font-size of 24px.
img		The images should have a solid, orange border with a thickness of 2px.

Challenge

Figure out how to make club.jpg the background of the body. Yes! You can style the body tag! It should be non-repeating and cover the whole body of the webpage.

Your final page should look something like this:

SUBMISSION

Submit your project folder as instructed by your tutor.

CSS - the <style> section

Task

1. Get organised

2. Download the html file

3. Images

click me

click me

4. guitar.jpg

4. Main task

Challenge

SUBMISSION

Tags