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?