quick questions 1. what does html stand for? 2. what are the three main languages of the web? 3....
TRANSCRIPT
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?
Spiderman ©Marvel Comics
Creating Web Pages (part 2)
Learning Objective:
Learning Outcomes:
Understand how CSS works with HTML to change the appearance of
a web page.
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 CSSJavaScript
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.css3. 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>
Note – NO capitals here!
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…
body{
}
This tells the CSS what part of the web page
we are styling.
Curly brackets are used to begin and end each
section of CSS.
color:
A CSS property can be assigned a value using
the colon :
All CSS statements must end with a
semicolon ;
rgb(251, 133, 195);
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 todifferent parts.
In html this looks like…
<div id=“box”>
</div>
<div> tags define the start and end of a
section in the
<body>.
Some content would go in here. For
example, paragraphs of information, pictures etc.
Each <div> needs an ID so the CSS
know which one we are styling.
<!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?