Introduction to CSS
6 likes2,729 views
Cascading Style Sheets (CSS) allow separation of document content from document presentation, including elements like fonts, sizes, colors and positioning. There are three main ways to apply CSS rules: inline within HTML tags; embedded within <style> tags in the <head>; or in an external .css file linked via <link>. CSS rules contain selectors that target elements, and declarations that set property-value pairs to style them, such as font-size: 12px. CSS provides control over various text properties including font, size, style, alignment, spacing, decoration and transformation.
Introduction to CSS
- 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.