Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.

1. Google Developer Student Club - Shiv Nadar University
THE DARK ARTS
OF CSS
WEB DEVELOPMENT WORKSHOP

2. OUTLINE
What will we cover today?
What is CSS?
The Box Model.
How to use CSS in an HTML file.
CSS selectors, properties and units.
How to creat layouts?

3. WAIT UP!
CSS is vast, and there is a lot of things
to know, to understand. It is important
to understand how things work CSS-
wise to truly master CSS.
WAIT UP!
CSS is vast, and there is a lot of things
to know, to understand. It is important
to understand how things work CSS-
wise to truly master CSS.
There is only so much I can cover
today to introduce you to CSS.
But don't let it demotivate you, it is
a challenge, but the reward is
invaluable!
So, after this session ends, there's
quite a few things you can do in
your own time to learn CSS, just
keep learning and exploring.

4. WHAT IS
CSS?
CSS is not a programming language. It's not a
markup language either. CSS is a style sheet
language.
A language to specify the rules for styling HTML
elements.
CSS describes how elements should be
rendered on screen, on paper, in speech, or on
other media.
It is basically the presentational and aesthetic
component of a webpage.
Cascading Style Sheet

5. CSS SYNTAX
p {
color: red;
}
selector
property
value

6. SELECTORS
CSS selectors are used to find or select
the HTML elements in the DOM you
want to style.
p
p, h1, h2
#about
.btn
a.btn
.btn.btn-small
*

7. HOW TO INCLUDE
CSS IN A WEBPAGE?
Inline External Style Tag

8. THE BOX MODEL
Margin
Content
Border
Padding
The CSS box model is essentially a box that wraps
around every HTML element. It consists of:
margins, borders, padding, and the actual
content.
width = margin * 2 + border * 2 + padding * 2 + content
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

9. pixels - px
rem (relative - em)
vw (viewport width) vh (viewport height)
percentage - %
em (height of the letter M)
cm, mm, in
ch (with of the character 0)
pc
pt
CSS UNITS

10. LET'S GET TO
CODING NOW!
Yes, there is a chance you won't understand everything I do, so there
will be breaks in between for you guys to ask questions.

11. QUESTIONS?
CSS is difficult to learn and master, I'm sure there are things you don't
understand, so ask away!