Your SlideShare is downloading. ×
0
Cascading Style
Sheets
Taking control of you web pages
What we will learn today

 Why we use CSS
 Three ways to use CSS in an XHTML
 document
 How to write a style declaration
 ...
Why CSS?

 Separation of content from markup
 Cleaner code
 Easier to manage style changes
Why not Dreamweaver or
FrontPage?
 They produce messy code
 Don’t always do what you want
 Hard to troubleshoot problems
 ...
What is CSS?

 A rule that defines a particular style that is
 applied to you XHTML markup
 A rule can define
    Font-siz...
Three ways to style

 Inline Styles
 Embedded Styles
 Linked
Inline


<p style="font-size: 25pt; font-weight:
bold; font-style: italic; color: red;">By
adding inline CSS styling to th...
Inline Styles

  Inline styles have a narrow scope
  Not much better than using ‘font’ tags
  for everything
  Should gene...
Embedded

<head>
<title>Inline Style Example</title>
<style type="text/css">
h1 {font-size: 2em; font-weight:bold;}
p { co...
Embedded

 Scope limited to the page
 Page styles win out over external
 style sheets, but they lose out to
 inline styles
Linked

<head>
<link rel="stylesheet" href="stylesheet.css"
type="text/css" media="screen" />
</head>
<body>
Linked

<head>
<style type=“text/css”>
@import url(stylesheet.css), media;
</style>
</head>
<body>
Linked

 Style sheet
 Separates our markup and styles
 Can be linked to multiple pages
 Make changes across an entire site...
Linked




         Embedded



                    Inline
Anatomy of a CSS rule



    Selector     Declaration


    p {color: red}

      Property      Value
Anatomy of a CSS rule



    Selector      Declaration


   h1 {font-size: 10px}

       Property             Value
Grouping declarations


p {color:red}
p {font-size:12px}
p {line-height:15px}

Multiple declarations can be contained with...
Grouping selectors

      h1 {color: blue; font-weight: bold;}
      h2 {color: blue; font-weight: bold;}
      h3 {color:...
Contextual Selectors


     em {color: green;}

     p em {color: green;}

Descendent Selector


    em is a descendent of...
Contextual Selectors

Example
Contextual Selectors


  Child Selector

  p>em {color: green;}

Child Selector
IDWIMIE
It Doesn’t Work In Microsoft Internet Explorer
Classes and IDs

 Give us the ability to assign styles
 without regard for the document
 hierarchy
 example
Classes

 Can names can be used multiple
 times in a document
 Is represented in the selector by a
 period ‘.’
IDs

 An ID name can only be used ONCE
 in any html document
 Is represented in the selector by a
 hash ‘#’
 Otherwise wor...
When to use Classes vs. IDs

 Try to used tag and descendent
 selectors as much as possible
 Use classes when you can’t us...
Universal Selector

       Represents all elements

       * {color:green;}
Universal Selector


       p * em {font-weigh...
Selector Summary

 Tag Selector
 Descendent Selector
 Class and ID Selectors
 Universal Selector
 Child Selector -- IDWIMIE
Rule Declarations

What can we change about the
element?
   Size
   Position
   Color
Values Types

Words
 {font-weight: bold;}

Numeric values
  {font-size: 12px}

Color Values
  {font-color: red}
Numeric Values

Absolute values
  Pixels – 10px
  Points – 10pt
  Inches – 10in
  Centimeters – 10cm
  Millimeters – 10mm
...
Numeric Values

Relative Values
  percentage – 10%
  em – 10em
  ex – 10x
Color Values

Hexadecimal
  #RRGGBB or #RGB

 {color: #ffffff} is white
 {color: #000000} is black
 {color: #00ff00} is gr...
Color Values
Styling Fonts

First rule of fonts in web design:

You can’t use the fonts you want.
Sorry.


Times, Arial, Verdana, Couri...
Win XP and Mac OS X

Arial            Franklin Gothic   Tahoma
Arial Black      Georgia           Times New
              ...
Serif vs. Sans-Serif

Serif:

Times New Roman
Sans-Serif:

Verdana
Monospace:

Courier New
Font-Family property



font-family { “trebuchet ms”, helvetica, arial,
sans-serif;}
Sizing fonts

Three types of values to size fonts:
  Absolute
     Pixels, inches, etc.
  Relative
     Percentages or ems...
Sizing with ems


body {font-family: verdana, arial, sans-
serif; font-size 100%;}
p {font-size: 1em;}
Font-Style

Font-style:
h2 {font-style: italic;}

Font-weight:
em {font-weight: bold;}

Font-Variant:
h2 {font-varient: sm...
Font Property Shorthand

p {font-weight: bold; font-style: italic;
font-variant: small-caps; font-size: 1em;
font-family: ...
Text properties

Line-height
p {line-height: 1.2;}
p {font: 1em/1.3; verdana, arial, sans-serif;}
Creates space between th...
Text properties

Text-Decoration
.retailprice {text-decoration: strikethrough}
a:link {text-decoration: none}
Allows you t...
Text properties

Letter-spacing
p {text-indent: 3em;}
Sets overall spacing between letter. Print typographers refer to thi...
Upcoming SlideShare
Loading in...5
×

Introduction to CSS

3,584

Published on

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,584
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
190
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to CSS"

  1. 1. Cascading Style Sheets Taking control of you web pages
  2. 2. What we will learn today Why we use CSS Three ways to use CSS in an XHTML document How to write a style declaration How to target XHTML elements for styling How to change the style of that element How to style text
  3. 3. Why CSS? Separation of content from markup Cleaner code Easier to manage style changes
  4. 4. Why not Dreamweaver or FrontPage? They produce messy code Don’t always do what you want Hard to troubleshoot problems You are NOT in control
  5. 5. What is CSS? A rule that defines a particular style that is applied to you XHTML markup A rule can define Font-size of the text of paragraphs Thickness of a border around an image Position of a headline Color of a background Etc.
  6. 6. Three ways to style Inline Styles Embedded Styles Linked
  7. 7. Inline <p style="font-size: 25pt; font-weight: bold; font-style: italic; color: red;">By adding inline CSS styling to this paragraph, we can override the default styles.</p>
  8. 8. Inline Styles Inline styles have a narrow scope Not much better than using ‘font’ tags for everything Should generally be AVOIDED
  9. 9. Embedded <head> <title>Inline Style Example</title> <style type="text/css"> h1 {font-size: 2em; font-weight:bold;} p { color:blue; } </style> </head> <body> <h1>First level heading tag</h1> <p>Here is the blue paragraph to styled by the embedded stylesheet.</p> </body> </html>
  10. 10. Embedded Scope limited to the page Page styles win out over external style sheets, but they lose out to inline styles
  11. 11. Linked <head> <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" /> </head> <body>
  12. 12. Linked <head> <style type=“text/css”> @import url(stylesheet.css), media; </style> </head> <body>
  13. 13. Linked Style sheet Separates our markup and styles Can be linked to multiple pages Make changes across an entire site Create different styles for print or handheld devices
  14. 14. Linked Embedded Inline
  15. 15. Anatomy of a CSS rule Selector Declaration p {color: red} Property Value
  16. 16. Anatomy of a CSS rule Selector Declaration h1 {font-size: 10px} Property Value
  17. 17. Grouping declarations p {color:red} p {font-size:12px} p {line-height:15px} Multiple declarations can be contained within a rule p {color:red; font-size:12px; line-height:15px;}
  18. 18. Grouping selectors h1 {color: blue; font-weight: bold;} h2 {color: blue; font-weight: bold;} h3 {color: blue; font-weight: bold;} h1, h2, h3 {color: blue; font-weight: bold;} h3 {font-style: italic;}
  19. 19. Contextual Selectors em {color: green;} p em {color: green;} Descendent Selector em is a descendent of p
  20. 20. Contextual Selectors Example
  21. 21. Contextual Selectors Child Selector p>em {color: green;} Child Selector
  22. 22. IDWIMIE It Doesn’t Work In Microsoft Internet Explorer
  23. 23. Classes and IDs Give us the ability to assign styles without regard for the document hierarchy example
  24. 24. Classes Can names can be used multiple times in a document Is represented in the selector by a period ‘.’
  25. 25. IDs An ID name can only be used ONCE in any html document Is represented in the selector by a hash ‘#’ Otherwise work the same as a class Example
  26. 26. When to use Classes vs. IDs Try to used tag and descendent selectors as much as possible Use classes when you can’t use a tag/descendent, and you need to target multiple elements on a page IDs are typically used to target entire sections of a page, usually in a ‘div’ tag.
  27. 27. Universal Selector Represents all elements * {color:green;} Universal Selector p * em {font-weight: bold;}
  28. 28. Selector Summary Tag Selector Descendent Selector Class and ID Selectors Universal Selector Child Selector -- IDWIMIE
  29. 29. Rule Declarations What can we change about the element? Size Position Color
  30. 30. Values Types Words {font-weight: bold;} Numeric values {font-size: 12px} Color Values {font-color: red}
  31. 31. Numeric Values Absolute values Pixels – 10px Points – 10pt Inches – 10in Centimeters – 10cm Millimeters – 10mm Picas – 10pc
  32. 32. Numeric Values Relative Values percentage – 10% em – 10em ex – 10x
  33. 33. Color Values Hexadecimal #RRGGBB or #RGB {color: #ffffff} is white {color: #000000} is black {color: #00ff00} is green {color: #0000ff} is blue
  34. 34. Color Values
  35. 35. Styling Fonts First rule of fonts in web design: You can’t use the fonts you want. Sorry. Times, Arial, Verdana, Courier
  36. 36. Win XP and Mac OS X Arial Franklin Gothic Tahoma Arial Black Georgia Times New Roman Arial Narrow Impact Trebuchet MS Century Gothic Monotype Corsiva Verdana Comic Sans MS Palatino Webdings Courier New Symbol
  37. 37. Serif vs. Sans-Serif Serif: Times New Roman Sans-Serif: Verdana Monospace: Courier New
  38. 38. Font-Family property font-family { “trebuchet ms”, helvetica, arial, sans-serif;}
  39. 39. Sizing fonts Three types of values to size fonts: Absolute Pixels, inches, etc. Relative Percentages or ems Keywords x-small, small, large, x-large, etc.
  40. 40. Sizing with ems body {font-family: verdana, arial, sans- serif; font-size 100%;} p {font-size: 1em;}
  41. 41. Font-Style Font-style: h2 {font-style: italic;} Font-weight: em {font-weight: bold;} Font-Variant: h2 {font-varient: small-caps;}
  42. 42. Font Property Shorthand p {font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; font-family: verdana, arial sans-serif;} p {font: bold italic small-caps 1em verdana, arial sans-serif;}
  43. 43. Text properties Line-height p {line-height: 1.2;} p {font: 1em/1.3; verdana, arial, sans-serif;} Creates space between the lines of a block of text. Text-align h1 {text-align: center;} p {text-align: justify;} Sets overall spacing between words. Text-indent p {text-indent: 3em;} Sets the start position of the text box in relation to its containing element
  44. 44. Text properties Text-Decoration .retailprice {text-decoration: strikethrough} a:link {text-decoration: none} Allows you to set a type of decoration to your text. Values include: underline, overline, strikethrough, and blink. Text-Transform p.yelling {text-transform: capitalize;} Changes capitalization of text within an element. Values include uppercase, lowercase, capitalize, none.
  45. 45. Text properties Letter-spacing p {text-indent: 3em;} Sets overall spacing between letter. Print typographers refer to this as ‘Tracking’ Word-Spacing p {text-indent: 3em;} Sets overall spacing between words. Vertical-align span.raised {font-size: .4em; vertical-align: 50%} Moves type up or down with respect to the baseline.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×