Download as PDF, PPTX
Uploaded byRandy Oest II
Intro to CSS
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.
More Related Content
Intro to CSS
- 1.
- 2. Randy Oest Manager ofDigital 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 ofWeb pages…
- 6.
- 7. CSS Needs HTML CSSis 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 areused 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 startwith a period. .class
- 13. IDs IDs always start with a hash. There can only be one on a page. #id
- 14. Think of classesas 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 isa 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 insidethe <head> <link rel="stylesheet" href="file.css"> External File
- 24. Put this insidethe <head> <style type="text/css"> … your styles … </style> Internal
- 25. <h1 style=“color:#fff;”> Headline </h1> Inline HTML
- 26.
- 27.
- 31.
- 32.
- 33.
- 34. An element’s sizeis 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 weplug 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.
- 38. Use a Different BoxModel
- 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 isequal to the width size. Border Box is NOT Tricky
- 42.
- 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
- 46.
- 47. Block: <h1>, <p>, <div> Inline: <a>, <span>, <b>, <strong> The Display Property
- 48. a { display: block; } The Display Property
- 49. There are manymore exotic display types, such as inline-‐block, none, etc. The Display Property
- 50.
- 51.
- 52. img { float: left; } The Display Property
- 53. Positioning can change anelement in the flow.
- 54.
- 55. img { position: static; } Positioning This is the default, no need to write it
- 56. Positioning Parent Element position: fixed Fixed inrelation to the browser.
- 57. img { position: fixed; top: 0px; left: 0px; } Positioning
- 58. top: 0px; right: 0px; bottom: 0px; left: 0px; Positioning
- 59.
- 60. img { position: relative; top: -‐10px; left: -‐200px; } Positioning
- 61.
- 62. img { position: absolute; top: 0px; left: 0px; } Positioning
- 63. Absolute positioning looks forthe parent with a position other than static.
- 64.
- 65.
- 66. img { position: absolute; top: 0px; left: 0px; } Positioning
- 67. A Quick Note AboutMobile
- 68. Most CSS thatyou 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
- 71.