SlideShare ist ein Scribd-Unternehmen logo
1 von 63
Downloaden Sie, um offline zu lesen
Web Design Principles
5th
Edition
Chapter Four
Introducing Cascading Style Sheets
Objectives
When you complete this chapter, you will be able to:
• Recognize the benefits of using CSS
• Build a basic style sheet
• Use inheritance to write simpler style rules
• Examine basic selection techniques
• Apply basic selection techniques
• Use class and id selectors
• Use the <div> and <span> elements
• Use other selectors
2Web Design Principles 5th
Ed.
Recognizing the Benefits of
Using CSS
3
The Evolution of CSS
• CSS was developed to standardize display
information
• CSS was slow to be supported by browsers
• Newer browsers offer more complete support
• Latest release is CSS3
• CSS3 is not yet evenly supported
Web Design Principles 5th
Ed. 4
CSS Style Rules
• In CSS, style rules express the style characteristics for
an HTML element
• A set of style rules is called a style sheet
• Style rules are easy to write and interpret
5Web Design Principles 5th
Ed.
CSS Style Rules
• Style rules are composed of two parts: a selector and a
declaration
• The selector determines the element to which the rule
is applied
• The declaration details the exact property values
6Web Design Principles 5th
Ed.
7Web Design Principles 5th
Ed.
CSS Style Rules
• The declaration contains a property and a value
• The property is a quality or characteristic
• The precise specification of the property is contained in
the value
• CSS includes a wide variety of different properties,
each with a specific number of values
8Web Design Principles 5th
Ed.
9Web Design Principles 5th
Ed.
Combining CSS Style Rules with
HTML
You combine CSS with HTML in three ways:
• Inline style
• Internal style sheet
• External style sheet
10Web Design Principles 5th
Ed.
Principles of Web Design 5th
Ed. 11
Using External Style Sheets
• External style sheets let you specify rules for
multiple Web pages
• These are text documents that contain style rules
• External style sheets have a .css extension
12Web Design Principles 5th
Ed.
Linking to an External Style Sheet
• The link element lets you specify an external style
sheet
• It is used within the <head> section of a document
<head>
<title>Sample Document</title>
<link href="styles.css"
rel="stylesheet" type="text/css" />
</head>
13Web Design Principles 5th
Ed.
Using Internal Style Sheets
• Internal style sheets are contained within the
<style> element
• The style element is contained within the <head>
section of the document
• Style rules contained in an internal style sheet only
affect the document in which they reside
<head>
<title>Sample Document</title>
<style type="text/css">
h1 {color: red;}
</style>
</head>
14Web Design Principles 5th
Ed.
Using Inline Styles
• You can define styles for a single element with the
style attribute
• The style attribute can be used to override a style
that was set at a higher level
• The style attribute is useful for testing styles during
development
• This is the least used method of applying CSS
styles
• <h1 style="color: blue">Some Text</h1>
15Web Design Principles 5th
Ed.
Writing Clean CSS Code
• Write CSS code that is consistent and easy to read
• Correct but hard-to-read:
p {font-family: arial, helvetica, sans-serif; font-size:
85%; line-height: 110%; margin-left: 30px;}
• Better:
p {
font-family: arial, helvetica, sans-serif;
font-size: 85%;
line-height: 110%;
margin-left: 30px;
}
• Use comments in your code
16Web Design Principles 5th
Ed.
Using Inheritance to Write Simpler
Style Rules
Using Inheritance to Write Simpler
Style Rules
• Elements in an HTML document are structured in a
hierarchy
• Parent elements contain child elements
• Elements can be both parent and child elements
• The CSS properties inherit from parent to child
• The property descriptions list whether a property is
inherited
• You can style multiple document elements with just
a few style rules using inheritance
18Web Design Principles 5th
Ed.
19Web Design Principles 5th
Ed.
Using Inheritance to Write Simpler
Style Rules
• Specific style rules:
<style type="text/css">
h1 {color: red;}
p {color: red;}
ul {color: red;}
em {color: red;}
li {color: red;}
</style>
• Using inheritance:
<style type="text/css">
body {color: red;}
</style>
20Web Design Principles 5th
Ed.
Examining Basic Selection
Techniques
Examining Basic Selection
Techniques
• In this section, you will review style rule syntax and
learn about the following basic selection
techniques:
– Using type selectors
– Grouping selectors
– Combining declarations
– Using descendant selectors
22Web Design Principles 5th
Ed.
Using Type Selectors
• The selector determines the element to which a
style declaration is applied
• Type selectors are the simplest form of selector
• They select every element in the document that
matches the style rule
• In the following example, all h1 elements are red
23Web Design Principles 5th
Ed.
24Web Design Principles 5th
Ed.
Grouping Selectors
• You can group selectors to which the same rules
apply
• Specific style rules:
h1 {color: red;}
h2 {color: red;}
• Grouping selectors:
h1, h2 {color: red;}
25Web Design Principles 5th
Ed.
Combining Declarations
• You can state multiple property declarations for the
same selector
• Specific style rules:
p {color: blue;}
p {font-size: 125%;}
• Combining declarations:
p {
color: blue;
font-size: 125%;
}
26Web Design Principles 5th
Ed.
Using Descendant Selectors
• You can select elements that are descendents of
other elements
• Selecting only <em> elements that are contained
within <p> elements
p em {color: blue;}
27Web Design Principles 5th
Ed.
Using the Universal Selector
• Universal selector lets you select groups of
elements
• Selecting all children of the dead element:
div * {font-family: sans-serif;}
28Web Design Principles 5th
Ed.
Using Class and ID Selectors
Using Class and ID Selectors
• You will learn to select elements of an HTML
document using the following methods:
– The class selector
– The id selector
– The <div> and <span> elements
– The pseudo-class and pseudo-element selectors
30Web Design Principles 5th
Ed.
Using the Class Selector
• The class selector lets you write rules and give
them a name
• You can apply that name to any element you
choose
• The class attribute lets you apply the style rule
name to an element
• The period (.) flag character indicates the selector
is a class selector
31Web Design Principles 5th
Ed.
32Web Design Principles 5th
Ed.
Using the Class Selector
• Style rule:
.intro {font-size: 125%; font-family:
sans-serif;}
• Applied in document:
<p class="intro">This is the first
paragraph of the document. It has a
different style based on the
"intro”class selector.</p>
33Web Design Principles 5th
Ed.
34Web Design Principles 5th
Ed.
Using the id Attribute Selector
• The difference between id and class is that id
refers to only one instance of the id attribute value
within a document
• The ID attribute is used to identify layout sections of the
page
• The ID attribute uses a pound sign (#) flag character
35Web Design Principles 5th
Ed.
36Web Design Principles 5th
Ed.
Using the id Attribute Selector
• Style rule:
<p id="copyright">This is the copyright information
for the page.</p>
• Applied in document:
<p class="intro">This is the first paragraph of the
document. It has a different style based on the
"intro” class selector.</p>
37Web Design Principles 5th
Ed.
Using the <div> and <span>
Elements
Using the <div> and <span>
Elements
• The <div> (division) and <span> (span of words)
elements are designed to be used with CSS
• They let you specify logical divisions within a
document that have their own name and style
properties
39Web Design Principles 5th
Ed.
Working with <div> elements
• Use <div> with the class and ID attributes to create
logical divisions on a Web page
• A division with an id named column as the selector:
div#column {
width: 200px;
height: auto;
padding: 15px;
border: thin solid;
}
Applied in the document:
<div id="column">This division displays… </div>
40Web Design Principles 5th
Ed.
Working with Span Elements
• The span element lets you specify in-line elements
that have their own name and style properties
• In-line elements reside within a line of text
41Web Design Principles 5th
Ed.
Working with Span Elements
• Style rule:
span.logo {
color: white;
background-color: black;
}
• Applied in document:
<p>Welcome to the <span class="logo">Wonder
Software</span>Web site.</p>
42Web Design Principles 5th
Ed.
43Web Design Principles 5th
Ed.
Using Other Selectors
Using Attribute Selectors
• Attribute selectors let you select an element based
on whether the element contains an attribute
• Elements can be selected based on a specific
value the attribute contains
45Web Design Principles 5th
Ed.
Using Attribute Selectors
• Attribute selectors match against attributes and
their values
• To select this element:
<img src="images/home.gif" title="home"
alt="Home navigation button" />
using attribute selectors, you could use the value
that the title attribute contains, as shown:
img[title=home] {border-color: red;}
46Web Design Principles 5th
Ed.
Using Pseudo-Class and Pseudo-
Element Selectors
• Pseudo-classes select elements based on
characteristics other than their element name
• For example, you can change the characteristics of
hypertext links with pseudo-classes
• Pseudo-elements let you change other aspects of a
document that are not classified by standard
elements such as the first letter or line of a
paragraph
47Web Design Principles 5th
Ed.
48
Using the Link Pseudo-Classes
• The link pseudo-classes let you change the style
characteristics for four different hypertext link
states
• These pseudo-classes only apply to the <a>
element with an href attribute
Web Design Principles 5th
Ed.
49Web Design Principles 5th
Ed.
Using the Link Pseudo-Classes
• Because of the specificity of the pseudo-class
selectors, you should always place your link
pseudo-class in the following order:
1. Link
2. Visited
3. Hover
4. Active
50Web Design Principles 5th
Ed.
51
Using the Link Pseudo-Classes
• The following rules change the colors of the
hypertext links:
:link {color: red;}
:visited {color: green;}
Web Design Principles 5th
Ed.
52
Using the :hover Pseudo-Class
• The :hover pseudo-class lets you apply a style
that appears when the user points to an element
with a pointing device
a:hover {background-color: yellow;}
Web Design Principles 5th
Ed.
53Web Design Principles 5th
Ed.
54
Using the :first-letter Pseudo-
Element
• Use the :first-letter pseudo-element to apply style
rules to the first letter of any element:
p:first-letter {
font-weight: bold;
font-size: 200%;
}
Web Design Principles 5th
Ed.
55Web Design Principles 5th
Ed.
56
Using the :first-line Pseudo-Element
• The :first-line pseudo-element works in much the
same way as :first-letter
• It affects the first line of text in an element:
p:first-line {text-transform:
uppercase;}
Web Design Principles 5th
Ed.
57Web Design Principles 5th
Ed.
Understanding How the Cascade
Affects Style Rules
• To cascade means that multiple style sheets and
style rules can apply to the same document
• Only one rule can apply to an element
• The CSS cascading mechanism determines which
rules apply based on three variables:
– Specificity of the selector
– Order of the rule in the style sheet
– Use of the !important keyword
58Web Design Principles 5th
Ed.
CSS3 Selectors
59Web Design Principles 5th
Ed.
60Web Design Principles 5th
Ed.
61Web Design Principles 5th
Ed.
Summary
• CSS rules can be combined with the HTML code in
a number of ways
• CSS is easy to read and write
• CSS uses inheritance and cascading to determine
which style rules take precedence
• You can combine selectors and declarations in
multiple ways
• There are many ways to select elements
62Web Design Principles 5th
Ed.
Summary
• Class and ID attribute selectors are often paired
with <div> and <span> elements to create layout
elements
• The pseudo-class and pseudo-element selectors
let you change color and styling of links and other
elements of a document
63Web Design Principles 5th
Ed.

