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

Recommended

DW_lesson2 ntro_HTML_CSS_preso ntro_HTML_CSS_preso.ppt
DW_lesson2 ntro_HTML_CSS_preso ntro_HTML_CSS_preso.ppt
YazanMohamed1
 
Introduction to basics of css, overview, syntax and so on
Introduction to basics of css, overview, syntax and so on
mictnawaraj
 
Introduction to CSS in HTML.ppt
Introduction to CSS in HTML.ppt
parveen837153
 
CSS tutorial slides.ppt_20240716_204128_0000.pptx
CSS tutorial slides.ppt_20240716_204128_0000.pptx
ssuserbf6ebe
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
CSS Introduction
CSS Introduction
Diliara Nasirova
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Introduction to CSS
Introduction to CSS
Ameer Khan
 
Beginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Css
Css
Jahid Blackrose
 
diffrent style sheets like cascading style sheets.pptx
diffrent style sheets like cascading style sheets.pptx
ssuser46d915
 
Css basic
Css basic
Jaypalsing Rajput
 
Css 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 layout
CK Yang
 
CSS
CSS
People Strategists
 
Chapter_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 css
Phúc Đỗ
 
Introduction to css
Introduction to css
nikhilsh66131
 
Html html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 
Css
Css
actacademy
 
Css
Css
actacademy
 
Rational HATS and CSS
Rational HATS and CSS
Strongback Consulting
 
Css
Css
Mukesh Tekwani
 
WT CSS
WT CSS
Mohan186867
 
Css introduction
Css introduction
vishnu murthy
 
html-css
html-css
Dhirendra Chauhan
 
Lecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
Introduction to css
Introduction to css
Joseph Gabriel
 
F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
mprpgcwa2024
 
K12 Tableau User Group virtual event June 18, 2025
K12 Tableau User Group virtual event June 18, 2025
dogden2
 

More Related Content

Similar to CSS Cascading Style Sheet Introduction slides (20)

Beginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Css
Css
Jahid Blackrose
 
diffrent style sheets like cascading style sheets.pptx
diffrent style sheets like cascading style sheets.pptx
ssuser46d915
 
Css basic
Css basic
Jaypalsing Rajput
 
Css 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 layout
CK Yang
 
CSS
CSS
People Strategists
 
Chapter_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 css
Phúc Đỗ
 
Introduction to css
Introduction to css
nikhilsh66131
 
Html html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 
Css
Css
actacademy
 
Css
Css
actacademy
 
Rational HATS and CSS
Rational HATS and CSS
Strongback Consulting
 
Css
Css
Mukesh Tekwani
 
WT CSS
WT CSS
Mohan186867
 
Css introduction
Css introduction
vishnu murthy
 
html-css
html-css
Dhirendra Chauhan
 
Lecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
Introduction to css
Introduction to css
Joseph Gabriel
 
Beginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
diffrent style sheets like cascading style sheets.pptx
diffrent style sheets like cascading style sheets.pptx
ssuser46d915
 
Css 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 layout
CK Yang
 
Chapter_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 css
Phúc Đỗ
 
Html html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 

Recently uploaded (20)

F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
mprpgcwa2024
 
K12 Tableau User Group virtual event June 18, 2025
K12 Tableau User Group virtual event June 18, 2025
dogden2
 
How payment terms are configured in Odoo 18
How payment terms are configured in Odoo 18
Celine George
 
University of Ghana Cracks Down on Misconduct: Over 100 Students Sanctioned
University of Ghana Cracks Down on Misconduct: Over 100 Students Sanctioned
Kweku Zurek
 
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
Mayvel Nadal
 
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
IIT Kharagpur Quiz Club
 
Vitamin and Nutritional Deficiencies.pptx
Vitamin and Nutritional Deficiencies.pptx
Vishal Chanalia
 
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT Kharagpur Quiz Club
 
