TMW Code Club – Session 2 - CSS Basics

535 views

Published on

An introduction to CSS – with links to CodePen examples.

We cover specificity, selectors, classes and id's, as well as the color, background and text formatting CSS properties

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
535
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TMW Code Club – Session 2 - CSS Basics

  1. 1. TMW Code Club TMW Code Club Week 2: CSS – The fundamentals
  2. 2. TMW Code Club Do you know more than this guy?
  3. 3. TMW Code Club Recap
  4. 4. TMW Code Club HTML, CSS, JavaScriptContent Styling Behaviour Text, images, video Colours, borders, backgrounds, shadows Click, touch, scroll, hover
  5. 5. TMW Code Club Week 2 CSS – The basics • The cascade • Importance, specificity and source order • Classes and IDs • CSS properties and terminology
  6. 6. TMW Code Club CSS Cascading Style Sheets
  7. 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. 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. 9. TMW Code Club Remember this?
  10. 10. TMW Code Club What happens here?
  11. 11. TMW Code Club Let’s try it for real codepen.io/mrmartineau/pen/nfDcE
  12. 12. TMW Code Club Selectors • Element • Classes • IDs • Complex selectors
  13. 13. TMW Code Club Element selectors • Matches elements with the corresponding element type name • Quite general and not very specific.
  14. 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. 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. 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. 17. TMW Code Club Class selectors Less specific than an ID because they are not unique
  18. 18. TMW Code Club More complex selectors Siblings, Children and descendent selectors
  19. 19. TMW Code Club Selector examples codepen.io/mrmartineau/pen/jgCvq
  20. 20. TMW Code Club CSS Properties Basic Styling
  21. 21. TMW Code Club color (or colour)
  22. 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. 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. 24. TMW Code Club color (or colour) You can also set colours for the following properties: ! background-color! color! border-color!
  25. 25. TMW Code Club color example codepen.io/ashleynolan/pen/Blnkc
  26. 26. TMW Code Club background
  27. 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. 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. 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. 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. 31. TMW Code Club background example http://codepen.io/ashleynolan/pen/dxocr
  32. 32. TMW Code Club text properties
  33. 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. 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. 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. 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. 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. 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. 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

×