Weitere ähnliche Inhalte

Andere mochten auch (20)

херсон
херсонхерсон
херсон
 
Spanish!
Spanish!Spanish!
Spanish!
 
WHATSAPP MASIVO
WHATSAPP MASIVOWHATSAPP MASIVO
WHATSAPP MASIVO
 
6 клас
6 клас6 клас
6 клас
 
"Город на віконці"
"Город на віконці""Город на віконці"
"Город на віконці"
 
5 клас
5 клас5 клас
5 клас
 
Табір "Подоляночка"
Табір  "Подоляночка" Табір  "Подоляночка"
Табір "Подоляночка"
 
Табір "Веселка"
Табір "Веселка"Табір "Веселка"
Табір "Веселка"
 
Personalisatie & ROI
Personalisatie & ROIPersonalisatie & ROI
Personalisatie & ROI
 
Plasn sensory survey
Plasn sensory surveyPlasn sensory survey
Plasn sensory survey
 
Spanish 2
Spanish 2Spanish 2
Spanish 2
 
Quality matters
Quality mattersQuality matters
Quality matters
 
Intro to Class Dojo
Intro to Class DojoIntro to Class Dojo
Intro to Class Dojo
 
Ppt ch01
Ppt ch01Ppt ch01
Ppt ch01
 
