Quick Questions 1 What does HTML stand for
- Slides: 12
Quick Questions 1. What does HTML stand for? 2. What are 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 Comics
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 þJava. Script HTML defines the content. (we covered this last lesson. ) CSS defines the appearance. Java. Script 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 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 must } to begin and each end with a semicolon ; section of CSS.
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> <head> <title>My Cool Website!</title> </head> <body> <div id=“box”> <h 1>Welcome to my website!</h 1> <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. w 3 schools. 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?