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>
<img src = "hcmc.png" />

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?


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.

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.


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:


Submit your project folder as instructed by your tutor.


browser file tags body save h1 html h4 h2 structure refresh h3 organised