Scribd
Upload
8 views

CSS-workshop 1

Uploaded by

ziadkaoubi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

CSS-workshop 1

Uploaded by

ziadkaoubi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

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

You might also like