SlideShare a Scribd company logo
INTRO TO CSS
IAT100 Spring 2008
INTRO TO CSS
 Covered in this lesson:
 Overview
 What is CSS?
 Why to use CSS?
 CSS for Skinning your Website
 Structure
 CSS Syntax Introduction
 Three places CSS can be defined
 CSS Syntax Specifics
 Cascading Inheritance
 Applied
 CSS Hands-on
WHAT IS CSS?
 Cascading Style Sheet
 Stylesheet Language
 Standards-based set of properties and attributes to define
styles
 To describe the presentation a document written in a
‘markup language’ like HTML or XML
 Markup encoding: <p>My paragraph here.</p>
 Defines the style of how things in <p> tags appear.
 Font, color, size, margins, etc.
 Cascading
 Rules to determine how to
 apply markup that contains
 other markup
WHY CSS?
 Separate Content from Form
 Content is the text and images, marked up to define regions of
specific types
 Form defines the “style” for the content
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
</font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
The old way:
WHY CSS? CONTINUED.
 Separate Content from Form
 Content
 Form or Style
<p class=“header”>My First Header</p>
<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).
.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }
WHAT DOES THIS SEPARATION GET US?
 Separate Content from Form
 Specify the style once for every instance of that class.
 Example: Specify the font once for all text on the HTML page that
you’ve identified as a “header”.
 The stylesheet can be a separate file which all HTML pages
on your entire site can link to.
 Only have to specify the style once for your ENITRE SITE
 Can change the style for your entire site by editing only
ONE FILE.
CSS SKINNING
 “Skinning” - changing the look of a page or your site
 Selecting an appearance by choosing which stylesheet to use.
<link rel="stylesheet" type="text/css" href=“skin1.css" />
<p class=“info”>My Information 1 goes here</p>
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
Some information goes here.
+
=
CSS SKINNING 2
 “Skinning” - changing the look of a page or your site
 Selecting an appearance by choosing which stylesheet to use.
<link rel="stylesheet" type="text/css" href=“skin2.css" />
<p class=“info”>My Information 1 goes here</p>
skin1.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
Some information goes here.
+
=
CSS SYNTAX
 3 Elements to a CSS Statement
 Selector
 What HTML sections does it affect?
 Property
 What attribute of that HTML section will be affected?
 Value
 What change will be made to that attribute?
THREE CSS DEFINITION LOCATIONS
 Inline: the “style” attribute
Note, the selector for inline CSS is the tag which contains the style attribute.
 Internal: the <style> markup tag
 External: the .css stylesheet file
