INTRO TO
CSS
SUMMAR
Y
1 Intro to CSS
2 Intro to Flexbox
3 What is Responsive Web Design?
4 CSS Media Queries
Intro to CSS
CSS is a Style Sheet language that describes the style of
an HTML document:
▪ Colors
▪ Backgrounds
▪ Font style
CSS describes how HTML elements should be displayed.
PURE HTML
HTML & CSS
HOW DOES IT WORK?
CSS SELECTORS
We have 3 types of selectors:
▪ By tag (h1, p, div) (to apply the same style
to all the tags with the same type)
▪ By id (to give a unique tag a style)
▪ By class (to regroup different tags and give
them the same style)
CSS RULES
A CSS rule-set consists of a selector and a declaration block
CSS BOX-MODEL
All HTML elements can be considered as boxes. The CSS box model is
essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content.
MARGIN & PADDING
Padding Margin
Intro to Flexbox
▪ A set of CSS properties activated by the magic word: “Display: flex”
▪ Transform children elements into flexible items inside their parent
▪ Manage their position in the flexbox container
Parent
child 1
child 2
child 3
child 4
End of
Parent
▪ To recap, the Flexbox
properties can affect :
What is Responsive
Web Design?
CSS Media
Queries
The @media rule, makes it possible to define
different style rules for different screen sizes.
SYNTAX
@media TYPE and (WIDTH:(min or max
or both)) {
// your normal CSS code
}
Example
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}
BREAKPOINTS
// Extra small devices
@media (max-width: 576px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 768px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 992px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1200px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Let’s take a bit of
code
Thank You
