WEB DESIGN
W3-S1 – CSS Concepts
Course Objectives
✓ Use CSS using either inline, internal or external syntax
✓ Manipulate font and color properties on HTML elements
✓ Use various CSS selectors to target HTML elements
▪ Type Selector h3 {}
▪ ID Selector #id {}
▪ Class Selector .class {}
▪ Grouping Selector h3, .warning {}
✓ Understand the concept of CSS Inheritance
EXPLAIN
What is CSS?
CSS is a language to describe the appearance of an HTML document.
HTML (STRUCTURE) CSS (APPEARANCE)
body {
background-color: lightblue;
<body> }
<h1>My First CSS Example</h1>
</body> h1 {
color: white;
text-align: center;
}
EXPLAIN
How to define a CSS rule?
A CSS rule is composed of a selector and a list of definitions
Selector
p {
color: red;
Rule
background-color: blue;
}
Property Value
EXPLAIN
How to define a CSS rule?
Don’t forget the required syntax
colon
p {
color: red;
Brackets
background-color: blue;
}
semi-colon
EXPLAIN
What is an CSS selector ?
A CSS selector selects the HTML element(s) you want to style
EXPLAIN
Types of CSS selector ?
Here are some type of selector we will learn during this course
✓ Type Selector h3 {} ✓ Child Selector ul > li {}
✓ ID Selector #id {} ✓ Descendant Selector p a {}
✓ Class Selector .class {} ✓ Universal Selector * {}
✓ Grouping Selector h3, .warning {} ✓ Pseudo-classes p:hover {}
EXPLAIN
Type Selector
A type selector selects all elements of the given type
Element Type
P {
color:red;
}
EXPLAIN
How to link CSS to HTML?
CSS can be linked with the HTML using 3 ways
INLINE WAY
<h1 style="color:blue; font-size:14px;">Hello</h1>
BLOCK WAY
Use the tag <style> inside a HTML file
<head>
<style> h1 {color:blue; font-size:14px;} </style>
</head>
EXTERNAL WAY
Define your rules in a separate file
<head>
<link rel="stylesheet" href="style.css">
</head>>
EXPLAIN
Identifier selectors
ON HTML SIDE ON CSS SIDE
✓ An identifier can be assigned to an element using the Id ✓ The ID selector selects the element linked to
attribute this ID
ID attribute
ID selector
<h1 id=“main-title” >Welcome></h1> #main-title {
color:orange;
ID
}
An ID should appear only once in a HTML document.
EXPLAIN
Class selectors
ON HTML SIDE ON CSS SIDE
✓ The class attribute is used to assign a class to an element ✓ The class selector selects all elements linked to
the class
Class attribute
Class selector
<h1 class=“title” >Welcome></h1> .title {
color:orange;
Class name }
REFLECTION
ID vs CLASSES
When should we use ID?, Classes?
<p id=“my-id” >Semester 1></p> Semester 1
<p>Semester 2></p> Semester 2
#my-id {
<p>Semester 3></p> Semester 3
color:orange; <p>Semester 4></p> Semester 4
<p>Semester 5></p> Semester 5
}
<p class=“warning” >Semester 1></p> Semester 1
<p>Semester 2></p> Semester 2
.warning {
<p>Semester 3></p> Semester 3
color:orange; <p>Semester 4></p> Semester 4
<p class=“warning” >Semester 5></p> Semester 5
}
EXPLAIN
Div HTML Element
The <div> tag defines a division or a section in an HTML document.
✓ DIV is used as a container for HTML elements - which is then styled with CSS.
<div class="pricing-plan"> . pricing-plan {background-color: grey;}
<div class="pricing-item"> . pricing-item {background-color: white;}
<img src="start.png"/>
<p> BASIC </p>
</div>
<div class="pricing-item">
<img src="premium.png"/>
<p>PREMIUM</p>
</div> BASIC PREMIUM
</div>
EXPLAIN
Cascade in CSS
✓ In CSS, the term "cascade" means that different styles can be
used on the same HTML page
✓ These styles are applied to elements in a strictly defined
order.
Cascading rules allow you to resolve situations where multiple
styles are specified for a single element.
REFLECTION
Cascade in CSS
What will be the color of P element?
#myP {
color: blue;
}
<body>
.test { <p id=“myP” class="test">Hello!</p>
color: green; </body>
}
p {
color: red;
}
EXPLAIN
Cascade in CSS
P will be blue !
Highest priority
#myP {
This rule has the highest priority color: blue;
}
.test {
color: green;
}
p {
color: red;
Lowest priority }
EXPLAIN
Grouping Selectors
The grouping selector selects all the HTML elements
with the same style definitions
h1 {
text-align: center;
color: red;
}
h1 , h2, p {
text-align: center;
h2 {
color: red;
text-align: center;
}
color: red;
}
✓ Easier to read
p { ✓ Less duplication
text-align: center;
color: red;
}
REFLECT
We want to set all text color in green
<body>
<h1>Title</h1>
<h2>Heading 2</h2>
Title
<p>Paragraph> Heading 2
<ul> Paragraph
<li>Item 1</li>
<li>Item 2</li>
• Item 1
<li>Item 3</li>
</ul>
• Item 2
</body> • Item 3
Can we find a better way than this code?
h1,h2,h3,p,a,strong,q {
color: green;
}
EXPLAIN
Understanding CSS Inheritance
CSS inheritance is a mechanism that allows certain properties of a parent element to be
automatically inherited by its child elements
The body has the property color green
html
body{ head body
color: green;
}
title h1 h2 p ul
li li li
All the inherited child will also get this property
Congratulations !
You should now master those concepts
✓Apply inline, internal, and external CSS styles
✓Manipulate font and color properties on HTML elements
✓Use various CSS selectors to target HTML elements
▪ Type Selector h3 {}
▪ ID Selector #id {}
▪ Class Selector .class {}
▪ Grouping Selector h3, .warning {}
✓Understand the concept of CSS Inheritance
WRAPPING THE LESSON
3-2-1 Challenge
✓ List three things you learned today.
✓ List two questions you still have.
✓ List one aspect of the lesson or topic you enjoyed.
HAVE A LOOK !
https://adam-marsden.co.uk/css-cheat-sheet
A nice summary of everything you need to know on CSS
TODO AFTER
After this session !
PART 1 – LEARN MORE ! PART 2 – PLAY !
✓ Read more about CSS Selectors ✓ Go as far as you can on this game
https://web.dev/learn/css/selectors https://flukeout.github.io/
✓ Read the CSS Cheat Sheet
https://adam-marsden.co.uk/css-cheat-sheet
✓ Another great article about CSS Selectors
https://css-tricks.com/css-selectors/