Olutionmanual microprocessorsand interfacing-dv-hall
Olutionmanual microprocessorsand interfacing-dv-hallOlutionmanual microprocessorsand interfacing-dv-hall
Olutionmanual microprocessorsand interfacing-dv-hall
 
Ppt ch12
Ppt ch12Ppt ch12
Ppt ch12
 
Табір "Веселка"
Табір "Веселка"Табір "Веселка"
Табір "Веселка"
 
3 клас
3 клас3 клас
3 клас
 
Spanish 2
Spanish 2Spanish 2
Spanish 2
 
1 клас
1 клас1 клас
1 клас
 

Ähnlich wie Ppt ch04 (20)

9781111528705_PPT_ch04.ppt
9781111528705_PPT_ch04.ppt9781111528705_PPT_ch04.ppt
9781111528705_PPT_ch04.ppt
 
Css
CssCss
Css
 
css.ppt
css.pptcss.ppt
css.ppt
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
Css
CssCss
Css
 
HTML & CSS: Chapter 04
HTML & CSS: Chapter 04HTML & CSS: Chapter 04
HTML & CSS: Chapter 04
 
Ppt ch01
Ppt ch01Ppt ch01
Ppt ch01
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
9781111528705_PPT_ch013.pptx
9781111528705_PPT_ch013.pptx9781111528705_PPT_ch013.pptx
9781111528705_PPT_ch013.pptx
 
