boat

Focus 8

fundamental web design

More styling

So, we can style different elements in our webpage by using inline styles.

We can also style using an internal style section in our web document.

Here is an example web document:

<html>

<head>

<style>

p{

color:red;

font-family:Tahoma;

}

img{

border:red solid 1px;

border-radius:5px;

}

</style>

</head>

<body>

<p>This is a web page.</p>

<p>I hope you like it.</p>

<img src = "happycat.png"/>

</body>

</html>

Question!

What if I want some of my web document elements to follow a style rule, but not all of them?

For example, I want some of my <p> tags to be blue, not red.

Answer A

Just put an inline style into the element you want to be different eg:

<p style = "color:blue;">This is a web document!<p>

This is a good answer if there are only a few elements you want to change. However, what if there are many p tags you want to be blue? And then you change your mind! You want some p tags to be purple instead!

You will have to change blue to purple in a lot of elements and this takes time and can be frustrating!

Answer B

Design a rule in the <style> section of your page.

Then apply the rule to elements in your webpage!

Style rules in CSS are called classes. So, let's design a class:

<style>

p{

color:red;

font-family:Tahoma;

}

img{

border:red solid 1px;

border-radius:5px;

}

.bigRed{

color:red;

font-size:36px;

}

</style>

Note:

  1. The class is designed inside the <style> section of the web page.
  2. When designing a class you can choose any name to identify it eg bigRed or box1 or... anything!
  3. When defining a class, make sure you start with a .

Now that we have designed a class, we can apply it to any element in our web document. Here is an example:

See the Pen introToClasses by Mister Moosi (@mistermoosi) on CodePen.

1. Get organised

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

2. Images

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

click me

click me

click me

click me

3. Web Page

Download this html file and save it in your project folder. Open it in a web browser eg Chrome or Firefox or Safari or Explorer

4. Main task

Follow these instructions carefully.

 
Open the web document file in a text editor eg Notepad++
 
You have 4 images in your folder but only 3 are displaying on the web page.
Can you add the fourth image using a new <td> tag in the table.
 
In the <style> section of the web document, complete the design of img style as follows:
  • width:100%;
  • border-radius:100%;
  • border:1px black solid;
 
In the <style> section of the web document, complete the h1 style design as follows:
  • font-family:tahoma; font-size:32px; color:gray;
 
In the <style> section of the web document, create a body style as follows:
  • width:700px;
  • margin:auto;
 
Design a class called .centered in the <style> section of your web document. Use this css:

text-align:center;
 
Design a class called .abc in the <style> section of your web document. Use this css:

list-style-type:lower-latin;
 
Design a class called .blueBorder in the <style> section of your web document. Use this css:

border: 1px blue dashed;
 
Apply the centered class to the title and subtitle of the web document.
 
Apply the abc class to the <ul> tag which lists the four skills.
 
Apply the blueBorder class to the image of the painter and the carpenter.
 
Use this webpage to design a business card for Bob. Include this information:
  • Bob Barrett
  • @bbbuilder
  • bob@bobthebuilder.com
  • +44(0)765238624
 
Download your design in jpg format and save it in your project folder. Place it in your web document where indicated.
 
Apply the blueBorder class and the centered class to the business card image.
 
Make the image of the business card a hyperlink to this website: https://www.bobthebuilder.com/en-us/
 
Record this script:

Hi, this is Bob!

If you need to contact us, call plus four four zero seven six five two three eight six two four.

Alternatively, you can email be at bob at bobthebuilder dot com

We are here to serve you!


Export it as a mp3 file into your project folder.
 
Research the html audio tag and put your mp3 file into your webpage.

Extension

Do you have any more ideas? Add more content and/or style your page as you like. Create a new class and apply it whereever you want. Don't forget to use W3 Schools for ideas!

SUBMISSION

Submit your project folder as instructed by your tutor.

Tags

browser file tags body save h1 html h4 folder structure refresh image organisedexport embed

W3 SCHOOLS

Sample result

bob-1

bob-2
x