Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
35 views

Introduction To HTML CSS

Here is a 117 character tweet summarizing today's CSS lesson: Learned how CSS can be used to control formatting of HTML pages like font styles, text alignment and colors without editing individual tags, making pages easier to update. #CSSisCool

Uploaded by

GadgetGlitchKill
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
35 views

Introduction To HTML CSS

Here is a 117 character tweet summarizing today's CSS lesson: Learned how CSS can be used to control formatting of HTML pages like font styles, text alignment and colors without editing individual tags, making pages easier to update. #CSSisCool

Uploaded by

GadgetGlitchKill
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Introduction to HTML

CSS
YEAR 7/8
SEPTEMBER 2021
Learning Objectives

To be able

 To understand how CSS can affect the formatting of a HTML page


 To understand the benefits of using CSS as opposed to formatting individual
HTML tags
Key Vocabulary:

 CSS, web page, web browser, attribute, formatting, text editor, curly brace
Complete the HTML code below.
<html> 

<head> 

<…………………….>
 My first webpage </title> 
</…………………….>

<body>

<h1>
 <font …………………=blue> Football Teams
</………………> </……> 
This is where the text will go to tell you all about my favourite

football team. I have supported this team since I was 8 years
old and I have been to see them play over 20 times.
<……………>

 </………………………...>

</………………………...>

 <html>

 <head>
 <title> My first webpage </title>
 </head>
  
 <body>
 <h1> <font color=blue> Football Teams </font> </h1>
 <p>
  This is where the text will go to tell you all about my favourite football team. I have
supported this team since I was 8 years old and I have been to see them play over 20
times.
 </p>
 </body>

 </html>
Task 1: What is CSS?

With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and laid
out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and
much more!
Task 2: Why is CSS useful?

Well that is where CSS comes in. CSS is short for 'Cascading Style Sheet'.
And one CSS style sheet can control the look and feel of hundreds, even thousands, of
HTML web pages.
Try this (b):

 Using your style sheet change the colour of H1 and H2


 Check your changes (save your style sheet first)
 Using your style sheet, change the background colour of the page
 Save your style sheet
Try this (d):

 Using your style sheet change the justification of H1, H2 and the paragraph text
 Your options are: text-align:left (right, center or justify)
 Check your changes
Do this:

 Write your page background colour command in your CSS sheet


 Sheet uploaded has the names of 140 colours that you can choose from
 Information:
 Use some or all of these CSS commands to format your h1 attributes:
 font-family: "Arial"; (you could try Verdana, Tahoma etc)
 font-size: 40px; (you choose the size)
 font-weight: bold; (you could choose 'normal', 'bolder' or 'lighter')
 text-align: center; (you could choose 'left', 'right', 'justify'. Remember the spelling)
 color: red;(you choose the colour. Remember the spelling)

 Do this:
 Go and set up your H1 CSS commands in your style sheet
 <head>
 <style>
 h1 {
 color: blue;
 font-family: verdana;
 font-size: 300%;
}
 p {
 color: red;
 font-family: courier;
 font-size: 160%;
 border: 2px solid powderblue;
 border: 2px solid powderblue;
 padding: 30px;margin: 50px;
 }
 </style>
 </head>
Write a ‘Tweet’ to sum up today’s lesson. Remember that
Tweets are limited to 140 characters, including spaces.

You might also like