Scribd
Upload
35 views

Lesson 3

This document discusses Cascading Style Sheets (CSS) and how to apply CSS3 to web pages. It defines CSS as a language used to design HTML documents through separate style sheets containing property-value pairs that describe HTML elements. The document outlines CSS history, the different types of style sheets (external, internal, inline), CSS syntax using selectors and declarations, and common selectors like element, ID, class, and group selectors. It provides examples and notes on using CSS with HTML pages.

Uploaded by

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

Lesson 3

This document discusses Cascading Style Sheets (CSS) and how to apply CSS3 to web pages. It defines CSS as a language used to design HTML documents through separate style sheets containing property-value pairs that describe HTML elements. The document outlines CSS history, the different types of style sheets (external, internal, inline), CSS syntax using selectors and declarations, and common selectors like element, ID, class, and group selectors. It provides examples and notes on using CSS with HTML pages.

Uploaded by

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

Understanding Cascading Style

Sheets (CSS)

LESSON 3 – APPLYING CSS3 TO


WEB PAGES
At the end of the discussion, you should be able
to:
Define Cascading Style Sheets (CSS)
Identify the syntax and types of Cascading
Style Sheets (CSS)
Appreciate CSS.
What is CSS?
Cascading Style Sheets
 Is a language used for designing Hypertext Mark
Up Language (HTML) documents.

 A stylesheet is a separate line of codes containing


all properties and their values that are used to
describe an HTML document. Multiple styles can be
added in a single element.
HTML CSS
CSS Brief History
In 1994, Håkon Wium Lie of the European
Organization for Nuclear Research (CERN) saw the
necessity to develop the old idea of having a
stylesheet language for the web.

As a result, this grants web developers more control


over the design of their websites and revisions of web
browsers to support CSS.
CSS Brief History
Over the years, CSS has led
the development of new
generation browsers,
mobile browsing, web fonts,
and e-books.
CSS Styles
1. External Style Sheet
 Specifies or defined a style that can be applied to
multiple web pages.
CSS Styles
2. Internal Style
Sheet
 Specifies or
defined a style that
can be applied to
single web page.
CSS Styles
3. Inline Style Sheet
 Specifies or defined a style to a single element on a
web page.
CSS Order of Priority
INLINE STYLE
SHEET
EXTERNAL STYLE
SHEET
INTERNAL STYLE
SHEET
CSS Syntax
We can specify the style using the syntax:
selector { property: value; }
Selector Declaration Declaration
h1 { color: blue; font-size: 12px; }
Property Value Property Value
The Selectors
 Element Selector
 ID Selector
 Class Selector
 Group Selector
Element Selector
 Identifies the name of the element we want to
style.

 The same element are used with CSS, but we no


longer need to enclose it in angle brackets or < >.
Element Selector
ID Selector
 Has a unique name (in the whole document) that
identifies a single element for styling.

 When writing an ID selector, always begin with a


hash (#) followed by its name that does not begin
with a number.
ID Selector
Class Selector
 The class selector selects multiple elements we
want to style.

 When writing an class selector, always begin with a


period (.) followed by its name that does not begin
with a number.
Class Selector
Group Selector
 is a technique used to minimize codes in an HTML
document. It is used for elements that have the
same style.
Group Selector
Notes:
 You need to use the <style> </style> tag in internal
and style attribute in inline style sheet.
 In CSS, US Spelling is the standard to be used.
Example: color not colour.
 When saving CSS file, your file extension will
be .css instead of .html
 There’s no need for you to include HTML basic
structure when creating an external style sheet.

You might also like