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 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 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 EYWORDS CSS (Cascading Style Sheet) ~ 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 3. Save this into the same folder as your web page. 4. Add the line of code in bold below to the section of your own web page: My Cool Website! 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.

Tags  tags define divisions (or sections) of our page so we can apply different styles to different parts.  In html this looks like… tags define the start and end of a section in the. Some content would go in here. For example, paragraphs of information, pictures etc. Each needs an ID so the CSS know which one we are styling.

My Cool Website! Welcome to my website! Some info you’ve written YOUR TASK  Add 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 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 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?