Web Design Class: CSS (Cascading Style Sheets) Fundamentals

0 views
535 views

Published on

This "beta" deck is for a CSS (Cascading Style Sheets) Fundamentals course I first gave at the West Hollywood Library on 14 February 2014. It's still in beta, because I will very likely be refining it and the way I'm going to be teaching the class. In addition to the deck, I gave participants two handouts: 1) the HTML source for Fluffy's page, 2) the CSS Stylesheet for Fluffy's page. Fluffy is my fictional cat.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Web Design Class: CSS (Cascading Style Sheets) Fundamentals

  1. 1. Photo: (cc) Uta Wollf, Rodebay (With permission) WEB DESIGN CLASS: CSS FUNDAMENTALS (OR THE TIP beta OF THE ICEBERG) Oleg Kagan, okagan@library.lacounty.gov
  2. 2. STYLE SHEETS? Photo: (cc) Dreftymac Wikimedia Commons
  3. 3. WWW.CSSZENGARDEN.COM
  4. 4. CASCADING? USER AGENT (browser defaults) EXTERNAL STYLESHEET (seperate file) INTERNAL STYLESHEET (in <head> tags) INLINE STYLE (in other tags) USER-DEFINED STYLE
  5. 5. WHERE WILL FLUFFY GO?
  6. 6. WHERE WILL FLUFFY GO?
  7. 7. RULES ARE MADE TO BE... selector { property: value; }
  8. 8. SEE? Selector body { background: #0097ff; font-family: Arial, sans-serif; color:black; Value } Property
  9. 9. 5 SELECTORS TO KNOW a:link {text-decoration:none; color: #40FF00; } *{ padding:0; margin:0; } a:visited {text-decoration:none; color: #40FF00; } a:hover {text-decoration:underline; } a:active { }
  10. 10. RULING THE HEADER! h1 { letter-spacing:3px; font-size: 60px; margin: 10px 0px 10px 0px; width:100%; text-align:center; } text-transform: capitalize|uppercase|lowercase|initial|inherit; line-height: value;
  11. 11. RULING THE PARAGRAPH! <p style="width:50%; textalign:center; margin-left:350px;"> My Paragraph</p> INLINE STYLE (in other tags)
  12. 12. CLASSES & IDS, OH MY! <hr class="groovy-hrs" /> Class: Many of the same.  ID: One of a kind. 
  13. 13. <DIV> AND CONQUER <div id="favorite-things"> #favorite-things { float:left; margin: 20px 20px 20px 353px; 20px } 353px 20px 20px
  14. 14. BOX MODEL More: http://www.w3schools.com/css/css_boxmodel.asp
  15. 15. A FEW GOOD PROPERTIES... o border: 3px white solid; o list-style-type: disc|square|circle; o float: left|right|turn-yourself-around; o display: Play it! o position: Play it! o font-size: value px / em / pt / % etc; o font-style: italic|oblique|initial|inherit; o font-weight: 100-900, etc.;
  16. 16. QUESTIONS?
  17. 17. THANK YOU

×