boat

Focus 5

fundamental web design

Intro to CSS - Inline Styles

So, our webpages are pretty cool. We understand that every web page on Planet Earth has a structure that we must use.

All of our tags go inside the body section of the web page.

Some tags include:

tagdescription
bodytells us where the body section starts and ends
h1large heading
h2subheading
h3smaller subheading
h4even smaller subheading
pnormal paragraph text
iitalic
bbold
uunderline
imgused to place an image on the web page

But our pages are a little bland. Wouldn't it be great if we could do this:

<p></p>

<p>Hello</p>

<p style = " ">Hello</p>

<p style = "color:blue;">Hello</p>

Wow! We have just styled our webpage element, defined by the <p> tag!

Notice the structure of the style:

color:blue;

We can string styles together:

color:blue; opacity:0.7; font-size:14px;

Can you see the 3 styles?

Any tag can be styled. This kind of styling is called inline styling.

style name sample values
color red   yellow   pink   #ff0000
font-size 8px   24px   200%
font-family arial   chiller   courier new
opacity 0   1   0.6   0.8
background blue   green   #f0f0f0
text-align center   justify   right

Examples

Task - Inline styles

Follow these steps to create a webpage about Tokyo in Japan.

1. Get organised

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

2. Web Page

Download this html file and save it in your project folder.

3. Images

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

4. Main task

Follow these instructions carefully.

 
Open the webpage file in a text editor eg Notepad++
 
Open the webpage file in a web browser eg Chrome.
 
You can see that 2 images are not displaying. Can you fix the problem?
hint: check the src and any spelling mistakes.
 
Change the body background color from red to #f0f0f0
 
Remove the dashed border from the lanterns image.
Hint: simply remove the style from the image.
 
Apply this style to the h1 tag:

color:red;
 
Add this style to the h1 tag:

text-decoration:overline;
 
Add this style to the h1 tag:

border: 2px red dotted;
 
Add this style to the h1 tag:

padding:12px;
 
Play with the padding number. Change it from 12 to something else eg 50. What happens? Choose any number you like!
 
Apply this style to all of the p tags:

font-family:tahoma;
 
Apply this style to the td tags:

border:1px black solid; padding:5px; margin:5px;
 
Do some research and replace all of the XXXX with the correct information.
 
Embed a video about Tokyo where indicated.
 
Record this script:

Here are some useful phrases you can use in Tokyo.

  • Oishi means Delicious
  • Sayonara means Goodbye
  • Ikura des ka means How much is it?
  • Ureshii means Happy
  • Doko des ka means Where?

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. 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

Tokyo-1

Tokyo-2
x