<p style=“font-color:red;font-size:10px;”>Content</p>
<html><head><style>
p { background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>
<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
CSS SYNTAX: SELECTORS
 There are many kinds of selectors and many ways to reference them:
 Type, Class, ID, Pseudo, etc.
 HTML Type Tag – selected with the tag type
 The Class Attribute – precede the class with a period
p { font-size: 10px;
font-color: White; }
<p>Content</p>
.myinfo { font-size: 10px;
font-color: White; }
<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
CASCADING INHERITANCE
 Nested elements inherit
the properties from the
its parent
 If you specify a style for the
<body> tag it will affect all
content in your HTML page.
 If you want to override
inherited settings, you
need to specify a style in
a more local element
body { font-family: Verdana;
font-size: 14px; }
body { font-family: Verdana;
font-size: 1.1em; }
.littletext { font-size: 8px; }
<body>
This text is larger.
<p class=“littletext”>This text is
smaller.</p>
CSS APPLIED
 Hands-on CSS Tutorial
Ad

More Related Content

Similar to CSS Cascading Style Sheet Introduction slides (20)

Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Css
CssCss
Css
Jahid Blackrose
 
Css basic
Css basicCss basic
Css basic
Jaypalsing Rajput
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
CK Yang
 
CSS
CSSCSS
CSS
People Strategists
 
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptxChapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
eyasu6
 
05. session 05 introducing css
05. session 05   introducing css05. session 05   introducing css
05. session 05 introducing css
Phúc Đỗ
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
nikhilsh66131
 
Html html html html html html html html html
Html html html html html html html html htmlHtml html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 
Css
CssCss
Css
actacademy
 
Css
CssCss
Css
actacademy
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
Strongback Consulting
 
Css
CssCss
Css
Mukesh Tekwani
 
WT CSS
WT  CSSWT  CSS
WT CSS
Mohan186867
 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
 
html-css
html-csshtml-css
html-css
Dhirendra Chauhan
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Joseph Gabriel
 
Css ms megha
Css ms meghaCss ms megha
Css ms megha
Megha Gupta
 

Recently uploaded (20)

How to Clean Your Contacts Using the Deduplication Menu in Odoo 18
How to Clean Your Contacts Using the Deduplication Menu in Odoo 18How to Clean Your Contacts Using the Deduplication Menu in Odoo 18
How to Clean Your Contacts Using the Deduplication Menu in Odoo 18
Celine George
 
Cultivation Practice of Onion in Nepal.pptx
Cultivation Practice of Onion in Nepal.pptxCultivation Practice of Onion in Nepal.pptx
Cultivation Practice of Onion in Nepal.pptx
UmeshTimilsina1
 
apa-style-referencing-visual-guide-2025.pdf
apa-style-referencing-visual-guide-2025.pdfapa-style-referencing-visual-guide-2025.pdf
apa-style-referencing-visual-guide-2025.pdf
Ishika Ghosh
 
How to Configure Scheduled Actions in odoo 18
How to Configure Scheduled Actions in odoo 18How to Configure Scheduled Actions in odoo 18
How to Configure Scheduled Actions in odoo 18
Celine George
 
dynastic art of the Pallava dynasty south India
dynastic art of the Pallava dynasty south Indiadynastic art of the Pallava dynasty south India
dynastic art of the Pallava dynasty south India
PrachiSontakke5
 
Cultivation Practice of Garlic in Nepal.pptx
Cultivation Practice of Garlic in Nepal.pptxCultivation Practice of Garlic in Nepal.pptx
Cultivation Practice of Garlic in Nepal.pptx
UmeshTimilsina1
 
Grade 2 - Mathematics - Printable Worksheet
Grade 2 - Mathematics - Printable WorksheetGrade 2 - Mathematics - Printable Worksheet
Grade 2 - Mathematics - Printable Worksheet
Sritoma Majumder
 
Ajanta Paintings: Study as a Source of History
Ajanta Paintings: Study as a Source of HistoryAjanta Paintings: Study as a Source of History
Ajanta Paintings: Study as a Source of History
Virag Sontakke
 
Link your Lead Opportunities into Spreadsheet using odoo CRM
Link your Lead Opportunities into Spreadsheet using odoo CRMLink your Lead Opportunities into Spreadsheet using odoo CRM
Link your Lead Opportunities into Spreadsheet using odoo CRM
Celine George
 
Tax evasion, Tax planning & Tax avoidance.pptx
Tax evasion, Tax  planning &  Tax avoidance.pptxTax evasion, Tax  planning &  Tax avoidance.pptx
Tax evasion, Tax planning & Tax avoidance.pptx
manishbaidya2017
 
Form View Attributes in Odoo 18 - Odoo Slides
Form View Attributes in Odoo 18 - Odoo SlidesForm View Attributes in Odoo 18 - Odoo Slides
Form View Attributes in Odoo 18 - Odoo Slides
Celine George
 
How to Add Customer Note in Odoo 18 POS - Odoo Slides
How to Add Customer Note in Odoo 18 POS - Odoo SlidesHow to Add Customer Note in Odoo 18 POS - Odoo Slides
How to Add Customer Note in Odoo 18 POS - Odoo Slides
Celine George
 
Herbs Used in Cosmetic Formulations .pptx
Herbs Used in Cosmetic Formulations .pptxHerbs Used in Cosmetic Formulations .pptx
Herbs Used in Cosmetic Formulations .pptx
RAJU THENGE
 
PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)
PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)
PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)
Dr. Nasir Mustafa
 
LDMMIA Reiki Yoga S5 Daily Living Workshop
LDMMIA Reiki Yoga S5 Daily Living WorkshopLDMMIA Reiki Yoga S5 Daily Living Workshop
LDMMIA Reiki Yoga S5 Daily Living Workshop
LDM Mia eStudios
 
Rock Art As a Source of Ancient Indian History
Rock Art As a Source of Ancient Indian HistoryRock Art As a Source of Ancient Indian History
Rock Art As a Source of Ancient Indian History
Virag Sontakke
 
Bridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast Brooklyn
Bridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast BrooklynBridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast Brooklyn
Bridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast Brooklyn
i4jd41bk
 
pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulse
pulse  ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsepulse  ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulse
pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulse
sushreesangita003
 
What is the Philosophy of Statistics? (and how I was drawn to it)
What is the Philosophy of Statistics? (and how I was drawn to it)What is the Philosophy of Statistics? (and how I was drawn to it)
What is the Philosophy of Statistics? (and how I was drawn to it)
jemille6
 
All About the 990 Unlocking Its Mysteries and Its Power.pdf
All About the 990 Unlocking Its Mysteries and Its Power.pdfAll About the 990 Unlocking Its Mysteries and Its Power.pdf
All About the 990 Unlocking Its Mysteries and Its Power.pdf
TechSoup
 
