TMW Code Club – Session 2 - CSS Basics

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

TMW Code Club
Do you know more than
this guy?

TMW Code Club
HTML, CSS, JavaScriptContent Styling Behaviour
Text, images, video
Colours, borders,
backgrounds, shadows
Click, touch,
scroll, hover

TMW Code Club
Week 2
CSS – The basics
• The cascade
• Importance, speciﬁcity and source order
• Classes and IDs
• CSS properties and terminology

TMW Code Club
CSS
Cascading Style Sheets

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

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

TMW Code Club
What happens here?

TMW Code Club
Let’s try it for real
codepen.io/mrmartineau/pen/nfDcE

TMW Code Club
Selectors
• Element
• Classes
• IDs
• Complex selectors

TMW Code Club
Element selectors
• Matches elements with the corresponding
element type name
• Quite general and not very speciﬁc.

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:

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:

TMW Code Club
ID selectors
Matches an element that has a speciﬁc id attribute
value. Since id attributes must have unique values,
an ID selector can never match more than one
element in a document.

TMW Code Club
Class selectors
Less speciﬁc than an ID because they are not unique

TMW Code Club
More complex selectors
Siblings, Children and descendent selectors

TMW Code Club
Selector examples
codepen.io/mrmartineau/pen/jgCvq

TMW Code Club
CSS Properties
Basic Styling

TMW Code Club
color
(or colour)

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

TMW Code Club
color
(or colour)
Colours in CSS can be deﬁned in a number of ways.
To set our text colour to black, we could deﬁne 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

TMW Code Club
color
(or colour)
You can also set colours for the following properties:
!
background-color!
color!
border-color!

TMW Code Club
color example
codepen.io/ashleynolan/pen/Blnkc

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

TMW Code Club
background
Can be an image:
background-image: url(‘myimage.png’);!
!
or a color, as mentioned before:
background-color: #fff;

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’);

TMW Code Club
background
background also has other properties
!
background-image!
background-position!
background-repeat!
background-color

TMW Code Club
background example
http://codepen.io/ashleynolan/pen/dxocr

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

TMW Code Club
font-size
text properties
font-size can be deﬁned 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

TMW Code Club
line-height
text properties
line-height can also be deﬁned 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

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

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

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

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

TMW Code Club – Session 2 - CSS Basics

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to TMW Code Club – Session 2 - CSS Basics (20)

Recently uploaded (20)

TMW Code Club – Session 2 - CSS Basics