9781111528705_PPT_ch012.pptx
9781111528705_PPT_ch012.pptx9781111528705_PPT_ch012.pptx
9781111528705_PPT_ch012.pptx
 
9781111528705_PPT_ch01.pptx
9781111528705_PPT_ch01.pptx9781111528705_PPT_ch01.pptx
9781111528705_PPT_ch01.pptx
 
9781111528705_PPT_ch014.pptx
9781111528705_PPT_ch014.pptx9781111528705_PPT_ch014.pptx
9781111528705_PPT_ch014.pptx
 
Css.html
Css.htmlCss.html
Css.html
 
Css
CssCss
Css
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
Cascading Style Sheets for web browser.pptx
Cascading Style Sheets for web browser.pptxCascading Style Sheets for web browser.pptx
Cascading Style Sheets for web browser.pptx
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
 
The Anatomy of a WordPress File
The Anatomy of a WordPress FileThe Anatomy of a WordPress File
The Anatomy of a WordPress File
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
 

Mehr von niruttisai

Mehr von niruttisai (8)

Ppt ch11
Ppt ch11Ppt ch11
Ppt ch11
 
Ppt ch10
Ppt ch10Ppt ch10
Ppt ch10
 
Ppt ch09
Ppt ch09Ppt ch09
Ppt ch09
 
Ppt ch08
Ppt ch08Ppt ch08
Ppt ch08
 
Ppt ch07
Ppt ch07Ppt ch07
Ppt ch07
 
Ppt ch05
Ppt ch05Ppt ch05
Ppt ch05
 
Ppt ch03
Ppt ch03Ppt ch03
Ppt ch03
 
-
--
-
 

Kürzlich hochgeladen

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 

