Introduction to CSS


Published on

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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.