Intro to CSS
•
2 gostaram•1,012 visualizações
Slides from my Intro to CSS class. More info at http://randyoest.com.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Intro to CSS
Semelhante a Intro to CSS (20)
Mais de Randy Oest II
Último
Último (20)
Intro to CSS
- 1. Intro to CSS
- 2. Randy Oest Manager of Digital Design Williams Randall Marketing ! @amazingrando
- 3. Why Learn CSS? 1. Running a blog on a CMS and want to tweak things 2. Working with a developer and want to understand how to talk with them 3. Web designer looking to understand how things get built
- 4. What We’ll Learn 1. What is CSS 2. How to speak CSS 3. How to apply it 4. Where to find out more info
- 5. If HTML is the Skeleton of Web pages…
- 7. CSS Needs HTML CSS is used to style elements, giving them form.
- 8. HTML Elements <p>Paragraph …</p> <div class=“nav”>…</div> <h1 id=“title”>Headline</h1>
- 9. CSS Needs HTML Selectors are used to target styles.
- 10. Examples of Selectors <p>Paragraph …</p> p { … }
- 11. Examples of Selectors <div class=“nav”>…</div> .nav { … }
- 12. Classes Class names always start with a period. .class
- 13. IDs IDs always start with a hash. There can only be one on a page. #id
- 14. Think of classes as your name and nicknames, e.g. Randy, Amazing Rando, Hey You… Think of IDs as your unique social security or credit card numbers.
- 15. Multiple Selectors <h1 id=“title”>Headline</h1> h1#title { … } No spaces!
- 16. Specificity When there is a style conflict, IDs trump classes, and classes trump HTML elements
- 17. Nested Elements <div id=“feature”> <img src=“…” /> Some Text … </div>
- 18. Nested Elements <div id=“feature”> <img src=“…” /> #feature img { … } Now there is a space.
- 19. .class { color: #fff; padding: 10px; } Properties & Values Property Value
- 20. PX: Pixels %: Percentage EM: Relative unit, equal to the current font size Common Size Units
- 21. EMs, being relative units, can get complicated quickly when you nest them. Warning about EMs
- 22. 1. External File 2. Internal, using the <style> tag 3. Inline styles Getting CSS into the HTML
- 23. Put this inside the <head> <link rel="stylesheet" href="file.css"> External File
- 24. Put this inside the <head> <style type="text/css"> … your styles … </style> Internal
- 25. <h1 style=“color:#fff;”> Headline </h1> Inline HTML
- 26. <interlude>
- 31. </interlude>
- 32. Box Model
- 33. Elements of the Box
- 34. An element’s size is equal to: Width (or Height) + Padding + Border + Margin = Total Size The Box Model is Tricky
- 35. .box { width: 200px; padding: 10px; border: 5px; margin: 15px; }
- 36. So if we plug in values: Width (200px) + Padding (10px * 2 sides) + Border (5px * 2 sides) + Margin (15 px * 2 sides) = Total Size (260px) The Box Model is Tricky
- 37. There is a Better Way
- 38. Use a Different Box Model
- 39. *, *:before, *:after { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } Magic Bullet
- 40. selector { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } Fixing A Single Item
- 41. An element’s size is equal to the width size. Border Box is NOT Tricky
- 43. padding-‐top: 10px; padding-‐right: 5px; padding-‐bottom: 10px; padding-‐left: 5px; OR padding: 10px 5px 10px 5px; Shorthand
- 44. Starts at NOON and goes clockwise. padding: top right bottom left; Shorthand
- 45. padding: top+bottom right+left; padding: 10px 5px; Even More Shorthand
- 47. Block: <h1>, <p>, <div> Inline: <a>, <span>, <b>, <strong> The Display Property
- 48. a { display: block; } The Display Property
- 49. There are many more exotic display types, such as inline-‐block, none, etc. The Display Property
- 50. Flow
- 51. Floats
- 52. img { float: left; } The Display Property
- 53. Positioning can change an element in the flow.
- 55. img { position: static; } Positioning This is the default, no need to write it
- 56. Positioning Parent Element position: fixed Fixed in relation to the browser.
- 57. img { position: fixed; top: 0px; left: 0px; } Positioning
- 58. top: 0px; right: 0px; bottom: 0px; left: 0px; Positioning
- 60. img { position: relative; top: -‐10px; left: -‐200px; } Positioning
- 62. img { position: absolute; top: 0px; left: 0px; } Positioning
- 63. Absolute positioning looks for the parent with a position other than static.
- 64. Positioning
- 66. img { position: absolute; top: 0px; left: 0px; } Positioning
- 67. A Quick Note About Mobile
- 68. Most CSS that you write for mobile is just CSS.
- 69. Percentages and relative units, like EMs are better than pixels, which are static width.
- 70. @media all and (max-‐width: 699px){ … styles } Media Query