css
play

CSS (LOOKN GOOD) WHAT IS IT? h2 { font-family: helvetica; color: - PowerPoint PPT Presentation

Apr 05, 2024 •260 likes •686 views

CSS (LOOKN GOOD) WHAT IS IT? h2 { font-family: helvetica; color: red; font-size: 12px; } SELECTOR VALUE h2 { font-family: helvetica; color: red; font-size: 12px; } PROPERTY THIS IS A HEADLINE THIS IS A HEADLINE WHAT ELSE CAN IT

  1. CSS (LOOK’N GOOD)

  2. WHAT IS IT?

  3. h2 { font-family: helvetica; color: red; font-size: 12px; }

  4. SELECTOR VALUE h2 { font-family: helvetica; color: red; font-size: 12px; } PROPERTY

  5. THIS IS A HEADLINE THIS IS A HEADLINE

  6. WHAT ELSE CAN IT DO?

  7. WHAT ELSE CAN IT DO? - TYPOGRAPHY - COLOR - IMAGES - STRUCTURE/LAYOUT - COMPOSITION - ANIMATIONS - BASICALLY, ANYTHING VISUAL

  8. CSSZENGARDEN

  9. TYPE font-family (Helvetica, Times, etc.) font-size color text-align (left, center, right) text-decoration (underline, none) text-style (italic, normal) font-weight (bold, normal)

  10. LAYOUT margin padding border width height

  11. LAYOUT WIDTH Pork belly etsy beard fixie. Chillwave banh mi HEIGHT american apparel, trust fund bushwick skateboard viral. PADDING Wolf messenger bag twee, raw denim terry richardson MARGIN forage selvage single-origin coffee. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up. BORDER

  12. LET’S TRY IT

  13. MAKE ‘style.css’

  14. STUFF THIS IN YOUR <HEAD> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

  15. h1 { font-family: helvetica; color: red; font-size: 12px; }

  16. UNITS (SIZE) 12px 15pt 1.2em 80%

  17. UNITS (COLOR) blue #fa3c14 rgb(125,74,214) rgba(159,15,88,.7)

  18. BACKGROUNDS background: red; background: url(../img/imagename.png);

  19. ! S U N O B Subtle Patterns

  20. ID’S AND CLASSES (NAMIN’ NAMES)

  21. ID HTML: <h2 id=“subtitle”>TITLE</h2> CSS: #subtitle { ... }

  22. CLASS HTML: <h2 class=“subtitle”>TITLE</h2> CSS: .subtitle { ... }

  23. WHICH ELEMENTS CAN CLASSES AND IDS BE APPLIED TO?

  24. ALL OF THEM

  25. BUT WHAT ABOUT THE <HEADER> TAG?

  26. WHAT DID I JUST SAY?!

  27. ALL OF THEM

  28. ID’S LET’S KEEP IT CLASSY CLASSES

  29. SELECTORS p { ... } SELECTS ALL <p> TAGS h1, h2, h3 { ... } SELECTS ALL <h1>, <h2>, and <h3> TAGS div p { ... } SELECTS ALL <p> TAGS INSIDE OF A <div> tag * { ...} SELECTS ALL ELEMENTS div * { ... } SELECTS ALL ELEMENTS INSIDE ANY DIV #idname { ... } SELCTS ANY ELEMENT WITH “idname” AS AN ID .class { ... } SELCTS ANY ELEMENT WITH “class” AS A CLASS

  30. INHERITANCE <section> <h2>Section Title</h2> <p>Important Information</p> <p>Important Information</p> </section>

  31. ORDER OF PRECEDENCE .blue { color: blue; } div { color: green; } <div class=“blue”>What AM I?!?!</div>

  32. ORDER OF PRECEDENCE 1. NO. OF ID’S 2. NO. OF CLASSES 3. NO. OF ELEMENTS 4. ORDER OF APPEARANCE

  33. ORDER OF PRECEDENCE 1. NO. OF ID’S #container #sidebar ul { ... } WILL BEAT #container ul { ... }

  34. ORDER OF PRECEDENCE 2. NO. OF CLASSES .container .sidebar ul { ... } WILL BEAT .container ul { ... }

  35. ORDER OF PRECEDENCE 3. NO. OF ELEMENTS div p a { ... } WILL BEAT a { ... }

  36. ORDER OF PRECEDENCE 0 0 0 NUMBER OF IDS CLASSES ELEMENTS/PSEUDEO ELEMENTS

  37. ORDER OF PRECEDENCE 0 0 0 NUMBER OF IDS CLASSES ELEMENTS/PSEUDEO ELEMENTS 0 2 1 .container .sidebar ul { ... } 1 0 1 #container ul { ... }

  38. ORDER OF PRECEDENCE 4. ORDER OF RULES h3 { ... } (LINE 62) WILL BEAT h3 { ... } (LINE 17)

  39. ! S U N O B FIREBUG IS SOOOO HAWT.

  40. WHATEVER, THOM. IT STILL LOOKS LIKE A MARGINALLY PRETTIER LIST OF CONTENT.

  41. THAT’S TRUE

  42. THAT’S TRUE ...FOR NOW.

Recommend

More recommend