Transcript tags

Quick Questions
1. What does HTML stand for?
2. What are the three main languages of the Web?
3. What is the purpose of the <body> tags?
4. Why do we indent different sections of our code?
Creating Web
Pages (part 2)
Spiderman ©Marvel
Learning Objective:
Understand how CSS works with HTML to
change the appearance of a web page.
Learning Outcomes:
 GOOD: Change the colours of the page
background and text using CSS.
 BETTER: Use <div> tags to define and style
separate areas of the page and experiment
and apply different border styles to CSS
boxes.
 BEST: Apply a font using Google Fonts.
K E Y W O R D S
CSS
(Cascading Style Sheet)
~
<div> tags
~
border
~
RGB value
What is CSS?
One of the main languages of the Web:
HTML
CSS

JavaScript
HTML defines the content. (we covered this last lesson.)
CSS defines the appearance.
JavaScript defines the behaviour.
Getting Started
Before you can start styling your web page with
CSS you need to do the following:
1. Open up your index.html page in Notepad++
2. Create a new file in Notepad++ called…
style.css
Note – NO
capitals here!
3. Save this into the same folder as your web page.
4. Add the line of code in bold below to the <head> section
of your own web page:
<head>
<title>My Cool Website!</title>
<link rel="stylesheet" href="style.css">
</head>
Structure of CSS
CSS is a bit different to html. Instead of
open and close tags it uses brackets{ } to
begin and end a section.
To define a style for our body we would do this…
This tells the
CSS what
part of the
web page we
are styling.
A CSS property can be
assigned a value using
the colon :
body{
color rgb(251, 133, 195);
Curly brackets are used
All CSS statements
:
}
to begin and end each
must end with a
section of CSS.
semicolon ;
body{
color: rgb(195,1,112);
background-color: rgb(251,133,195);
}
YOUR TASK
 Type these styles into your
CSS document. You can play
with the RGB values to
change the colours. Search
online for an “RGB Colour
picker” to help you.
<div> Tags
<div> tags define divisions (or sections) of
our page so we can apply different styles to
different parts.
In html this looks like…
<div> tags
define the
start and
end of a
section in
the <body>.
<div id=“box”>
</div>
Each <div> needs an
ID so the CSS know
which one we are
styling.
Some content would
go in here. For
example, paragraphs
of information,
pictures etc.
<!DOCTYPE html>
<html>
<head>
<title>My Cool Website!</title>
</head>
<body>
<div id=“box”>
<h1>Welcome to my website!</h1>
<p>Some info you’ve written </p>
</div>
</body>
</html>
YOUR TASK
 Add <div> tags to your web
page to define a section of
the html. Add the bits in
bold into your own page
body{
color: rgb(195,1,112);
background-color: rgb(251,133,195);
}
div#box{
width: 80%;
margin-left: 10%;
background-color: rgb(253,195,225);
}
YOUR TASKS
 Give your box some style by adding the section in bold to
your CSS document.
 Use www.w3schools.com to find out how to give
your box a border (hint: put the code underneath the
background colour)
EXTENSION
 Apply a font to your web page using “Google Fonts”.
Quick Questions
1. What does CSS stand for?
2. What are <div> tags used for?
3. Give an example of a type of border style that can be
applied using CSS.
4. Who managed to successfully apply a font using
Google Fonts?