Web front end development introduction to html css and javascript
Seu SlideShare está sendo baixado.
×
Confira estes a seguir
Mais Conteúdo rRelacionado
Diapositivos para si (20)
Semelhante a Intro to CSS (20)
Mais de Randy Oest II (7)
Mais recentes (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…
- 6. CSS is the muscle and skin.
- 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>
- 27. Obligatory Baby Pictures
- 28. </interlude>
- 29. Box Model
- 30. Elements of the Box
- 31. An element’s size is equal to: Width (or Height) + Padding + Border + Margin = Total Size The Box Model is Tricky
- 32. .box { width: 200px; padding: 10px; border: 5px; margin: 15px; }
- 33. 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
- 34. There is a Better Way
- 35. Use a Different Box Model
- 36. *, *:before, *:after { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } Magic Bullet
- 37. selector { -‐webkit-‐box-‐sizing: border-‐box; -‐moz-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } Fixing A Single Item
- 38. An element’s size is equal to the width size. Border Box is NOT Tricky
- 39. Content-Box (Default) Border-Box (Good!)
- 40. padding-‐top: 10px; padding-‐right: 5px; padding-‐bottom: 10px; padding-‐left: 5px; OR padding: 10px 5px 10px 5px; Shorthand
- 41. Starts at NOON and goes clockwise. padding: top right bottom left; Shorthand
- 42. padding: top+bottom right+left; padding: 10px 5px; Even More Shorthand
- 43. The Display Property
- 44. Block: <h1>, <p>, <div> Inline: <a>, <span>, <b>, <strong> The Display Property
- 45. a { display: block; } The Display Property
- 46. There are many more exotic display types, such as inline-‐block, none, etc. The Display Property
- 47. Flow
- 48. Floats
- 49. img { float: left; } The Display Property
- 50. Positioning can change an element in the flow.
- 51. Positioning Parent Element position: static
- 52. img { position: static; } Positioning This is the default, no need to write it
- 53. Positioning Parent Element position: fixed Fixed in relation to the browser.
- 54. img { position: fixed; top: 0px; left: 0px; } Positioning
- 55. top: 0px; right: 0px; bottom: 0px; left: 0px; Positioning
- 56. Positioning Parent Element position: relative
- 57. img { position: relative; top: -‐10px; left: -‐200px; } Positioning
- 58. Positioning Parent Element position: absolute position: static
- 59. img { position: absolute; top: 0px; left: 0px; } Positioning
- 60. Absolute positioning looks for the parent with a position other than static.
- 61. Positioning
- 62. Positioning Parent Element position: absolute position: relative
- 63. img { position: absolute; top: 0px; left: 0px; } Positioning
- 64. A Quick Note About Mobile
- 65. Most CSS that you write for mobile is just CSS.
- 66. Percentages and relative units, like EMs are better than pixels, which are static width.
- 67. @media all and (max-‐width: 699px){ … styles } Media Query
- 68. Further Learning RandyOest.com/CSS