Kürzlich hochgeladen (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 

Ppt ch04

  • 1. Web Design Principles 5th Edition Chapter Four Introducing Cascading Style Sheets
  • 2. Objectives When you complete this chapter, you will be able to: • Recognize the benefits of using CSS • Build a basic style sheet • Use inheritance to write simpler style rules • Examine basic selection techniques • Apply basic selection techniques • Use class and id selectors • Use the <div> and <span> elements • Use other selectors 2Web Design Principles 5th Ed.
  • 3. Recognizing the Benefits of Using CSS 3
  • 4. The Evolution of CSS • CSS was developed to standardize display information • CSS was slow to be supported by browsers • Newer browsers offer more complete support • Latest release is CSS3 • CSS3 is not yet evenly supported Web Design Principles 5th Ed. 4
  • 5. CSS Style Rules • In CSS, style rules express the style characteristics for an HTML element • A set of style rules is called a style sheet • Style rules are easy to write and interpret 5Web Design Principles 5th Ed.
  • 6. CSS Style Rules • Style rules are composed of two parts: a selector and a declaration • The selector determines the element to which the rule is applied • The declaration details the exact property values 6Web Design Principles 5th Ed.
  • 8. CSS Style Rules • The declaration contains a property and a value • The property is a quality or characteristic • The precise specification of the property is contained in the value • CSS includes a wide variety of different properties, each with a specific number of values 8Web Design Principles 5th Ed.
  • 10. Combining CSS Style Rules with HTML You combine CSS with HTML in three ways: • Inline style • Internal style sheet • External style sheet 10Web Design Principles 5th Ed.
  • 11. Principles of Web Design 5th Ed. 11
  • 12. Using External Style Sheets • External style sheets let you specify rules for multiple Web pages • These are text documents that contain style rules • External style sheets have a .css extension 12Web Design Principles 5th Ed.
  • 13. Linking to an External Style Sheet • The link element lets you specify an external style sheet • It is used within the <head> section of a document <head> <title>Sample Document</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> 13Web Design Principles 5th Ed.
  • 14. Using Internal Style Sheets • Internal style sheets are contained within the <style> element • The style element is contained within the <head> section of the document • Style rules contained in an internal style sheet only affect the document in which they reside <head> <title>Sample Document</title> <style type="text/css"> h1 {color: red;} </style> </head> 14Web Design Principles 5th Ed.
  • 15. Using Inline Styles • You can define styles for a single element with the style attribute • The style attribute can be used to override a style that was set at a higher level • The style attribute is useful for testing styles during development • This is the least used method of applying CSS styles • <h1 style="color: blue">Some Text</h1> 15Web Design Principles 5th Ed.
  • 16. Writing Clean CSS Code • Write CSS code that is consistent and easy to read • Correct but hard-to-read: p {font-family: arial, helvetica, sans-serif; font-size: 85%; line-height: 110%; margin-left: 30px;} • Better: p { font-family: arial, helvetica, sans-serif; font-size: 85%; line-height: 110%; margin-left: 30px; } • Use comments in your code 16Web Design Principles 5th Ed.
  • 17. Using Inheritance to Write Simpler Style Rules
  • 18. Using Inheritance to Write Simpler Style Rules • Elements in an HTML document are structured in a hierarchy • Parent elements contain child elements • Elements can be both parent and child elements • The CSS properties inherit from parent to child • The property descriptions list whether a property is inherited • You can style multiple document elements with just a few style rules using inheritance 18Web Design Principles 5th Ed.
  • 20. Using Inheritance to Write Simpler Style Rules • Specific style rules: <style type="text/css"> h1 {color: red;} p {color: red;} ul {color: red;} em {color: red;} li {color: red;} </style> • Using inheritance: <style type="text/css"> body {color: red;} </style> 20Web Design Principles 5th Ed.
  • 22. Examining Basic Selection Techniques • In this section, you will review style rule syntax and learn about the following basic selection techniques: – Using type selectors – Grouping selectors – Combining declarations – Using descendant selectors 22Web Design Principles 5th Ed.
  • 23. Using Type Selectors • The selector determines the element to which a style declaration is applied • Type selectors are the simplest form of selector • They select every element in the document that matches the style rule • In the following example, all h1 elements are red 23Web Design Principles 5th Ed.
  • 25. Grouping Selectors • You can group selectors to which the same rules apply • Specific style rules: h1 {color: red;} h2 {color: red;} • Grouping selectors: h1, h2 {color: red;} 25Web Design Principles 5th Ed.
  • 26. Combining Declarations • You can state multiple property declarations for the same selector • Specific style rules: p {color: blue;} p {font-size: 125%;} • Combining declarations: p { color: blue; font-size: 125%; } 26Web Design Principles 5th Ed.
  • 27. Using Descendant Selectors • You can select elements that are descendents of other elements • Selecting only <em> elements that are contained within <p> elements p em {color: blue;} 27Web Design Principles 5th Ed.
  • 28. Using the Universal Selector • Universal selector lets you select groups of elements • Selecting all children of the dead element: div * {font-family: sans-serif;} 28Web Design Principles 5th Ed.
  • 29. Using Class and ID Selectors
  • 30. Using Class and ID Selectors • You will learn to select elements of an HTML document using the following methods: – The class selector – The id selector – The <div> and <span> elements – The pseudo-class and pseudo-element selectors 30Web Design Principles 5th Ed.
  • 31. Using the Class Selector • The class selector lets you write rules and give them a name • You can apply that name to any element you choose • The class attribute lets you apply the style rule name to an element • The period (.) flag character indicates the selector is a class selector 31Web Design Principles 5th Ed.
  • 33. Using the Class Selector • Style rule: .intro {font-size: 125%; font-family: sans-serif;} • Applied in document: <p class="intro">This is the first paragraph of the document. It has a different style based on the "intro”class selector.</p> 33Web Design Principles 5th Ed.
  • 35. Using the id Attribute Selector • The difference between id and class is that id refers to only one instance of the id attribute value within a document • The ID attribute is used to identify layout sections of the page • The ID attribute uses a pound sign (#) flag character 35Web Design Principles 5th Ed.
  • 37. Using the id Attribute Selector • Style rule: <p id="copyright">This is the copyright information for the page.</p> • Applied in document: <p class="intro">This is the first paragraph of the document. It has a different style based on the "intro” class selector.</p> 37Web Design Principles 5th Ed.
  • 38. Using the <div> and <span> Elements
  • 39. Using the <div> and <span> Elements • The <div> (division) and <span> (span of words) elements are designed to be used with CSS • They let you specify logical divisions within a document that have their own name and style properties 39Web Design Principles 5th Ed.
  • 40. Working with <div> elements • Use <div> with the class and ID attributes to create logical divisions on a Web page • A division with an id named column as the selector: div#column { width: 200px; height: auto; padding: 15px; border: thin solid; } Applied in the document: <div id="column">This division displays… </div> 40Web Design Principles 5th Ed.
  • 41. Working with Span Elements • The span element lets you specify in-line elements that have their own name and style properties • In-line elements reside within a line of text 41Web Design Principles 5th Ed.
  • 42. Working with Span Elements • Style rule: span.logo { color: white; background-color: black; } • Applied in document: <p>Welcome to the <span class="logo">Wonder Software</span>Web site.</p> 42Web Design Principles 5th Ed.
  • 45. Using Attribute Selectors • Attribute selectors let you select an element based on whether the element contains an attribute • Elements can be selected based on a specific value the attribute contains 45Web Design Principles 5th Ed.
  • 46. Using Attribute Selectors • Attribute selectors match against attributes and their values • To select this element: <img src="images/home.gif" title="home" alt="Home navigation button" /> using attribute selectors, you could use the value that the title attribute contains, as shown: img[title=home] {border-color: red;} 46Web Design Principles 5th Ed.
  • 47. Using Pseudo-Class and Pseudo- Element Selectors • Pseudo-classes select elements based on characteristics other than their element name • For example, you can change the characteristics of hypertext links with pseudo-classes • Pseudo-elements let you change other aspects of a document that are not classified by standard elements such as the first letter or line of a paragraph 47Web Design Principles 5th Ed.
  • 48. 48 Using the Link Pseudo-Classes • The link pseudo-classes let you change the style characteristics for four different hypertext link states • These pseudo-classes only apply to the <a> element with an href attribute Web Design Principles 5th Ed.
  • 50. Using the Link Pseudo-Classes • Because of the specificity of the pseudo-class selectors, you should always place your link pseudo-class in the following order: 1. Link 2. Visited 3. Hover 4. Active 50Web Design Principles 5th Ed.
  • 51. 51 Using the Link Pseudo-Classes • The following rules change the colors of the hypertext links: :link {color: red;} :visited {color: green;} Web Design Principles 5th Ed.
  • 52. 52 Using the :hover Pseudo-Class • The :hover pseudo-class lets you apply a style that appears when the user points to an element with a pointing device a:hover {background-color: yellow;} Web Design Principles 5th Ed.
  • 54. 54 Using the :first-letter Pseudo- Element • Use the :first-letter pseudo-element to apply style rules to the first letter of any element: p:first-letter { font-weight: bold; font-size: 200%; } Web Design Principles 5th Ed.
  • 56. 56 Using the :first-line Pseudo-Element • The :first-line pseudo-element works in much the same way as :first-letter • It affects the first line of text in an element: p:first-line {text-transform: uppercase;} Web Design Principles 5th Ed.
  • 58. Understanding How the Cascade Affects Style Rules • To cascade means that multiple style sheets and style rules can apply to the same document • Only one rule can apply to an element • The CSS cascading mechanism determines which rules apply based on three variables: – Specificity of the selector – Order of the rule in the style sheet – Use of the !important keyword 58Web Design Principles 5th Ed.
  • 59. CSS3 Selectors 59Web Design Principles 5th Ed.
  • 62. Summary • CSS rules can be combined with the HTML code in a number of ways • CSS is easy to read and write • CSS uses inheritance and cascading to determine which style rules take precedence • You can combine selectors and declarations in multiple ways • There are many ways to select elements 62Web Design Principles 5th Ed.
  • 63. Summary • Class and ID attribute selectors are often paired with <div> and <span> elements to create layout elements • The pseudo-class and pseudo-element selectors let you change color and styling of links and other elements of a document 63Web Design Principles 5th Ed.