SlideShare a Scribd company logo
TMW Code Club
TMW Code Club
Week 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, video
Colours, borders,
backgrounds, shadows
Click, 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
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
Remember this?
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 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 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.
TMW Code Club
Class selectors
Less specific 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 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

More Related Content

What's hot (20)

PPTX
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
Joe Querin
 
PDF
Intro to Sass for WordPress Developers
Suzette Franck
 
PDF
OOCSS, SMACSS or BEM?
Michael Posso
 
PDF
How to use CSS3 in WordPress - Sacramento
Suzette Franck
 
PPTX
Wp responsive-theme-framework
Damien Oh
 
PPT
An Introduction to Custom Post Types
Carleton Web Services
 
PDF
Wrangling Themes: everything you need to know about WordPress themes
Alison Knott
 
PDF
Wrangling Themes: everything you need to know about WordPress themes
Alison Knott
 
PDF
Intro to css & sass
Sean Wolfe
 
PDF
How to use CSS3 in WordPress
Suzette Franck
 
PPTX
Internet tech &amp; web prog. p4,5
Taymoor Nazmy
 
PPTX
Word press course
Judith Gotwald
 
KEY
Trendsetting: Web Design and Beyond
Andy Stratton
 
KEY
Sass: The Future of Stylesheets
chriseppstein
 
PPTX
Word press bootcamp By Sourcescript Innovations and Mentors Dojo
lightshire
 
PDF
Introduction to CSS3
Doris Chen
 
PDF
Intro to CSS3
Denise Jacobs
 
PPTX
Css 3
poollar
 
PPTX
Css 3
poollar
 
WordCamp Kent 2019 - WP 101: Custom Post Type & Custom Fields
Joe Querin
 
Intro to Sass for WordPress Developers
Suzette Franck
 
OOCSS, SMACSS or BEM?
Michael Posso
 
How to use CSS3 in WordPress - Sacramento
Suzette Franck
 
Wp responsive-theme-framework
Damien Oh
 
An Introduction to Custom Post Types
Carleton Web Services
 
Wrangling Themes: everything you need to know about WordPress themes
Alison Knott
 
Wrangling Themes: everything you need to know about WordPress themes
Alison Knott
 
Intro to css & sass
Sean Wolfe
 
How to use CSS3 in WordPress
Suzette Franck
 
Internet tech &amp; web prog. p4,5
Taymoor Nazmy
 
Word press course
Judith Gotwald
 
Trendsetting: Web Design and Beyond
Andy Stratton
 
Sass: The Future of Stylesheets
chriseppstein
 
Word press bootcamp By Sourcescript Innovations and Mentors Dojo
lightshire
 
Introduction to CSS3
Doris Chen
 
Intro to CSS3
Denise Jacobs
 
Css 3
poollar
 
Css 3
poollar
 

Viewers also liked (18)

PDF
Navapalos tomo I
clarysml32i
 
PDF
Scaling Responsively
nolly00
 
PDF
Exploring Our Front-End Workflows
nolly00
 
PDF
Developing for the Unknown
nolly00
 
PPTX
Questions that we are afraid to ask...
TezLaguna
 
PPTX
tcp atau ip
Syahroni Achmad
 
PDF
Jack
yajenel
 
PDF
Family
TezLaguna
 
PDF
TMW Code Club Session 1
nolly00
 
PDF
Think Before You Speak
TezLaguna
 
PPTX
Schools, families, and communities week one
Amy Dikkers
 
PPT
Reported speech
IACO80
 
PDF
Sand and Stone
TezLaguna
 
PDF
CSS Best Practices
nolly00
 
PPTX
The Lion and the Rabbit
TezLaguna
 
PDF
The Most Beautiful Heart
TezLaguna
 
PDF
Reworking our-workflows
nolly00
 
PPTX
Scissor bite
mohamed eid
 
Navapalos tomo I
clarysml32i
 
Scaling Responsively
nolly00
 
Exploring Our Front-End Workflows
nolly00
 
