SlideShare a Scribd company logo
CSS: Separating Design and
Content


Kevin Campbell
Duke University/Grouchyboy.com
Assumptions
   You know HTML
   You do not know CSS
   You care about aesthetics and
    function
   You have 50 minutes to kill
What We’ll Do
   What is CSS?
   View some code and talk basics
   Why use CSS?
     Advantages to Workflow
     Cost Savings

   Implementations
   Resources
What are Cascading Style Sheets?
   Created by Hakon Wium Lie of MIT
    in 1994
   Has become the W3C standard for
    controlling visual presentation of
    web pages
   Separates design elements from
    structural logic
   You get control and maintain the
    integrity of your data
Let’s See Some Code
   Sample Style sheet
   Rule Structure
Selectors
   Element Selectors – (refer to
    HTML tags)
    H1 {color: purple;}
    H1, H2, P {color: purple;}
   Contextual – (refer to HTML, but in
    context)
    LI B {color: purple;}
Selectors
   Class Selectors
    <H1 CLASS=“warning”>Danger!</H1>
    <P CLASS=“warning”>Be careful…</P>
    …….
    In your HTML code -
    H1.warning {color: red;}
            OR to an entire class…
    .warning {color:red;}
Applying CSS to HTML
       Style rules can be applied in 3 ways:

Inline Styles: sheets:
Embedded style sheets:
External style
<H1 STYLE=“color: blue; font-size: 20pt;”>A large purple
<HTML><HEAD><TITLE>Stylin’!</TITLE>
<HEAD>
Heading</H1>
<STYLE TYPE=“text/css”>
<LINK REL=stylesheet” TYPE=“text/css”
       H1 {color: purple;}
