5 WAYS TO CUSTOMIZEYOUR WEBSITE WITH CSSDecember 13, 2012#5WaysCSS
WHO’S THIS GUY?                    Maurice Cherry                    Creative Principal, 3eighteen media                  ...
#5WaysCSS
THE RUNDOWN • What is CSS? • 5 Ways to Customize Your Website With CSS • Wrap-Up • Questions#5WaysCSS
0    WHAT IS CSS?
CSS = CASCADING STYLE SHEET • A style sheet language • A file that contains style rules which tell the   browser how to pr...
CSS = CASCADING STYLE SHEET#5WaysCSS
CSS = CASCADING STYLE SHEET#5WaysCSS
RULES, RULES, RULES  h1 { color: red; background-color: black; }#5WaysCSS
RULES, RULES, RULES  h1 { color: red; background-color: black; }#5WaysCSS
RULES, RULES, RULESselector  h1 { color: red; background-color: black; }#5WaysCSS
RULES, RULES, RULES                    declaration  h1 { color: red; background-color: black; }#5WaysCSS
RULES, RULES, RULES                 value                value  h1 { color: red; background-color: black; }      property ...
#5WaysCSS
CASCADE (THE “C” IN “CSS”) • The cascade tells browsers the order in which   to process rules in CSS stylesheets to preven...
CASCADE (THE “C” IN “CSS”)#5WaysCSS
CASCADE (THE “C” IN “CSS”)#5WaysCSS
INHERITANCE • Inheritance means that child elements will   inherit properties from their parent element. • Inheritance wor...
INHERITANCE#5WaysCSS
INHERITANCE CSS body { color: blue; } HTML <body>        <h1>This is some text. What color am I?</h1> </body>#5WaysCSS
INHERITANCE CSS body { color: blue; } HTML <body> <! -- parent element -->        <h1>This is some text. What color am I?<...
#5WaysCSS
BEFORE YOU EDIT YOUR CSS… • Test your CSS in a “code sandbox” first. • Save a copy of the original .css file!#5WaysCSS
BEFORE YOU EDIT YOUR CSS… •   Codepen: http://codepen.io •   CSSDesk: http://cssdesk.com •   Dabblet: http://dabblet.com •...
1    BOXES
EVERYTHING IN HTML IS A BOX#5WaysCSS
EVERYTHING IN HTML IS A BOX• Links: <a href=“index.html”>Click here</a>• Text: <p>This is some text.</p>• Images: <img src...
#5WaysCSS
#5WaysCSS
#5WaysCSS
#5WaysCSS
MARGIN PROPERTIES • margin-top, margin-right, margin-bottom, margin-left • CSS Example:   h1 { margin-top: 10px; margin-bo...
#5WaysCSS
BORDER PROPERTIES •   border-top-width, border-top-style, border-top-color, etc. •   Shorter property: border-top, border-...
BORDER PROPERTIES (CSS3) • border-top-left-radius, border-top-right-radius, border-   bottom-right-radius, border-bottom-l...
BORDER PROPERTIES (CSS3)#5WaysCSS
BORDER PROPERTIES (CSS3) • box-shadow • Creates drop shadows for boxes, can be stacked to create   multiple shadows • CSS ...
BORDER PROPERTIES (CSS3)#5WaysCSS
#5WaysCSS
PADDING PROPERTIES • padding-top, padding-right, padding-bottom, padding-left • CSS Example:   h1 { padding-left: 10px; pa...
OTHER BOX PROPERTIES • height (number with units of length or percentage) • width (number with units of length or percenta...
TRY PUTTING IT ALL TOGETHER! • CSS   div { background-color: red; height: 200px; width: 200px;         border: 2px solid b...
2    TEXT
TEXT AND FONT PROPERTIES • These apply to all text elements in HTML • Example: <p>, <blockquote>, <cite>,   <h1>, <h2>, et...
TEXT PROPERTIES • color, letter-spacing, text-align, text-   decoration, text-indent, text-transform, word-   spacing#5Way...
TEXT PROPERTIES – COLOR • Color values    – color names (red, black, yellow, etc.)    – hexadecimal codes (#FF0000, #BADA5...
TEXT PROPERTIES – LETTER-SPACING • Adjusts the space between letters    – Values are numbers with units of length • Exampl...
TEXT PROPERTIES – LETTER-SPACING#5WaysCSS
TEXT PROPERTIES – TEXT-ALIGN • Controls the alignment of text within its   bounding box    – Values are left, right, cente...
TEXT PROPERTIES – TEXT-ALIGN#5WaysCSS
TEXT PROPERTIES – TEXT-DECORATION • Controls the “decoration” of text    – Values are underline, overline, line-through, b...
TEXT PROPERTIES – TEXT-DECORATION#5WaysCSS
TEXT PROPERTIES – TEXT-INDENT • Indents the first line of text in an element    – Values are numbers or percentages • Exam...
TEXT PROPERTIES – TEXT-INDENT#5WaysCSS
TEXT PROPERTIES – TEXT-TRANSFORM • Controls the case of text    – Values are uppercase, lowercase, capitalize • Example: h...
TEXT PROPERTIES – TEXT-TRANSFORM#5WaysCSS
TEXT PROPERTIES – WORD-SPACING • Controls the spacing between words    – Values are numbers with units of length • Example...
TEXT PROPERTIES – WORD-SPACING#5WaysCSS
FONT PROPERTIES • font-family, font-size, font-style, font-variant,   font-weight#5WaysCSS
FONT PROPERTIES • Shorter property: font#5WaysCSS
FONT PROPERTIES – FONT-FAMILY • Changes the font    – Values are names of fonts, usually in a font stack,     with a gener...
FONT PROPERTIES – FONT-FAMILY#5WaysCSS
FONT PROPERTIES – FONT-SIZE • Changes the size of the font    – Values are numbers with units of length or     percentages...
FONT PROPERTIES – FONT-SIZE#5WaysCSS
FONT PROPERTIES – FONT-STYLE • Changes the style of the font    – Values are normal, italic, or oblique • Example: h1 { fo...
FONT PROPERTIES – FONT-STYLE#5WaysCSS
FONT PROPERTIES – FONT-VARIANT • Changes the variance of the font    – Values are normal or small-caps • Example: h1 { fon...
FONT PROPERTIES – FONT-VARIANT#5WaysCSS
FONT PROPERTIES – FONT-WEIGHT • Changes the weight of the font    – Values are numbers (100-900), normal, lighter,     bol...
FONT PROPERTIES – FONT-WEIGHT#5WaysCSS
3    LINKS
THE RUNDOWN HTML <a href=“page.html”>Click here!</a> CSS Example a { color: green; }#5WaysCSS
PSEUDO-CLASSES • :link (normal state) • :visited (a link the user has already visited) • :hover (a link when the user mous...
LINKS ARE TEXT AND BOXES, TOO! • CSS box properties and text/font properties apply   to links also! • Experiment, mix and ...
JUST A FEW THINGS YOU CAN DO…#5WaysCSS
CSS LINK RESOURCES • Link Pseudo-Classes (In Order): http://css-   tricks.com/snippets/css/link-pseudo-classes-in-order • ...
4    IMAGES
HOW IMAGES ARE USED IN CSS • background-image (use for any element) • list-style-image (used for <ul> elements) • opacity ...
BACKGROUND-IMAGE PROPERTY • Uses an image in the background of an element • Image repeats horizontally and vertically by d...
BACKGROUND-IMAGE PROPERTY#5WaysCSS
BACKGROUND-REPEAT PROPERTY • Controls horizontal or vertical repetition of   background-image    – Values are repeat-x, re...
BACKGROUND-REPEAT PROPERTY#5WaysCSS
BACKGROUND-POSITION PROPERTY • Controls position of the background-image relative to   the element’s height and width    –...
BACKGROUND-POSITION PROPERTY#5WaysCSS
LIST-STYLE-IMAGE PROPERTY • Changes the bullets in a bulleted list to an image of   your choice    – Value is the URL of y...
LIST-STYLE-IMAGE PROPERTY#5WaysCSS
OPACITY PROPERTY • Changes the transparency of your image    –Value is a decimal number from 0.00 to 1.00 • Example: img {...
OPACITY PROPERTY#5WaysCSS
IMAGES ARE BOXES, TOO! • CSS box properties apply to images also!    –padding    –margin    –border    –background-color •...
5    ANIMATION
ADVANCED, BUT IMPRESSIVE • 2D Transforms • 3D Transforms • Transitions • Animations NOTE: Support is mixed across browsers...
CSS ANIMATION RESOURCES •   2D Transforms: http://westciv.com/tools/transforms/index.html •   3D Transforms: http://westci...
WRAP-UP • CSS is a powerful language that controls the presentation of   nearly every element on a web page. • Save your m...
http://eepurl.com/sVmz9#5WaysCSS
QUESTIONS?mail@3eighteenmedia.com | @3eighteenmedia#5WaysCSS
Upcoming SlideShare
Loading in …5
×

5 Ways to Customize Your Website with CSS

454 views
410 views

Published on

CSS is one of the primary building blocks of the Internet. But to the average person, it may just look like a bunch of random code. Wouldn't you like to know how to understand that code so you can make changes to your website without forking over hundreds of dollars to a web designer?

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
454
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

5 Ways to Customize Your Website with CSS

  1. 1. 5 WAYS TO CUSTOMIZEYOUR WEBSITE WITH CSSDecember 13, 2012#5WaysCSS
  2. 2. WHO’S THIS GUY? Maurice Cherry Creative Principal, 3eighteen media mail@3eighteenmedia.com @3eighteenmedia#5WaysCSS
  3. 3. #5WaysCSS
  4. 4. THE RUNDOWN • What is CSS? • 5 Ways to Customize Your Website With CSS • Wrap-Up • Questions#5WaysCSS
  5. 5. 0 WHAT IS CSS?
  6. 6. CSS = CASCADING STYLE SHEET • A style sheet language • A file that contains style rules which tell the browser how to present HTML elements • CSS Example: h1 { color: red; background-color: black}#5WaysCSS
  7. 7. CSS = CASCADING STYLE SHEET#5WaysCSS
  8. 8. CSS = CASCADING STYLE SHEET#5WaysCSS
  9. 9. RULES, RULES, RULES h1 { color: red; background-color: black; }#5WaysCSS
  10. 10. RULES, RULES, RULES h1 { color: red; background-color: black; }#5WaysCSS
  11. 11. RULES, RULES, RULESselector h1 { color: red; background-color: black; }#5WaysCSS
  12. 12. RULES, RULES, RULES declaration h1 { color: red; background-color: black; }#5WaysCSS
  13. 13. RULES, RULES, RULES value value h1 { color: red; background-color: black; } property property#5WaysCSS
  14. 14. #5WaysCSS
  15. 15. CASCADE (THE “C” IN “CSS”) • The cascade tells browsers the order in which to process rules in CSS stylesheets to prevent conflicts and collisions. • Browser, User, Author • External, Internal, Inline#5WaysCSS
  16. 16. CASCADE (THE “C” IN “CSS”)#5WaysCSS
  17. 17. CASCADE (THE “C” IN “CSS”)#5WaysCSS
  18. 18. INHERITANCE • Inheritance means that child elements will inherit properties from their parent element. • Inheritance works on a property by property basis.#5WaysCSS
  19. 19. INHERITANCE#5WaysCSS
  20. 20. INHERITANCE CSS body { color: blue; } HTML <body> <h1>This is some text. What color am I?</h1> </body>#5WaysCSS
  21. 21. INHERITANCE CSS body { color: blue; } HTML <body> <! -- parent element --> <h1>This is some text. What color am I?</h1> <!– child element --> </body> NOTE: NOT ALL PROPERTIES ARE INHERITABLE, BUT INHERITANCE CAN BE FORCED.#5WaysCSS
  22. 22. #5WaysCSS
  23. 23. BEFORE YOU EDIT YOUR CSS… • Test your CSS in a “code sandbox” first. • Save a copy of the original .css file!#5WaysCSS
  24. 24. BEFORE YOU EDIT YOUR CSS… • Codepen: http://codepen.io • CSSDesk: http://cssdesk.com • Dabblet: http://dabblet.com • JS Bin: http://jsbin.com • JSFiddle: http://jsfiddle.net • Tinkerbin: http://tinkerbin.com#5WaysCSS
  25. 25. 1 BOXES
  26. 26. EVERYTHING IN HTML IS A BOX#5WaysCSS
  27. 27. EVERYTHING IN HTML IS A BOX• Links: <a href=“index.html”>Click here</a>• Text: <p>This is some text.</p>• Images: <img src=“image.jpg” />• Boxes: several of these • <div>, <blockquote>, <header>, <section>, <figure>, <aside>, <footer>, etc.#5WaysCSS
  28. 28. #5WaysCSS
  29. 29. #5WaysCSS
  30. 30. #5WaysCSS
  31. 31. #5WaysCSS
  32. 32. MARGIN PROPERTIES • margin-top, margin-right, margin-bottom, margin-left • CSS Example: h1 { margin-top: 10px; margin-bottom: 10px; } • Remember: margins control space outside of the border.#5WaysCSS
  33. 33. #5WaysCSS
  34. 34. BORDER PROPERTIES • border-top-width, border-top-style, border-top-color, etc. • Shorter property: border-top, border-bottom, etc. • Default width: 1 pixel (px) • Default style: solid • Default color: black • CSS Example: h1 { border-left-width: 10px; border-left-color: yellow; border-left-style: solid }#5WaysCSS
  35. 35. BORDER PROPERTIES (CSS3) • border-top-left-radius, border-top-right-radius, border- bottom-right-radius, border-bottom-left-radius • Shorter property: border-radius • Creates rounded borders on boxes • CSS Example: h1 { border-top-left-radius: 10px; background-color: red; } /* This will round the top left corner. */#5WaysCSS
  36. 36. BORDER PROPERTIES (CSS3)#5WaysCSS
  37. 37. BORDER PROPERTIES (CSS3) • box-shadow • Creates drop shadows for boxes, can be stacked to create multiple shadows • CSS Example: p { box-shadow: 10px 10px 5px #888; } /* This creates a drop shadow that is underneath the box and to the right. */#5WaysCSS
  38. 38. BORDER PROPERTIES (CSS3)#5WaysCSS
  39. 39. #5WaysCSS
  40. 40. PADDING PROPERTIES • padding-top, padding-right, padding-bottom, padding-left • CSS Example: h1 { padding-left: 10px; padding-right: 5px; } • Remember: padding controls space inside of the border.#5WaysCSS
  41. 41. OTHER BOX PROPERTIES • height (number with units of length or percentage) • width (number with units of length or percentage) • background-color (color name, hexadecimal code, RGB color code) – Controls the background color of an element – Example: h1 { background-color: red; } /* The background of this HTML element will be red. */#5WaysCSS
  42. 42. TRY PUTTING IT ALL TOGETHER! • CSS div { background-color: red; height: 200px; width: 200px; border: 2px solid blue; padding: 20px; margin: 40px; } • HTML <div>This is an example of what you can do!</div>#5WaysCSS
  43. 43. 2 TEXT
  44. 44. TEXT AND FONT PROPERTIES • These apply to all text elements in HTML • Example: <p>, <blockquote>, <cite>, <h1>, <h2>, etc.#5WaysCSS
  45. 45. TEXT PROPERTIES • color, letter-spacing, text-align, text- decoration, text-indent, text-transform, word- spacing#5WaysCSS
  46. 46. TEXT PROPERTIES – COLOR • Color values – color names (red, black, yellow, etc.) – hexadecimal codes (#FF0000, #BADA55, etc.) – RGB color code (rgb(255,0,0)) • Example: h1 { color: rgb(255,0,0); } /* red */#5WaysCSS
  47. 47. TEXT PROPERTIES – LETTER-SPACING • Adjusts the space between letters – Values are numbers with units of length • Example: h1 { letter-spacing: 0.5em; }#5WaysCSS
  48. 48. TEXT PROPERTIES – LETTER-SPACING#5WaysCSS
  49. 49. TEXT PROPERTIES – TEXT-ALIGN • Controls the alignment of text within its bounding box – Values are left, right, center, justify • Example: h1 { text-align: center; }#5WaysCSS
  50. 50. TEXT PROPERTIES – TEXT-ALIGN#5WaysCSS
  51. 51. TEXT PROPERTIES – TEXT-DECORATION • Controls the “decoration” of text – Values are underline, overline, line-through, blink • Example: h1 { text-decoration: underline; } • Not to be confused with the border-bottom property!#5WaysCSS
  52. 52. TEXT PROPERTIES – TEXT-DECORATION#5WaysCSS
  53. 53. TEXT PROPERTIES – TEXT-INDENT • Indents the first line of text in an element – Values are numbers or percentages • Example: h1 { text-indent: 1em; }#5WaysCSS
  54. 54. TEXT PROPERTIES – TEXT-INDENT#5WaysCSS
  55. 55. TEXT PROPERTIES – TEXT-TRANSFORM • Controls the case of text – Values are uppercase, lowercase, capitalize • Example: h1 { text-transform: capitalize; } • Capitalize is the same as title case#5WaysCSS
  56. 56. TEXT PROPERTIES – TEXT-TRANSFORM#5WaysCSS
  57. 57. TEXT PROPERTIES – WORD-SPACING • Controls the spacing between words – Values are numbers with units of length • Example: h1 { word-spacing: 5px; }#5WaysCSS
  58. 58. TEXT PROPERTIES – WORD-SPACING#5WaysCSS
  59. 59. FONT PROPERTIES • font-family, font-size, font-style, font-variant, font-weight#5WaysCSS
  60. 60. FONT PROPERTIES • Shorter property: font#5WaysCSS
  61. 61. FONT PROPERTIES – FONT-FAMILY • Changes the font – Values are names of fonts, usually in a font stack, with a generic font family at the end • Example: h1 { font-family: Arial, Helvetica, sans- serif; } • Web fonts (Google Web Fonts, Typekit, etc.)#5WaysCSS
  62. 62. FONT PROPERTIES – FONT-FAMILY#5WaysCSS
  63. 63. FONT PROPERTIES – FONT-SIZE • Changes the size of the font – Values are numbers with units of length or percentages • Example: h1 { font-size: 30px; }#5WaysCSS
  64. 64. FONT PROPERTIES – FONT-SIZE#5WaysCSS
  65. 65. FONT PROPERTIES – FONT-STYLE • Changes the style of the font – Values are normal, italic, or oblique • Example: h1 { font-style: italic; } • Italic and oblique look the same, but aren’t; when in doubt go with italic#5WaysCSS
  66. 66. FONT PROPERTIES – FONT-STYLE#5WaysCSS
  67. 67. FONT PROPERTIES – FONT-VARIANT • Changes the variance of the font – Values are normal or small-caps • Example: h1 { font-variant: small-caps; }#5WaysCSS
  68. 68. FONT PROPERTIES – FONT-VARIANT#5WaysCSS
  69. 69. FONT PROPERTIES – FONT-WEIGHT • Changes the weight of the font – Values are numbers (100-900), normal, lighter, bold, bolder • Example: h1 { font-weight: bold; } • You’ll really only use normal and bold.#5WaysCSS
  70. 70. FONT PROPERTIES – FONT-WEIGHT#5WaysCSS
  71. 71. 3 LINKS
  72. 72. THE RUNDOWN HTML <a href=“page.html”>Click here!</a> CSS Example a { color: green; }#5WaysCSS
  73. 73. PSEUDO-CLASSES • :link (normal state) • :visited (a link the user has already visited) • :hover (a link when the user mouses over it) • :active (a link when it’s clicked) • Examples: a:hover { color:red; } a:visited { color:orange; }#5WaysCSS
  74. 74. LINKS ARE TEXT AND BOXES, TOO! • CSS box properties and text/font properties apply to links also! • Experiment, mix and match, and find your own stylish combos!#5WaysCSS
  75. 75. JUST A FEW THINGS YOU CAN DO…#5WaysCSS
  76. 76. CSS LINK RESOURCES • Link Pseudo-Classes (In Order): http://css- tricks.com/snippets/css/link-pseudo-classes-in-order • Button Maker: http://css-tricks.com/examples/ButtonMaker • CSS Button Generator: http://www.cssbuttongenerator.com • CSS Button | CSS Generator: http://www.cssbutton.me/generator • CSS Gradient Button: http://cssgradientbutton.com • CSS3 Button Generator: http://css3button.net#5WaysCSS
  77. 77. 4 IMAGES
  78. 78. HOW IMAGES ARE USED IN CSS • background-image (use for any element) • list-style-image (used for <ul> elements) • opacity (controls transparency)#5WaysCSS
  79. 79. BACKGROUND-IMAGE PROPERTY • Uses an image in the background of an element • Image repeats horizontally and vertically by default • Repetition can be changed with background-repeat property; position can be changed with background- position property • Example: h1 { background-image: url(‘image.jpg); }#5WaysCSS
  80. 80. BACKGROUND-IMAGE PROPERTY#5WaysCSS
  81. 81. BACKGROUND-REPEAT PROPERTY • Controls horizontal or vertical repetition of background-image – Values are repeat-x, repeat-y, no-repeat, repeat • Example: h1 { background-repeat: repeat-x; } /* The background image will repeat horizontally. */#5WaysCSS
  82. 82. BACKGROUND-REPEAT PROPERTY#5WaysCSS
  83. 83. BACKGROUND-POSITION PROPERTY • Controls position of the background-image relative to the element’s height and width – Values are repeat-x, repeat-y, no-repeat, repeat • Example: h1 { background-repeat: repeat-x; } /* The background image will repeat horizontally. */#5WaysCSS
  84. 84. BACKGROUND-POSITION PROPERTY#5WaysCSS
  85. 85. LIST-STYLE-IMAGE PROPERTY • Changes the bullets in a bulleted list to an image of your choice – Value is the URL of your image • Example: ul { list-style-image: url(‘bullet.gif); } /* The bullets in the <ul> list will be replaced with bullet.gif. Use a small image. */#5WaysCSS
  86. 86. LIST-STYLE-IMAGE PROPERTY#5WaysCSS
  87. 87. OPACITY PROPERTY • Changes the transparency of your image –Value is a decimal number from 0.00 to 1.00 • Example: img { opacity: 0.5; } /* This image will have 50% transparency. */ • Text is also affected by opacity, so use carefully! • Can be used in conjunction with pseudo-classes#5WaysCSS
  88. 88. OPACITY PROPERTY#5WaysCSS
  89. 89. IMAGES ARE BOXES, TOO! • CSS box properties apply to images also! –padding –margin –border –background-color • Experiment to find your own combinations!#5WaysCSS
  90. 90. 5 ANIMATION
  91. 91. ADVANCED, BUT IMPRESSIVE • 2D Transforms • 3D Transforms • Transitions • Animations NOTE: Support is mixed across browsers.#5WaysCSS
  92. 92. CSS ANIMATION RESOURCES • 2D Transforms: http://westciv.com/tools/transforms/index.html • 3D Transforms: http://westciv.com/tools/3Dtransforms/index.html • CSS Transition: http://www.css3maker.com/css3-transition.html • CSS Animation: http://www.css3maker.com/css3-animation.html#5WaysCSS
  93. 93. WRAP-UP • CSS is a powerful language that controls the presentation of nearly every element on a web page. • Save your main CSS file before experimenting on your website. • Learn the basics by practicing on code playgrounds. • Don’t reinvent the wheel – use code generators where necessary to save time!#5WaysCSS
  94. 94. http://eepurl.com/sVmz9#5WaysCSS
  95. 95. QUESTIONS?mail@3eighteenmedia.com | @3eighteenmedia#5WaysCSS

×