CSS from 0 to Hero

By Halim Boussada

CSS from 0 to Hero

By Halim Boussada
 CSS Basics
Learning Objectives:
● What is CSS.

● Anatomy of CSS ruleset

● CSS Selectors.

● How to style our HTML document.

○ Add CSS to HTML.

● CSS Combinators

● Live coding.
 CSS Basics
What is CSS

CSS : stands for Cascading Style sheets.

● CSS is not a programming language. It's not a markup language either.

○ CSS is a style sheet language.

 CSS Basics

What is CSS ?
● Used to describe the presentation of HTML document.

● CSS is what you use to selectively style HTML elements.

● Designed primarily to enable the separation of presentation

and content.<font><color>

● We can easily control HTML elements by using css selectors.

Anatomy Of CSS ruleset
 CSS Basics

CSS Selectors
● A CSS selector used to "find" (or select) the HTML elements you want to style.

● Types of selectors:

• HTML Tag
• ID (#)
• Class (.)

Question: When should I use tag selector with CSS? ID Selector? Class Selector?
 CSS Basics - Selectors

By Tag
S page.html S style.css

<h1> Title 1 </h1> h1{

<h2> Subtitle </h2> color: red;
<p> This is the content</p> }
<h1> Title 2 </h1>
<h1> Title 3 </h1>
 CSS Basics - Selectors

By ID
S page.html S style.css

<h1 id=”title-1”> #title-1{

My Title Background-color: gray;
</h1> }

<h1> My Title </h1>

<h1> My Title </h1>
 CSS Basics - Selectors

By Class
S page.html S style.css

<h1 id=”title-1”> .title-2{

My Title Background-color: blue;
</h1> }

<h1 class=”title-2”>
My Title
</h1>

<h1> My Title </h1>

 CSS Basics
Applying CSS to HTML

We have three ways of applying CSS to a document:

1. Inline styles.

2. Internal stylesheet.

3. External stylesheet.
 CSS Basics

• Inline style
● The Style attribute in a specific tag used to create inline style
● The style attribute can contain any CSS property between double quotation

<p style=”background-color:red;”>Test</p>
 CSS Basics

● Style tag / Internal style

<style type="text/css">

p{ background-color:red; }

</style>
 CSS Basics

• In External stylesheet (CSS file)

● The <link> tag defines the relationship between the current document and an external resource.

● The <link> tag is most often used to link to external style sheets or to add a favicon to your website.

● The <link> element is an empty element, it contains attributes only.

<link rel="stylesheet" href="styles.css"/>

 CSS Basics
CSS Combinators:

● A CSS selector can contain more than one simple selector. Between the
simple selectors, we can include a combinator.

● There are four different combinators in CSS:

○ descendant selector (space)
○ child selector (>)
○ adjacent sibling selector (+)
○ general sibling selector (~)
 CSS Basics
CSS Combinators:

+ Adjacent ~ General
Sibling + Sibling ~
div + p { div ~ p {
} }

Child > Descendant el el

div > p { div p {

} }
 CSS Basics - CSS Combinators
Adjacent Sibling :
● Elements share the same parent.
● Second element comes immediately after first element.

<div>
h2 + p {
<h2>Not applied</h2>
color: red;
<p>CSS applied</p>
}
<h2>Not applied</h2>
<h3>Not applied</h3>
<p>Not applied</p>
<h2>Not applied</h2>
<p>CSS applied</p>
</div>
 CSS Basics - CSS Combinators
General Sibling:
● Elements share the same parent.

● Second element comes after first element

<div>
<h2>Not applied</h2>

h2 ~ p { <p>CSS applied</p>
color: red;
} <h2>Not applied</h2>

<h3>Not applied</h3>

<p>CSS applied</p>
</div>
 CSS Basics - CSS Combinators
Child

● Second element is a direct child of first element.

<div>
<div>Not applied</div>
<p>CSS applied</p>
div > p {
<div>Not applied</div>
color: red; <article>
} <p>Not applied</p>
</article>
<p>CSS applied</p>
</div>
 CSS Basics - CSS Combinators

Descendant
● Second element is a descendant of the first element.

<div>
<div>Not applied</div>
div p { <p>CSS applied</p>
color: red; <div>Not applied</div>
} <article>
<p>CSS applied</p>
</article>
<p>CSS applied</p>
</div>
 CSS Basics
CSS Specificity
● If there are two or more CSS rules that point to the same element, the selector with the highest
specificity value will "win", and its style declaration will be applied to that HTML element.

