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

1. TMW Code Club
TMW Code Club
Week 2: CSS – The fundamentals

2. TMW Code Club
Do you know more than
this guy?

3. TMW Code Club
Recap

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

26. TMW Code Club
background

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