TMW Code Club – Session 2 - CSS Basics
- 1. TMW Code Club TMW Code Club Week 2: CSS – The fundamentals
- 2. TMW Code Club Do you know more than this guy?
- 4. TMW Code Club HTML, CSS, JavaScriptContent Styling Behaviour Text, images, video Colours, borders, backgrounds, shadows Click, touch, scroll, hover
- 5. TMW Code Club Week 2 CSS – The basics • The cascade • Importance, specificity and source order • Classes and IDs • CSS properties and terminology
- 6. TMW Code Club CSS Cascading Style Sheets
- 7. TMW Code Club By combining importance, origin, specificity, and the source order of the style concerned, the CSS cascade assigns a weight to each declaration. This weight is used to determine exactly, and without conflict, which style declarations should be applied to a specific element: the declaration with the highest weight takes precedence. What is this cascade? http://reference.sitepoint.com/css/cascade 7
- 8. TMW Code Club By combining importance, origin, specificity, and the source order of the style concerned, the CSS cascade assigns a weight to each declaration. This weight is used to determine exactly, and without conflict, which style declarations should be applied to a specific element: the declaration with the highest weight takes precedence. What is this cascade? http://reference.sitepoint.com/css/cascade 8
- 9. TMW Code Club Remember this?
- 10. TMW Code Club What happens here?
- 11. TMW Code Club Let’s try it for real codepen.io/mrmartineau/pen/nfDcE
- 12. TMW Code Club Selectors • Element • Classes • IDs • Complex selectors
- 13. TMW Code Club Element selectors • Matches elements with the corresponding element type name • Quite general and not very specific.
- 14. TMW Code Club What are classes and IDs? When there are more than one of a given element on the page, and you need to look different, you will need to use classes and IDs. <div></div> ! <div id=“foo”></div> ! <div class=“bar”></div> Element: ! ID: ! Class:
- 15. TMW Code Club What are classes and IDs? • IDs are unique. Only one allowed per page. • Multiple classes can be used per page & elements can even have multiple classes <div></div> ! <div id=“foo”></div> ! <div class=“bar”></div> Element: ! ID: ! Class:
- 16. TMW Code Club ID selectors Matches an element that has a specific id attribute value. Since id attributes must have unique values, an ID selector can never match more than one element in a document.
- 17. TMW Code Club Class selectors Less specific than an ID because they are not unique
- 18. TMW Code Club More complex selectors Siblings, Children and descendent selectors
- 19. TMW Code Club Selector examples codepen.io/mrmartineau/pen/jgCvq
- 20. TMW Code Club CSS Properties Basic Styling
- 21. TMW Code Club color (or colour)
- 22. TMW Code Club color (or colour) The color property sets the text colour of an elements content, and it’s decorations (such as underlines, or line throughs). More info: https://developer.mozilla.org/en-US/docs/Web/CSS/color
- 23. TMW Code Club color (or colour) Colours in CSS can be defined in a number of ways. To set our text colour to black, we could define it… ! …as a hex code = #000 = #000000 …an RGB value = rgb(0, 0, 0) …an hsl value = hsl(0%, 0%, 0%) …or using the reserved CSS keyword ‘black’ More info: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
- 24. TMW Code Club color (or colour) You can also set colours for the following properties: ! background-color! color! border-color!
- 25. TMW Code Club color example codepen.io/ashleynolan/pen/Blnkc
- 27. TMW Code Club background The background property allows you to control the background of any element. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/background
- 28. TMW Code Club background Can be an image: background-image: url(‘myimage.png’);! ! or a color, as mentioned before: background-color: #fff; More info: https://developer.mozilla.org/en-US/docs/Web/CSS/background
- 29. TMW Code Club background Some properties have a shortcut alternative, in which you can specify multiple properties at once. ! background-color: #fff;! background-image: url(‘myimage.png’);! becomes background: #fff url(‘myimage.png’); More info: https://developer.mozilla.org/en-US/docs/Web/CSS/background
- 30. TMW Code Club background background also has other properties ! background-image! background-position! background-repeat! background-color More info: https://developer.mozilla.org/en-US/docs/Web/CSS/background
- 31. TMW Code Club background example http://codepen.io/ashleynolan/pen/dxocr
- 32. TMW Code Club text properties
- 33. TMW Code Club text properties Text has a number of CSS properties that can be applied. More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size
- 34. TMW Code Club font-size text properties font-size can be defined in px (as well as a few other ways which we‘ll get to in a later lesson) ! font-size: 16px; More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size
- 35. TMW Code Club line-height text properties line-height can also be defined in px, but can also be unitless, which is relative to the font-size ! line-height: 16px;! or line-height: 1.5;! where the line-height is multiplied by the font-size More info: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
- 36. TMW Code Club text decoration text properties Text can be given a text-decoration ! So for example, links (<a> tags) have the following by default: ! text-decoration: underline;! ! It takes the following values: underline, line-through or overline! More info: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
- 37. TMW Code Club text shadow text properties Text can also be given a shadow ! text-shadow: 0 -2px #000; More info: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
- 38. TMW Code Club text examples Text decoration: codepen.io/ashleynolan/pen/pxnCc ! Text shadow: codepen.io/ashleynolan/pen/zrLlv ! Text shadow example: codepen.io/juanbrujo/pen/yGpAK
- 39. TMW Code Club Homework! Style up the earlier codepen example to have a custom styled title and paragraph text. Use any of the CSS properties we've seen today. ! http://codepen.io/ashleynolan/pen/Blnkc