● There are four categories which define the specificity level of a selector:

○ Inline styles -
■ Example: <h1 style="color: pink;">
○ IDs -
■ Example: #navbar
○ Classes, pseudo-classes, attribute selectors -
■ Example: .test, :hover, [href]
○ Elements and pseudo-elements -
■ Example: h1, :before
 CSS Basics
CSS Specificity
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>
 CSS Basics

CSS Specificity
● When selectors have an equal specificity value, the latest rule is the one that counts.

<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>This is heading 1</h1>

</body>
</html>
 CSS Basics

CSS Specificity
● Inline style
● Internal style
● External CSS

○ These CSS files will inherit properties written in them once we include them in our application.

○ We will be able to apply internal CSS that overrides the external CSS properties thing will and

○ the same happen in the case of inline CSS. Inline CSS overrides the external and internal CSS.
The Box Model
 Developer Tool

Developer Best Friend

 CSS - FlexBox

Learning Objectives:

● What is CSS Flexbox?

● How is Flexbox Different?

● FlexBox container and items properties

 CSS - FlexBox
What is CSS Flexbox?

● Flexbox stands for flexible box.

● It was introduced in July 23rd of 2009. It is

supported in all web browsers.

● It’s a one-dimensional layout module for

CSS aimed at giving you an efficient way to
○ Arrange,
○ organize,
○ and size website elements to create
highly adaptive designs.
 CSS - FlexBox

● Flexbox allows elements to align and distribute

space within a container.

● Using flexible widths and heights, elements can

be aligned to fill a space or distribute space
between elements, which makes it a great tool to
use for responsive design systems.

● The Flexible Box, makes it easier to design

flexible responsive layout structure without using
float or positioning.
 CSS - FlexBox

Why is Flexbox needed?

● Of course, the technology to place web components on a page is not new. Since the
beginning of the Internet, web designers have used different ways to place images, text,
and other content where they wanted it to be.

● However, these were either not suitable for responsive design (tables),
● were never intended for as a layout tool in the first place (float),
● didn’t allow you to define equal heights for elements (inline-block), or had other issues.
 CSS - FlexBox
How to use Flexbox (Concepts and Terminology)

● The way flexbox works is quite simple on the surface:

○ You have a container (flex container)

○ with children (any elements contained within,

called flex items), which are placed along flex lines.

○ Flex items are arranged in rows by default, but you

can change this to arrange the items into columns.
 CSS - FlexBox
The Main Axis and the Cross Axis:
CSS - FlexBox
 CSS - FlexBox

Flex Container properties:

● To start using the Flexbox model, you need to first define a flex container.

● The flex container becomes flexible by setting the display property to flex.

● The flex container properties are:

○ flex-direction
○ flex-wrap
○ flex-flow
○ justify-content
○ align-items
○ align-content
 CSS - FlexBox

flex-direction:
Flexbox is (aside from optional wrapping) a single-direction layout
concept. Think of flex items as primarily laying out either in horizontal
rows or vertical columns.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

● row (default): left to right in ltr; right to left in rtl

● row-reverse: right to left in ltr; left to right in rtl
● column: same as row but top to bottom
● column-reverse: same as row-reverse but bottom to top
 CSS - FlexBox

flex-wrap:
● By default, flex items will all try to fit onto one line. You can
change that and allow the items to wrap as needed with this
property.

● nowrap (default): all flex items will be on one line

● wrap: flex items will wrap onto multiple lines, from top to bottom.
● wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
 CSS - FlexBox

flex-flow:
● This is a shorthand for the flex-direction and flex-wrap properties, which together
define the flex container’s main and cross axes.
The default value is row nowrap.
 CSS - FlexBox

justify-content:

● This defines the alignment along the main axis.

● It helps distribute extra free space leftover when either all the
flex items on a line are inflexible, or are flexible but have
reached their maximum size. It also exerts some control over
the alignment of items when they overflow the line.
 CSS - FlexBox

align-items:

● This defines the default behavior for how flex items are laid
out along the cross axis on the current line.

● Think of it as the justify-content version for the cross-axis

(perpendicular to the main-axis).

.container {
align-items: stretch | flex-start | flex-end | center |
baseline | first baseline | last baseline | start | end |
self-start | self-end + ... safe | unsafe;
}
 CSS - FlexBox

align-content:

● This aligns a flex container lines within when there is extra