HistoPathology Ppt. Arshita Gupta for Diploma
HistoPathology Ppt. Arshita Gupta for Diploma
arshitagupta674
 
M&A5 Q1 1 differentiate evolving early Philippine conventional and contempora...
M&A5 Q1 1 differentiate evolving early Philippine conventional and contempora...
ErlizaRosete
 
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
Ultimatewinner0342
 
June 2025 Progress Update With Board Call_In process.pptx
June 2025 Progress Update With Board Call_In process.pptx
International Society of Service Innovation Professionals
 
Photo chemistry Power Point Presentation
Photo chemistry Power Point Presentation
mprpgcwa2024
 
How to use search fetch method in Odoo 18
How to use search fetch method in Odoo 18
Celine George
 
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
nabilahk908
 
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
jutaydeonne
 
Q1_ENGLISH_PPT_WEEK 1 power point grade 3 Quarter 1 week 1
Q1_ENGLISH_PPT_WEEK 1 power point grade 3 Quarter 1 week 1
jutaydeonne
 
Values Education 10 Quarter 1 Module .pptx
Values Education 10 Quarter 1 Module .pptx
JBPafin
 
NSUMD_M1 Library Orientation_June 11, 2025.pptx
NSUMD_M1 Library Orientation_June 11, 2025.pptx
Julie Sarpy
 
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
 
F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
F-BLOCK ELEMENTS POWER POINT PRESENTATIONS
mprpgcwa2024
 
K12 Tableau User Group virtual event June 18, 2025
K12 Tableau User Group virtual event June 18, 2025
dogden2
 
How payment terms are configured in Odoo 18
How payment terms are configured in Odoo 18
Celine George
 
University of Ghana Cracks Down on Misconduct: Over 100 Students Sanctioned
University of Ghana Cracks Down on Misconduct: Over 100 Students Sanctioned
Kweku Zurek
 
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
ENGLISH-5 Q1 Lesson 1.pptx - Story Elements
Mayvel Nadal
 
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
Great Governors' Send-Off Quiz 2025 Prelims IIT KGP
IIT Kharagpur Quiz Club
 
Vitamin and Nutritional Deficiencies.pptx
Vitamin and Nutritional Deficiencies.pptx
Vishal Chanalia
 
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT KGP Quiz Week 2024 Sports Quiz (Prelims + Finals)
IIT Kharagpur Quiz Club
 
HistoPathology Ppt. Arshita Gupta for Diploma
HistoPathology Ppt. Arshita Gupta for Diploma
arshitagupta674
 
M&A5 Q1 1 differentiate evolving early Philippine conventional and contempora...
M&A5 Q1 1 differentiate evolving early Philippine conventional and contempora...
ErlizaRosete
 
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
LAZY SUNDAY QUIZ "A GENERAL QUIZ" JUNE 2025 SMC QUIZ CLUB, SILCHAR MEDICAL CO...
Ultimatewinner0342
 
Photo chemistry Power Point Presentation
Photo chemistry Power Point Presentation
mprpgcwa2024
 
How to use search fetch method in Odoo 18
How to use search fetch method in Odoo 18
Celine George
 
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
THE PSYCHOANALYTIC OF THE BLACK CAT BY EDGAR ALLAN POE (1).pdf
nabilahk908
 
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
ENGLISH_Q1_W1 PowerPoint grade 3 quarter 1 week 1
jutaydeonne
 
Q1_ENGLISH_PPT_WEEK 1 power point grade 3 Quarter 1 week 1
Q1_ENGLISH_PPT_WEEK 1 power point grade 3 Quarter 1 week 1
jutaydeonne
 
Values Education 10 Quarter 1 Module .pptx
Values Education 10 Quarter 1 Module .pptx
JBPafin
 
NSUMD_M1 Library Orientation_June 11, 2025.pptx
NSUMD_M1 Library Orientation_June 11, 2025.pptx
Julie Sarpy
 
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
 
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