Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie CSS Basics: Controlling Web Page Styles
Ähnlich wie CSS Basics: Controlling Web Page Styles (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
CSS Basics: Controlling Web Page Styles
- 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
- 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.