HREF=“styles/mystyles.css”>
For individual elementscolor: gray;}
       P {font-size: 10pt; using the STYLE attribute
</HEAD>
</STYLE>
</HEAD> “separation” of style and content.
This is true
…
Keeping all your styles in an external document is
</HTML>
simpler
Why CSS?
   Advantages to Workflow
   Cost Savings
   You WILL Be Cooler
Advantages of CSS
   Workflow
     Faster downloads
     Streamlined site maintenance

     Global control of design attributes

     Precise control (Advanced)
       Positioning
       Fluid layouts
Advantages of CSS - Cost Savings
   Cost Savings
     Reduced     Bandwidth Costs
         One style sheet called and cached
     Higher    Search Engine Rankings
       Cleaner code is easier for search engines
        to index
       Greater density of indexable content
Advantages of CSS - Cost Savings

   Faster download = better usability
       Web usability redesign can increase the
        sales/conversion rate by 100% (source: Jakob
         Nielson)
       CSS requires less code
       Tables require spacer images
       Entire table has to render before content
       CSS can control the order that elements
        download (content before images)
Advantages of CSS - Cost Savings

   Increased Reach
     CSS   website is compatible w/ many
      different devices
     In 2008 an est. 58 Million PDA’s will be
      sold (Source: eTForecast.com)
     1/3 of the world’s population will own a
      wireless device by 2010
Implementations
   Apply to HTML pages
   Apply to dynamic data
     Format   or style XML
   Use for layout (this is cool)
     See   http://www.csszengarden.com
CSS isn’t perfect (yet)
   CSS support in browsers is still
    uneven
   Make sure your CSS properties are
    supported
Resources
   http://www.csszengarden.com
     This   is CSS at its finest
   http://www.w3.org/Style/CSS/
     The    Official CSS Site
   http://css.maxdesign.com.au/
     Australian   firm, very professional
   http://webmonkey.wired.com/webmonk
     Where    I learned CSS and Web Design
Come and see me at 3:30pm!
   “Making Your Web Site More
    Appealing”

More Related Content

What's hot

Introduction to css
Introduction to cssIntroduction to css
Introduction to css
eShikshak
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
Ketan Ghumatkar
 
Css inclusion
Css   inclusionCss   inclusion
Css inclusion
AbhishekMondal42
 
Css introduction
Css   introductionCss   introduction
Css introduction
AbhishekMondal42
 
Html css
Html cssHtml css
Html css
kanakaiah kedam
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
JTechTown
 
Css
CssCss
CSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and ColorCSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and Color
Kelly Kellum
 
Css and its types
Css and its typesCss and its types
Css and its types
Mansi Mahadik
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
Swati Sharma
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Css ms megha
Css ms meghaCss ms megha
Css ms megha
Megha Gupta
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
JainilSampat
 
Css external style sheet
Css external style sheetCss external style sheet
Css external style sheet
Jesus Obenita Jr.
 
Intro to front end development Basic
Intro to front end development BasicIntro to front end development Basic
Intro to front end development Basic
abdulrahmanabdullah32
 
Cit 230 internal css
Cit 230 internal cssCit 230 internal css
Cit 230 internal css
aly0901
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 

What's hot (17)

Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
 
Css inclusion
Css   inclusionCss   inclusion
Css inclusion
 
Css introduction
Css   introductionCss   introduction
Css introduction
 
Html css
Html cssHtml css
Html css
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
 
Css
CssCss
Css
 
CSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and ColorCSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and Color
 
Css and its types
Css and its typesCss and its types
Css and its types
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Css ms megha
Css ms meghaCss ms megha
Css ms megha
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 
Css external style sheet
Css external style sheetCss external style sheet
Css external style sheet
 
Intro to front end development Basic
Intro to front end development BasicIntro to front end development Basic
Intro to front end development Basic
 
Cit 230 internal css
Cit 230 internal cssCit 230 internal css
Cit 230 internal css
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 

Viewers also liked

Cara buat-label-cd-versi q
Cara buat-label-cd-versi qCara buat-label-cd-versi q
Cara buat-label-cd-versi q
zayhard99
 
Phase I MBH Plan Set 09-07-12
Phase I  MBH Plan Set 09-07-12Phase I  MBH Plan Set 09-07-12
Phase I MBH Plan Set 09-07-12
WSP_SELLS
 
DEIS B -Scoping Transcripts and Comment Letters
DEIS B -Scoping Transcripts and Comment LettersDEIS B -Scoping Transcripts and Comment Letters
DEIS B -Scoping Transcripts and Comment Letters
WSP_SELLS
 
Let's cut to the chase! a 1
Let's cut to the chase! a 1Let's cut to the chase! a 1
Let's cut to the chase! a 1
drpamela7337
 
FEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham Response
FEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham ResponseFEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham Response
FEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham Response
WSP_SELLS
 
DEIS IV.B. Community Character Visual
DEIS IV.B. Community Character VisualDEIS IV.B. Community Character Visual
DEIS IV.B. Community Character Visual
WSP_SELLS
 
FEIS F-Timber Rattlesnake Habitat Assessment
FEIS F-Timber Rattlesnake Habitat AssessmentFEIS F-Timber Rattlesnake Habitat Assessment
FEIS F-Timber Rattlesnake Habitat Assessment
WSP_SELLS
 
Phase I MBH Plan Set 09-07-12R
Phase I MBH Plan Set 09-07-12RPhase I MBH Plan Set 09-07-12R
Phase I MBH Plan Set 09-07-12R
WSP_SELLS
 

Viewers also liked (8)

Cara buat-label-cd-versi q
Cara buat-label-cd-versi qCara buat-label-cd-versi q
Cara buat-label-cd-versi q
 
Phase I MBH Plan Set 09-07-12
Phase I  MBH Plan Set 09-07-12Phase I  MBH Plan Set 09-07-12
Phase I MBH Plan Set 09-07-12
 
DEIS B -Scoping Transcripts and Comment Letters
DEIS B -Scoping Transcripts and Comment LettersDEIS B -Scoping Transcripts and Comment Letters
DEIS B -Scoping Transcripts and Comment Letters
 
Let's cut to the chase! a 1
Let's cut to the chase! a 1Let's cut to the chase! a 1
Let's cut to the chase! a 1
 
FEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham Response
FEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham ResponseFEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham Response
FEIS D-Malcolm Pirnie Letter and Leggette Brashears & Graham Response
 
DEIS IV.B. Community Character Visual
DEIS IV.B. Community Character VisualDEIS IV.B. Community Character Visual
DEIS IV.B. Community Character Visual
 
FEIS F-Timber Rattlesnake Habitat Assessment
FEIS F-Timber Rattlesnake Habitat AssessmentFEIS F-Timber Rattlesnake Habitat Assessment
FEIS F-Timber Rattlesnake Habitat Assessment
 
Phase I MBH Plan Set 09-07-12R
Phase I MBH Plan Set 09-07-12RPhase I MBH Plan Set 09-07-12R
Phase I MBH Plan Set 09-07-12R
 

Similar to Css

New Css style
New Css styleNew Css style
New Css style
BUDNET
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
RohanMistry15
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
Vskills
 
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
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
Sutinder Mann
 
CSS.ppt
CSS.pptCSS.ppt
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
abhiramhatwar
 
Full
FullFull
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
jackchenvlo
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impo
AlebelAyalneh
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
JagadishBabuParri
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
William Myers
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
Sutinder Mann
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
Doncho Minkov
 
CSS Interview Questions for Fresher and Experience
CSS Interview Questions for Fresher and Experience CSS Interview Questions for Fresher and Experience
CSS Interview Questions for Fresher and Experience
Hitesh Kumar
 

Similar to Css (20)

New Css style
New Css styleNew Css style
New Css style
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
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
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
 
CSS.ppt
CSS.pptCSS.ppt
CSS.ppt
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Lecture2 CSS1
 
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
 
Full
FullFull
Full
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impo
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS Interview Questions for Fresher and Experience
CSS Interview Questions for Fresher and Experience CSS Interview Questions for Fresher and Experience
CSS Interview Questions for Fresher and Experience
 

Css

  • 1. CSS: Separating Design and Content Kevin Campbell Duke University/Grouchyboy.com
  • 2. Assumptions  You know HTML  You do not know CSS  You care about aesthetics and function  You have 50 minutes to kill
  • 3. What We’ll Do  What is CSS?  View some code and talk basics  Why use CSS?  Advantages to Workflow  Cost Savings  Implementations  Resources
  • 4. What are Cascading Style Sheets?  Created by Hakon Wium Lie of MIT in 1994  Has become the W3C standard for controlling visual presentation of web pages  Separates design elements from structural logic  You get control and maintain the integrity of your data
  • 5. Let’s See Some Code  Sample Style sheet  Rule Structure
  • 6. Selectors  Element Selectors – (refer to HTML tags) H1 {color: purple;} H1, H2, P {color: purple;}  Contextual – (refer to HTML, but in context) LI B {color: purple;}
  • 7. Selectors  Class Selectors <H1 CLASS=“warning”>Danger!</H1> <P CLASS=“warning”>Be careful…</P> ……. In your HTML code - H1.warning {color: red;} OR to an entire class… .warning {color:red;}
  • 8. Applying CSS to HTML  Style rules can be applied in 3 ways: Inline Styles: sheets: Embedded style sheets: External style <H1 STYLE=“color: blue; font-size: 20pt;”>A large purple <HTML><HEAD><TITLE>Stylin’!</TITLE> <HEAD> Heading</H1> <STYLE TYPE=“text/css”> <LINK REL=stylesheet” TYPE=“text/css” H1 {color: purple;} HREF=“styles/mystyles.css”> For individual elementscolor: gray;} P {font-size: 10pt; using the STYLE attribute </HEAD> </STYLE> </HEAD> “separation” of style and content. This is true … Keeping all your styles in an external document is </HTML> simpler
  • 9. Why CSS?  Advantages to Workflow  Cost Savings  You WILL Be Cooler
  • 10. Advantages of CSS  Workflow  Faster downloads  Streamlined site maintenance  Global control of design attributes  Precise control (Advanced)  Positioning  Fluid layouts
  • 11. Advantages of CSS - Cost Savings  Cost Savings  Reduced Bandwidth Costs  One style sheet called and cached  Higher Search Engine Rankings  Cleaner code is easier for search engines to index  Greater density of indexable content
  • 12. Advantages of CSS - Cost Savings  Faster download = better usability  Web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson)  CSS requires less code  Tables require spacer images  Entire table has to render before content  CSS can control the order that elements download (content before images)
  • 13. Advantages of CSS - Cost Savings  Increased Reach  CSS website is compatible w/ many different devices  In 2008 an est. 58 Million PDA’s will be sold (Source: eTForecast.com)  1/3 of the world’s population will own a wireless device by 2010
  • 14. Implementations  Apply to HTML pages  Apply to dynamic data  Format or style XML  Use for layout (this is cool)  See http://www.csszengarden.com
  • 15. CSS isn’t perfect (yet)  CSS support in browsers is still uneven  Make sure your CSS properties are supported
  • 16. Resources  http://www.csszengarden.com  This is CSS at its finest  http://www.w3.org/Style/CSS/  The Official CSS Site  http://css.maxdesign.com.au/  Australian firm, very professional  http://webmonkey.wired.com/webmonk  Where I learned CSS and Web Design
  • 17. Come and see me at 3:30pm!  “Making Your Web Site More Appealing”