How to Clean Your Contacts Using the Deduplication Menu in Odoo 18
How to Clean Your Contacts Using the Deduplication Menu in Odoo 18How to Clean Your Contacts Using the Deduplication Menu in Odoo 18
How to Clean Your Contacts Using the Deduplication Menu in Odoo 18
Celine George
 
Cultivation Practice of Onion in Nepal.pptx
Cultivation Practice of Onion in Nepal.pptxCultivation Practice of Onion in Nepal.pptx
Cultivation Practice of Onion in Nepal.pptx
UmeshTimilsina1
 
apa-style-referencing-visual-guide-2025.pdf
apa-style-referencing-visual-guide-2025.pdfapa-style-referencing-visual-guide-2025.pdf
apa-style-referencing-visual-guide-2025.pdf
Ishika Ghosh
 
How to Configure Scheduled Actions in odoo 18
How to Configure Scheduled Actions in odoo 18How to Configure Scheduled Actions in odoo 18
How to Configure Scheduled Actions in odoo 18
Celine George
 
dynastic art of the Pallava dynasty south India
dynastic art of the Pallava dynasty south Indiadynastic art of the Pallava dynasty south India
dynastic art of the Pallava dynasty south India
PrachiSontakke5
 
Cultivation Practice of Garlic in Nepal.pptx
Cultivation Practice of Garlic in Nepal.pptxCultivation Practice of Garlic in Nepal.pptx
Cultivation Practice of Garlic in Nepal.pptx
UmeshTimilsina1
 
Grade 2 - Mathematics - Printable Worksheet
Grade 2 - Mathematics - Printable WorksheetGrade 2 - Mathematics - Printable Worksheet
Grade 2 - Mathematics - Printable Worksheet
Sritoma Majumder
 
Ajanta Paintings: Study as a Source of History
Ajanta Paintings: Study as a Source of HistoryAjanta Paintings: Study as a Source of History
Ajanta Paintings: Study as a Source of History
Virag Sontakke
 
Link your Lead Opportunities into Spreadsheet using odoo CRM
Link your Lead Opportunities into Spreadsheet using odoo CRMLink your Lead Opportunities into Spreadsheet using odoo CRM
Link your Lead Opportunities into Spreadsheet using odoo CRM
Celine George
 
Tax evasion, Tax planning & Tax avoidance.pptx
Tax evasion, Tax  planning &  Tax avoidance.pptxTax evasion, Tax  planning &  Tax avoidance.pptx
Tax evasion, Tax planning & Tax avoidance.pptx
manishbaidya2017
 
Form View Attributes in Odoo 18 - Odoo Slides
Form View Attributes in Odoo 18 - Odoo SlidesForm View Attributes in Odoo 18 - Odoo Slides
Form View Attributes in Odoo 18 - Odoo Slides
Celine George
 
How to Add Customer Note in Odoo 18 POS - Odoo Slides
How to Add Customer Note in Odoo 18 POS - Odoo SlidesHow to Add Customer Note in Odoo 18 POS - Odoo Slides
How to Add Customer Note in Odoo 18 POS - Odoo Slides
Celine George
 
Herbs Used in Cosmetic Formulations .pptx
Herbs Used in Cosmetic Formulations .pptxHerbs Used in Cosmetic Formulations .pptx
Herbs Used in Cosmetic Formulations .pptx
RAJU THENGE
 
PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)
PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)
PHYSIOLOGY MCQS By DR. NASIR MUSTAFA (PHYSIOLOGY)
Dr. Nasir Mustafa
 
LDMMIA Reiki Yoga S5 Daily Living Workshop
LDMMIA Reiki Yoga S5 Daily Living WorkshopLDMMIA Reiki Yoga S5 Daily Living Workshop
LDMMIA Reiki Yoga S5 Daily Living Workshop
LDM Mia eStudios
 
Rock Art As a Source of Ancient Indian History
Rock Art As a Source of Ancient Indian HistoryRock Art As a Source of Ancient Indian History
Rock Art As a Source of Ancient Indian History
Virag Sontakke
 
Bridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast Brooklyn
Bridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast BrooklynBridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast Brooklyn
Bridging the Transit Gap: Equity Drive Feeder Bus Design for Southeast Brooklyn
i4jd41bk
 
pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulse
pulse  ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsepulse  ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulse
pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulse
sushreesangita003
 
What is the Philosophy of Statistics? (and how I was drawn to it)
What is the Philosophy of Statistics? (and how I was drawn to it)What is the Philosophy of Statistics? (and how I was drawn to it)
What is the Philosophy of Statistics? (and how I was drawn to it)
jemille6
 
