tmw code club – session 2 - css basics
DESCRIPTION
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 propertiesTRANSCRIPT
TMW Code Club
TMW Code ClubWeek 2: CSS – The fundamentals
TMW Code Club
Do you know more than this guy?
TMW Code Club
Recap
TMW Code Club
HTML, CSS, JavaScriptContent Styling Behaviour
Text, images, videoColours, borders,
backgrounds, shadowsClick, touch, scroll, hover
TMW Code Club
Week 2 CSS – The basics
• The cascade • Importance, specificity and source order • Classes and IDs • CSS properties and terminology
TMW Code Club
CSSCascading 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
Remember this?
TMW Code Club
What happens here?
TMW Code Club
Let’s try it for realcodepen.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 specific.
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 selectorsMatches 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.
TMW Code Club
Class selectorsLess specific than an ID because they are not unique
TMW Code Club
More complex selectorsSiblings, Children and descendent selectors
TMW Code Club
Selector examples
codepen.io/mrmartineau/pen/jgCvq
TMW Code Club
CSS PropertiesBasic 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 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
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
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;
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/background
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
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
TMW Code Club
background example
http://codepen.io/ashleynolan/pen/dxocr
TMW Code Club
text properties
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 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
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
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