CSS Lesson
Presentation
•
Computers
•
University
•
Medium
karthika shanmugam
Used 1+ times
FREE Resource
20 Slides • 6 Questions
1
Cascading Style Sheets (CSS)
Lesson 6
Web Development
Computer Science Discoveries
2
Sample Website
Check out this web page.
If you wanted to create a page
like this...
● What do you already know
how to do?
● What do you still need to
learn how to do?
Web Development Lesson 6 - Warm Up
3
Cascading Style Sheets (CSS)
Lesson 6
Web Development
Computer Science Discoveries
4
Sample Website
Check out this web page.
If you wanted to create a page
like this...
● What do you already know
how to do?
● What do you still need to
learn how to do?
Web Development Lesson 6 - Warm Up
5
Question of the Day
How can we change the style of
text on a web page?
(e.g. color, font size, italics)
Web Development Lesson 6 - Warm Up
6
Web Development Lesson 6 - Activity
Key Vocabulary
CSS - Cascading Style Sheets; a language used to describe
how HTML elements should be styled
CSS Selector - the part of a CSS rule-set that defines which
HTML elements the style should be applied to
Rule Set- The block of code that gives rules for a particular tag
7
8
Web Development Lesson 6 - Activity
How is the style of a web page different from structure?
Why might you want your web page to have a certain style?
9
Facts about CSS
The style sheet is linked between the head tags. Remember, we said important stuff goes here that you can't necessarily see on the page.
Helps with page consistency. It makes piece of content between specific tags the same.
10
Web Development Lesson 6 - Activity
Intro to CSS
11
Example of CSS Rule Set
h1 {
color: red;
font-size: 24px;
}
12
Multiple Choice
What is the primary purpose of HTML?
Style
Structure
WYSIWYG
None of the Above
13
Above you see the CSS rule set labeled with terms that describe each part
Diagram of a CSS Rule Set
14
Multiple Choice
What is the primary purpose of CSS?
Style
Structure
WYSIWYG
None of the Above
15
Multiple Choice
What does CSS stand for?
Computer Standard Sequencing
Computer Styles Standing
Cascading Style Sheets
Calendar Styles Stellar
16
Multiple Choice
Below, P represents the Paragraph tag in HTML.
P {
color: purple;
}
What part of the ruleset is the P?
Value
Selector
Element
Rule set
17
Multiple Choice
Below, P represents the Paragraph tag in HTML.
P {
color: purple;
}
What part of the ruleset is "purple"?
Value
Selector
Element
Rule set
18
Multiple Choice
Below, P represents the Paragraph tag in HTML.
P {
color: purple;
}
What is this piece of code called?
Value
Selector
Element
Rule set
19
RGB Colors
Example of RGB Colors:
h1{
color: rgb( 0 , 0, 0);
}
h1{
color rgb (red, green, blue)
}
20
21
Web Development Lesson 6 - Activity
How does the web page know what stylesheet it
should be using?
22
Example of Linking CSS in an HTML Document
<head><link rel="stylesheet" href="myfirststyles.css"></head>
23
Web Development Lesson 6 - Activity
HTML vs CSS
What are the differences
between HTML and CSS?
HTML
CSS
24
HTML vs CSS
Can be used in an HTML document
Display and design of HTML design
Easier site maintenance
Cascading Style Sheets
Can not be used in a CSS document
content and structure of page
Hypertext Markup Language
25
Web Development Lesson 6 - Wrap Up
CSS Properties
Property
What it Changes
Example
color
The color of your text
color: maroon;
font-family
Which font to use
font-family:fantasy;
font-size
The size of your text
font-size: 20px;
text-align
The alignment of your text
text-align: center;
text-decoration
Additional style
text-decoration: underline;
letter-spacing
Adds extra space between letters
letter-spacing: 5px;
text-shadow
Adds a shadow to text
text-shadow: 3px -3px;
26
Web Development Lesson 6 - Wrap Up
Key Vocabulary
CSS - Cascading Style Sheets; a language used to describe
how HTML elements should be styled
CSS Selector - the part of a CSS rule-set that defines which
HTML elements the style should be applied to
Cascading Style Sheets (CSS)
Lesson 6
Web Development
Computer Science Discoveries
Show answer
Auto Play
Slide 1 / 26
SLIDE
Similar Resources on Wayground
21 questions
Results and discussion
Presentation
•
University
21 questions
1.1(a) System Concept
Presentation
•
12th Grade
19 questions
Pengenalan AI Dan Canva
Presentation
•
University
25 questions
01 Python Basics
Presentation
•
University
20 questions
Staffing II
Presentation
•
University
18 questions
Historia del internet
Presentation
•
Professional Development
20 questions
CAUSATIVE FORM
Presentation
•
12th Grade
19 questions
Module 1 Lesson 3A: Storage Devices
Presentation
•
12th Grade
Popular Resources on Wayground
5 questions
A Home on the Shore
Quiz
•
3rd Grade
28 questions
US History Regents Review
Quiz
•
11th Grade
6 questions
A Horse Tale
Quiz
•
3rd Grade
20 questions
Math Review
Quiz
•
3rd Grade
10 questions
Juneteenth History and Significance
Interactive video
•
5th - 8th Grade
20 questions
Dividing Fractions
Quiz
•
5th Grade
55 questions
A Long Walk to Water Final Review
Quiz
•
6th - 8th Grade
10 questions
Equation Word Problems
Quiz
•
7th Grade