All About the 990 Unlocking Its Mysteries and Its Power.pdf
All About the 990 Unlocking Its Mysteries and Its Power.pdfAll About the 990 Unlocking Its Mysteries and Its Power.pdf
All About the 990 Unlocking Its Mysteries and Its Power.pdf
TechSoup
 
Ad

CSS Cascading Style Sheet Introduction slides

  • 1. INTRO TO CSS IAT100 Spring 2008
  • 2. INTRO TO CSS  Covered in this lesson:  Overview  What is CSS?  Why to use CSS?  CSS for Skinning your Website  Structure  CSS Syntax Introduction  Three places CSS can be defined  CSS Syntax Specifics  Cascading Inheritance  Applied  CSS Hands-on
  • 3. WHAT IS CSS?  Cascading Style Sheet  Stylesheet Language  Standards-based set of properties and attributes to define styles  To describe the presentation a document written in a ‘markup language’ like HTML or XML  Markup encoding: <p>My paragraph here.</p>  Defines the style of how things in <p> tags appear.  Font, color, size, margins, etc.  Cascading  Rules to determine how to  apply markup that contains  other markup
  • 4. WHY CSS?  Separate Content from Form  Content is the text and images, marked up to define regions of specific types  Form defines the “style” for the content <font size=“14px”> My First Header </font> <font size=“12px” color=“red” face=“Verdana”> My information 1 goes here. </font> <font size=“14px”> My Second Header </font> <font size=“12px” color=“red” face=“Verdana”> Different information goes here. </font> The old way:
  • 5. WHY CSS? CONTINUED.  Separate Content from Form  Content  Form or Style <p class=“header”>My First Header</p> <p class=“info”>My Information 1 goes here</p> <p class=“header”>My Second Header</p> <p class=“info”>Different Information goes here</p> (Specific markup properties like Class will be discussed later). .header { font-size:14px;} .info { font-family: verdana; font-color: blue; font-size: 12px; }
  • 6. WHAT DOES THIS SEPARATION GET US?  Separate Content from Form  Specify the style once for every instance of that class.  Example: Specify the font once for all text on the HTML page that you’ve identified as a “header”.  The stylesheet can be a separate file which all HTML pages on your entire site can link to.  Only have to specify the style once for your ENITRE SITE  Can change the style for your entire site by editing only ONE FILE.
  • 7. CSS SKINNING  “Skinning” - changing the look of a page or your site  Selecting an appearance by choosing which stylesheet to use. <link rel="stylesheet" type="text/css" href=“skin1.css" /> <p class=“info”>My Information 1 goes here</p> skin1.css .info { background-color: White; font-family: Verdana; font-color: Blue; } Some information goes here. + =
  • 8. CSS SKINNING 2  “Skinning” - changing the look of a page or your site  Selecting an appearance by choosing which stylesheet to use. <link rel="stylesheet" type="text/css" href=“skin2.css" /> <p class=“info”>My Information 1 goes here</p> skin1.css .info { background-color: Blue; font-family: Serif; font-color: White; } Some information goes here. + =
  • 9. CSS SYNTAX  3 Elements to a CSS Statement  Selector  What HTML sections does it affect?  Property  What attribute of that HTML section will be affected?  Value  What change will be made to that attribute?
  • 10. THREE CSS DEFINITION LOCATIONS  Inline: the “style” attribute Note, the selector for inline CSS is the tag which contains the style attribute.  Internal: the <style> markup tag  External: the .css stylesheet file <p style=“font-color:red;font-size:10px;”>Content</p> <html><head><style> p { background-color: Red; font-family: serif; font-color: White; } </style></head><body> <p>Content</p> </body></html> <link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
  • 11. CSS SYNTAX: SELECTORS  There are many kinds of selectors and many ways to reference them:  Type, Class, ID, Pseudo, etc.  HTML Type Tag – selected with the tag type  The Class Attribute – precede the class with a period p { font-size: 10px; font-color: White; } <p>Content</p> .myinfo { font-size: 10px; font-color: White; } <p class=“myinfo”>Content</p> <div class=“myinfo”>Other content</div>
  • 12. CASCADING INHERITANCE  Nested elements inherit the properties from the its parent  If you specify a style for the <body> tag it will affect all content in your HTML page.  If you want to override inherited settings, you need to specify a style in a more local element body { font-family: Verdana; font-size: 14px; } body { font-family: Verdana; font-size: 1.1em; } .littletext { font-size: 8px; } <body> This text is larger. <p class=“littletext”>This text is smaller.</p>
  • 13. CSS APPLIED  Hands-on CSS Tutorial