Developing for the Unknown
nolly00
 
Questions that we are afraid to ask...
TezLaguna
 
tcp atau ip
Syahroni Achmad
 
Jack
yajenel
 
Family
TezLaguna
 
TMW Code Club Session 1
nolly00
 
Think Before You Speak
TezLaguna
 
Schools, families, and communities week one
Amy Dikkers
 
Reported speech
IACO80
 
Sand and Stone
TezLaguna
 
CSS Best Practices
nolly00
 
The Lion and the Rabbit
TezLaguna
 
The Most Beautiful Heart
TezLaguna
 
Reworking our-workflows
nolly00
 
Scissor bite
mohamed eid
 
Ad

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

PPTX
Web topic 15 1 basic css layout
CK Yang
 
PPTX
Web programming css
Uma mohan
 
PPTX
FFW Gabrovo PMG - CSS
Toni Kolev
 
PPT
Css
NIRMAL FELIX
 
PPTX
Cordova training - Day 2 Introduction to CSS 3
Binu Paul
 
PPTX
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
PPTX
Back to Basics WordCamp Chicago 2011 TJList
TJList
 
PPT
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
PDF
2 introduction css
Jalpesh Vasa
 
PPTX
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
 
PPTX
CSS Introduction
Thapar Institute
 
PPTX
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
IorlahaSamuel1
 
PPSX
CSS Comprehensive Overview
Mohamed Loey
 
PPT
CSS - Basics
Shubham_Saurabh
 
PPTX
css3.0.( Cascading Style Sheets ) pptx
neelkamal72809
 
PPTX
CSS Cascade Style Sheet
Adeel Rasheed
 
PPTX
Web - CSS 1.pptx
haroon451422
 
Web topic 15 1 basic css layout
CK Yang
 
Web programming css
Uma mohan
 
FFW Gabrovo PMG - CSS
Toni Kolev
 
Cordova training - Day 2 Introduction to CSS 3
Binu Paul
 
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Back to Basics WordCamp Chicago 2011 TJList
TJList
 
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
2 introduction css
Jalpesh Vasa
 
CSS Topic wise Short notes ppt by Navya.E
NavyaEnugala
 
CSS Introduction
Thapar Institute
 
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
IorlahaSamuel1
 
CSS Comprehensive Overview
Mohamed Loey
 
CSS - Basics
Shubham_Saurabh
 
css3.0.( Cascading Style Sheets ) pptx
neelkamal72809
 
CSS Cascade Style Sheet
Adeel Rasheed
 
Web - CSS 1.pptx
haroon451422
 
Ad

Recently uploaded (20)

PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PDF
Software Development Company Keene Systems, Inc (1).pdf
Custom Software Development Company | Keene Systems, Inc.
 
PPTX
Wondershare Filmora Crack Free Download 2025
josanj305
 
PDF
ICONIQ State of AI Report 2025 - The Builder's Playbook
Razin Mustafiz
 
PDF
Evolution: How True AI is Redefining Safety in Industry 4.0
vikaassingh4433
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
PDF
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
PDF
Linux schedulers for fun and profit with SchedKit
Alessio Biancalana
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PPTX
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PDF
[GDGoC FPTU] Spring 2025 Summary Slidess
minhtrietgect
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
Software Development Company Keene Systems, Inc (1).pdf
Custom Software Development Company | Keene Systems, Inc.
 
Wondershare Filmora Crack Free Download 2025
josanj305
 
ICONIQ State of AI Report 2025 - The Builder's Playbook
Razin Mustafiz
 
Evolution: How True AI is Redefining Safety in Industry 4.0
vikaassingh4433
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
How do you fast track Agentic automation use cases discovery?
DianaGray10
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
Linux schedulers for fun and profit with SchedKit
Alessio Biancalana
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
Agentforce World Tour Toronto '25 - MCP with MuleSoft
Alexandra N. Martinez
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
[GDGoC FPTU] Spring 2025 Summary Slidess
minhtrietgect
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 

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
  • 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
  • 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
  • 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