Intro to CSS
•
2 likes•1,014 views
This document provides an introduction to CSS (Cascading Style Sheets) and covers key concepts such as selectors, the box model, positioning, and responsive design. It explains that CSS is used to style and lay out elements on web pages and works together with HTML. The document outlines important CSS topics like selectors, properties and values, units of measurement, the box model, display types, flow, floats, and positioning. It emphasizes best practices like using relative units and media queries for responsive designs.
Report
Share
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