space in the cross-axis, similar to how justify-content aligns
individual items within the main-axis.

.container {
align-content: flex-start | flex-end | center | space-
between | space-around | space-evenly | stretch | start |
end | baseline | first baseline | last baseline + ... safe
| unsafe;
}
 CSS - FlexBox

align-content:
 CSS - FlexBox

Flex items(Child Elements (Items)) properties:

● The direct child elements of a flex container automatically becomes flexible (flex)
items.

The flex item properties are:

○ order
○ flex-grow
○ flex-shrink
○ flex-basis
○ flex
○ align-self
 CSS - FlexBox

Order:
● By default, flex items are laid out in the source
order.
● However, the order property controls the order
in which they appear in the flex container.
● Items with the same order revert to source
order.
 CSS - FlexBox

flex-grow:
● This defines the ability for a flex item to grow if
necessary. It accepts a unitless value that serves
as a proportion. It dictates what amount of the
available space inside the flex container the item
should take up.

● If all items have flex-grow set to 1, the remaining

space in the container will be distributed equally
to all children. If one of the children has a value
of 2, that child would take up twice as much of
the space either one of the others (or it will try,
at least).
● Negative numbers are invalid.
 CSS - FlexBox

flex-grow:
 CSS - FlexBox

flex-shrink:

● This defines the ability for a flex item to

shrink if necessary.

● Negative numbers are invalid.

 CSS - FlexBox

flex
● This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

● The second and third parameters (flex-shrink and flex-basis) are optional.

● The default is 0 1 auto, but if you set it with a single number value, like flex:
5;, that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-
shrink: 1; flex-basis: 0%;.
 CSS - FlexBox

align-self:

● This allows the default alignment (or

the one specified by align-items) to be
overridden for individual flex items.
 CSS - Grid

Learning Objectives:

● What is CSS Grid?

● Concepts & Terminology

● Grid vs flexbox

● Live coding example

 CSS - Grid
What is CSS-Grid :
● CSS Grid Layout (aka “Grid” or “CSS Grid”):

○ is a two-dimensional grid-based layout system

that, compared to any web layout system of the
past, completely changes the way we design user
interfaces.

● Grid is one of the most powerful CSS modules ever

introduced.
 CSS - Grid
What is CSS-Grid :

● Similarly to flexbox, the source order of the grid items

doesn’t matter.

● Your CSS can place them in any order, which makes it

super easy to rearrange your grid with media queries

○ Imagine defining the layout of your entire page,

and then completely rearranging it to
accommodate a different screen width all with
only a couple lines of CSS.👌🏻🔥
CSS - Grid
 CSS - Grid

How to start with CSS-Grid :

● To get started you have to define a
container element as a grid with
display: grid;

● set the column and row sizes with grid-

template-columns and grid-
template-rows.

● and then place its child elements into the

grid with grid-column and grid-row.
 CSS - Grid

Concepts & Terminology:

● Grid Container

● Grid Line

● Grid Item

● Grid Cell

● Grid Track

● Grid Area
 CSS - Grid

Grid Container:

● The element on which display: grid is applied.

○ It’s the direct parent of all the grid items. In this example div
with class container is the grid container.

Grid container
 CSS - Grid

Grid Item:
● The children (i.e. direct descendants) of the grid container.

○ Here the item elements are grid items, but sub-item isn’t.

Grid items
 CSS - Grid

Grid Line:
● The dividing lines that make up the structure of the grid.
line3
○ The lines between columns are called column lines.

○ The lines between rows are called row lines.

■ Here the yellow line is an example of a column grid line.

 CSS - Grid

Grid Cell:
● The space between two adjacent row and two adjacent column grid lines.

○ It’s a single “unit” of the grid.

■ Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.
 CSS - Grid

Grid Track:
● The space between two adjacent grid lines.

○ You can think of them as the columns or rows of the grid.

■ Here’s the grid track between the second and third-row grid lines.
 CSS - Grid

Grid Area

● The total space surrounded by four grid lines. A grid area may be composed of any number of grid
cells.
Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.
 CSS - Grid
Properties for the Grid container

● display ● justify-items ● grid-auto-columns

● grid-template-columns ● align-items ● grid-auto-rows
● grid-template-rows ● place-items ● grid-auto-flow
● grid-template-areas ● justify-content ● grid
● grid-template ● align-content
● grid-column-gap ● place-content
● grid-row-gap
● grid-gap
 CSS - Grid
Properties for the Grid items

