Your SlideShare is downloading. ×
Introduction to CSS
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Cascading Style Sheets Taking control of you web pages
  • 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. Why CSS? Separation of content from markup Cleaner code Easier to manage style changes
  • 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. 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. Three ways to style Inline Styles Embedded Styles Linked
  • 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. Inline Styles Inline styles have a narrow scope Not much better than using ‘font’ tags for everything Should generally be AVOIDED
  • 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. Embedded Scope limited to the page Page styles win out over external style sheets, but they lose out to inline styles
  • 11. Linked <head> <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" /> </head> <body>
  • 12. Linked <head> <style type=“text/css”> @import url(stylesheet.css), media; </style> </head> <body>
  • 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. Linked Embedded Inline
  • 15. Anatomy of a CSS rule Selector Declaration p {color: red} Property Value
  • 16. Anatomy of a CSS rule Selector Declaration h1 {font-size: 10px} Property Value
  • 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. 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. Contextual Selectors em {color: green;} p em {color: green;} Descendent Selector em is a descendent of p
  • 20. Contextual Selectors Example
  • 21. Contextual Selectors Child Selector p>em {color: green;} Child Selector
  • 22. IDWIMIE It Doesn’t Work In Microsoft Internet Explorer
  • 23. Classes and IDs Give us the ability to assign styles without regard for the document hierarchy example
  • 24. Classes Can names can be used multiple times in a document Is represented in the selector by a period ‘.’
  • 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. 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. Universal Selector Represents all elements * {color:green;} Universal Selector p * em {font-weight: bold;}
  • 28. Selector Summary Tag Selector Descendent Selector Class and ID Selectors Universal Selector Child Selector -- IDWIMIE
  • 29. Rule Declarations What can we change about the element? Size Position Color
  • 30. Values Types Words {font-weight: bold;} Numeric values {font-size: 12px} Color Values {font-color: red}
  • 31. Numeric Values Absolute values Pixels – 10px Points – 10pt Inches – 10in Centimeters – 10cm Millimeters – 10mm Picas – 10pc
  • 32. Numeric Values Relative Values percentage – 10% em – 10em ex – 10x
  • 33. Color Values Hexadecimal #RRGGBB or #RGB {color: #ffffff} is white {color: #000000} is black {color: #00ff00} is green {color: #0000ff} is blue
  • 34. Color Values
  • 35. Styling Fonts First rule of fonts in web design: You can’t use the fonts you want. Sorry. Times, Arial, Verdana, Courier
  • 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. Serif vs. Sans-Serif Serif: Times New Roman Sans-Serif: Verdana Monospace: Courier New
  • 38. Font-Family property font-family { “trebuchet ms”, helvetica, arial, sans-serif;}
  • 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. Sizing with ems body {font-family: verdana, arial, sans- serif; font-size 100%;} p {font-size: 1em;}
  • 41. Font-Style Font-style: h2 {font-style: italic;} Font-weight: em {font-weight: bold;} Font-Variant: h2 {font-varient: small-caps;}
  • 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. 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. 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. 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.