● grid-column-start ● grid-area
● grid-column-end ● justify-self
● grid-row-start ● align-self
● grid-row-end ● place-self
● grid-column
● grid-row
 CSS - Grid
Further exploration:

● Differences between flexbox and grid

● CSS-Grid

● Grid By Example

● CSS Grid complete Guide

 CSS Animations & Transitions

Learning Objectives:

● How to add animations to your webpage using CSS

● CSS Transitions properties

● CSS Transforms properties

● Live coding examples

CSS Animations & Transitions
 CSS Transform

CSS transform property:

The transform property applies a 2D or 3D transformation to an element.

● This property allows you to rotate, scale, move, skew, etc…, elements.
 CSS Transform

How to use CSS transforms:

● Translate:

○ The translate() method moves an element from its current position to a new one.
○ With this code, the adjusted rectangle is moved 40 pixels to the right, and 100 pixels down
from the current position.

transform: translate(40px, 100px);

CSS Transform
 CSS Transform

● Rotate:

○ The rotate() method rotates an element clockwise or counter-clockwise by the

specified degree value.

This code rotates the rectangle clockwise by 40 degrees.

transform: rotate(40deg);
 CSS Transform

● Scale:

○ The scale() method increases or decreases the

size of an element (according to the parameters
given for the width and height).
○ In this example, the adjusted rectangle is two
times larger than its original width and three
times larger than its original height.

transform: scale(2, 3);

 CSS Transform
● Skrew:

○ With skewX(), only the x-axis will be affected.

■ This rectangle is skewed 30 degrees along
the x-axis:

transform: skewX(30deg);

○ This is the same idea, but on the y-axis. The

skewY() method skews an element along the y-
axis by the defined angle.

■ This rectangle is skewed 30 degrees

along the y-axis.

transform: skewY(30deg);
 CSS Transform

● Skrew
○ If you want to skew both the x and y-axis, this
can be done in one place.
The skew() method skews an element along the
x and y-axis using the specified angles.

■ The following example skews the

rectangle element 30 degrees along the
x-axis and 20 degrees along the x-axis.

transform: skew(30deg, 20deg);

 CSS Transform

● Matrix
○ This is where things get interesting, but also more
efficient in the right situation. If you are doing a lot of
transforms and don’t want to write them out all
individually, these 2D transforms can be combined
with the matrix() method.

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

transform: matrix(2, -0.3, 0, 1, 0, 0);

 CSS Transitions
What is CSS transitions:
● CSS transitions provide a way to control animation speed when changing CSS properties.

Instead of having property changes take effect immediately, you can cause the changes in a property to
take place over a period of time.

● CSS transitions allows you to change property values smoothly, over a given duration.
 CSS Transitions
CSS transitions properties:

● transition
● transition-delay
● transition-duration
● transition-property
● transition-timing-function
 CSS Transitions
How to Use CSS Transitions?

● To create a transition effect, you must specify two things:

○ the CSS property you want to add an effect to.
○ the duration of the effect.

Note:
If the duration part is not specified, the transition will have no effect, because the default value is 0.
 CSS Transitions

CSS transitions properties:

● transition-property : sets the CSS properties to which a transition effect should be applied.It could be a single property or
multiple properties

● transition-duration: The transition-duration CSS property sets the length of time a transition animation should
take to complete. By default, the value is 0s, meaning that no animation will occur.

● transition-delay: Defines how long to wait between the time a property is changed and the transition actually begins.
 CSS Transitions
CSS transitions properties:

● transition-timing-function:
○ specifies the speed curve of the transition effect.

Easing Functions Cheat Sheet.

● transition : A shorthand property for setting the four transition properties into a single property

transition: <property> <duration> <timing-function> <delay>;

 CSS Animation

● CSS Animation:

○ An animation lets an element gradually change from one style to another.

○ You can change as many CSS properties you want, as many times as you want.
○ To use CSS animation, you must first specify some keyframes for the animation.
○ Keyframes hold what styles the element will have at certain times.
 CSS Animation
CSS Animation:
● CSS Animations are kind of a powered-up version of CSS Transitions.

● They allow you to create multi-step transitions through the @keyframes syntax or without it (limited).

● To use an animation you created, you can specify the animation in animation or animation-property.
 CSS Animation
CSS Animation:

● @keyframes
● animation-name
● animation-duration
● animation-delay
● animation-iteration-count
● animation-direction
● animation-timing-function
● animation-fill-mode
● animation