HTM CS JS

L S

Structure/ Styl Logi

layout e c
Level
1

Basics of
CSS
CS
S
Cascading Style Sheet

It is a language that is used style of a document.

makeup
not a programmŤng language, but a styŤng
language

But for stylŤng there should be some content, and

that's why we studŤed html before
css

go to websŤtes & remove css

Basic
Syntax
Select
or

h1
{

}
Propert Valu
y e

semŤcolon shows that one property has ended & Ťt

Ťs Ťmportant to put thŤs even though Ťt
won't Ťncurr error
Including
Style
Inlin
e<h1 style="color: red">
Hello Meet </h1>

<style> tag
<style>
h1 {
color :
red;
} WrŤtŤng style dŤrectly ŤnlŤne on each

</ element
Style Ťs added usŤng the <style> element Ťn the same
style> document
Including
Style
External
Stylesheet
W riting CSS in a separate File & Include Into HTM L file

best way

An inline style will override external and

internal styles
Color
Property
Used to set the color of
foreground

color:
red;
color:
pink;
color: blue;

color:
green;
Background Color
Property
Used to set the color of
background
background-color: red;

background-color: pink;

background-color: blue;
background-color:
green;
Color
Systems
RGB
color: rgb(255, 0,
0);
color: rgb(0, 255,
0);

we don't have to thŤnk on colors on our own, we can

just use color pŤcker tools onlŤne or
search onlŤne
Color
Systems
Hex
(Hexadecimal)
color: #ff0000;
color:
# 00ff00;

google color
pŤcker
Selecto
rs
Universal Class Selector
Selector
*{ .myClass { }
}

Element
Selector
h1 { }

Id Selector

# myId
{}
Practice
Set 1
Q1: Create a simple div with an id
" box" . Add some text content
inside
Set its the div.
background color to
blue.

Q2: Create 3 headings with h1, h2

& h3.
Give them all a class "heading" & set color of
"heading" to red.

Q3: Create a button & set its

background color to : green using
css stylesheet
blue using <style> tag
pink using inline
style
Text
Properties
text-align

text-align : left / right / center

text alŤgnement doesn't mean alŤgn accordŤng

to the page; Ť.e. rŤght does not mean on the
page's rŤght sŤde
but the parent's rŤght sŤde

Ťn css3, latest css -> start and end are Ťntroduced for
language support lŤke arabŤc
Text
Properties
text-decoration

text-decoration : underline / overline/ line-through

also add style, wavy, dotted or

color like red

can also set to none for hyperlinks

Text
Properties
font-weight
font-weight : normal / bold / bolder
/lighter

font-weight : 100-
900

font-weŤght Ťs to show how dark or

lŤght our text Ťs Ťt can be names or Ťn
terms of numbers
values from 100 to 900
Text
Properties
font-family

font-family :
arial

font-family : arial, roboto

we can write multiple

familiies as a fall-back
Units in
CSS
Absolute
pixels
(px)
96px = 1
inch
font-size:
2px;

cm, mm, Ťnch & others are

also there but pŤxels Ťs
Text
Properties
line-height

line-height :
2px

line-height :
3

line-height :
normal
Text
Properties
text-transform

text-tranform : uppercase / lowercase / capitalize / none

Practice
Set 2
Q1: Create a heading centred on the page with all of its text capitalized
by default.
Q2: Set the one
Q3: Create fontdiv
family of all the content in the document to " Times
inside
New Roman"
anotherdiv. .

Set id & text "outer" for the first one & "inner" for the
second one. Set the outer div text size to 25px & inner
div text size to 10px.
Level
2

Box
Model in
Box M odel in Widt
h

CSS Margi

Heigh
content n
Height

t
Paddin
Width Borde
g

Border

Paddin

Margin
Heig

Heigh
content
htdefault, it sets the content area height of the
By

t
element

div
{
height: 50px;
}
 Widt
h

Widt
content
h default, it sets the content area width of the
By
element

div
{
width: 50px;
}
Border
content
Used to set an element's
border
Borde
r
border-width :
2px;
border-style : solid / ed /
dott
border-color : dashed
black;
Bord
er
Shorthand
border : 2px solid black;
Border
Used to round the corners of an element's outer
border edge

border-radius : 10px;

border-radius : 50% ;
Paddi
content
ng
padding- Paddin
left g

padding-
right
padding-
top
padding-
bottom
Paddi
ng
Shorthand

padding:
50px;
padding: 1px 2px 3px 4px;
top | right | bottom | left -> clockwise
M arg Margi
in content n content

margin-
right
margin-
left
margin-
top
margin-
bottom
M arg
in
Shorthand

margin:
50px; 1px 2px 3px
margin:
4px;
top | right | bottom | left ->
clockwise
Practice
Set 3
Q 1: Create a div with height & width of
Set its background color to green & the border radius
100px.
to 50%.

Q2: Create the following

navbar.
 60px
200p
x (heigh
25p (gap t)
x ) #f088
#0f11
(tex anchor 04
11
t) tags (yellow
(black)
(links) )
Display
Property
display: inline / block / inline-block / none
inline - Takes only the space required by theelement. (no margin/
padding)
block - Takes full space available in
width.

inline-block - Similar to inline but we can set margin &

padding.

none - To remove element from document flow.

 Visibility

visibility:
hidden;

Note : When visibility is set to none, space for the element

is reserved.
But for display set to none, no space is reserved or
blocked for the element.
Alpha
Channel
opacity (0 to 1)
RGBA

color: rgba(255, 0, 0, 0.5);

color: rgba(255, 0, 0, 1);

Practice Set
4
Q1: Create a webpage layout with a header, a footer & a content area
containing 3 divs.
Set
(addthe
theheight & width
previous of divs
navbar to 100px.
in the
header)

Q2: Add borders to all the

divs.
Q3: Add a different background color to each div with an
opacity of 0.5

Q4: Give the content area an appropriate height.

Level
3

position
Units in
CSS
Relative

e
m

re
m

more like vh, vw

etc
Percentage
(%)
It is often used to define a size as relative to an element's
parent object.

width :
33% ;
margin-left :
50% ;

show 50% of parent for h1

make one par & one chŤld dŤv

sometŤmes the relatŤon Ťs also to some other

property not just sŤze, but that Ťs not very
commonly used
E
m

font sŤze of chŤld wŤll be half of parent for

0.5em

for paddŤng & margŤn Ťt's relatŤve to same

element's font sŤze

show both on same par

& dŤv make a button wŤth

Rem (Root
Em)

font sŤze of chŤld wŤll be half of parent for

0.5em

for paddŤng & margŤn Ťt's relatŤve to same

element's font sŤze

show both on same par

& dŤv make a button wŤth

Othe
rsrelative to 1% viewport height
vh:

vw : relative to 1% viewport width

Positi
onposition CSS property sets how an element is positioned in a
The
document.

position : static / relative /absolute / fixed

Positi
on
static - default position (The top, right, bottom, left, and z-index properties have
no effect)

relative - element is relative to itself. (The top, right, bottom, left, and z-ind

ex will work) absolute - positioned relative toits closestpositioned ancestor.

(removed from the flow) fixed - positioned relative to browser. (removed

from flow)
z-
index
It decides the stack level of
elements
Overlapping elements with a larger z-index cover those with a
smaller one.

z-index : auto
(0)
z-index : 1 /
2 / ...
z-index : -1 / -
2 / ...

show 3d
space
Background
Image
Used to set an image as
background

background-image :url(" image.jpeg" );

Background
Size
background-size : cover / contain /
auto

cover = fits with no empty

space contain - fits with image
fully visible auto = original
Practice
Set 5
Qs: Create the following layout using the given
html.
Give the div a height, width & some
background image.
Use the appropriate position property for the div element to
place it atof
right end the
the page. (The div should not move even
on scroll)
Use z-index to place the div on top of
page.

<p> lorem*5 </p>

<div> Love Nature
</div>
<p> lorem*5 </p>
Level
4

Basics of
CSS
Flexbox
Flexible Box
Layout

It is a one-dimensional layout method for arranging items in rows or

columns.
The Flex
M odel flex
container

CO
flex
item
L
cross
axis

set dŤsplay property of contaŤner to flex

fŤrst
Flexbox Direction
It sets how flex items are placed in the flex container, along which axis
and direction.

flex-direction : row;
(default)
flex-direction : row-
reverse;
flex-direction :
column;
flex-direction : column-
reverse;
Flex
Properties
for Flex Container
justify-content : alignment along the main
axis.
flex-start / flex-end / centre / e-evenly
spac /

flex-wrap : nowrap / wrap/ wrap-reverse

align-items : alignment along the cross axis.

align-content : alignment of space between & around the content along

cross-axis
Flex
Properties
for Flex Item
align-self : alignment of individual along the
cross axis.

flex-grow : how much a flex item will grow relative to the rest of the
flex
spaceitems
is if
available

flex-shrink: how much a flex item will shrink relative to the rest of the
flex items if space is available

sŤlmŤlar to alŤgn Ťtems but for

ŤndŤvŤdual element and Ťt overrŤdes
alŤgn Ťtems

grow & shrŤnk take values lŤke

0, 1, 2, 3 0 = doesn't grow at
Practice
Set 6
Qs: Create a navbar with 4 options in the form of anchor tags inside
list items.
Now, use flexbox to place them all spaced equally in a
single line.

Qs: Use flexbox to center one div inside

another div.

Qs: Which has higher priority - align-items or

align-self?
Media Queries
Help create a responsive
website
@ media (width :
600px) { div {
background-
color : red;
}
}

@ media (min-width :
600px)
div {{ Ťn today's world everyone has a dŤfferent devŤce wŤth
background-color : thousand of dŤfferent screen sŤzes
Ťf you buŤlt a websŤte people wŤll use Ťt on laptop, bŤg
red; screen computers, an Ťphone, a bŤg screen androŤd phone
or a small screen one, an Ťpad
}} even orŤentatŤon Ťs dŤfferent lŤke landscape or
portraŤt so Ťt's Ťmportant that layout looks
good on all
so we need desŤgn to be responsŤve, respond to dŤfferent
screen sŤzes & orŤentatŤon
M edia
Queries
@media (min-width : 200px) and (min-width :
300px)
div {
{ background-color :
} red;
}

Ťn today's world everyone has a dŤfferent devŤce wŤth

thousand of dŤfferent screen sŤzes
Ťf you buŤlt a websŤte people wŤll use Ťt on laptop, bŤg
screen computers, an Ťphone, a bŤg screen androŤd phone
or a small screen one, an Ťpad
even orŤentatŤon Ťs dŤfferent lŤke landscape or
portraŤt so Ťt's Ťmportant that layout looks
good on all
so we need desŤgn to be responsŤve, respond to dŤfferent
screen sŤzes & orŤentatŤon
Practice
Set 7
Qs: Add a media query to implement the
following:
the color of a div changes to green for viewport width less
than 300px
the color of a div changes to pink for width between
300px & 400px
the color of a div changes tored for width between 400px
& 600px
the color of a div changes to blue for width
above 600px
Level
5

THESE ARE thŤngs that can be called

advanced CSS Ťt Ťs an Ťmportant
chapter because we should know but
practŤcally Ťtna aap use nahŤ karenge
but pata hona chahŤye
Transitions
Transitions enable you to define the transition between two states of an
element.

transition-property : property you want to transition (font-size,

width etc.)
transition-duration : 2s /
4ms ..
transition-timing-function: ease-in / ease-out/ linear /
steps ..
transition-delay : 2s / 4ms ..

to add some anŤmatŤon to elements

tŤmŤng functŤon Ťs how the transŤtŤon
should be applŤed show hover
Transition Shorthand
property name | duration | timing-function |
delay

transition: font-size 2s ease-in-out 0.2s;

to add some anŤmatŤon to

elements
CSS Transform
Used to apply 2D & 3D transformations to an
element
rotat
e transform: rotate(45deg);

to add some more anŤmatŤon

to how an element looks

rotate Ťs sŤmple to understand,

wŤll take angles and degrees Ťs
most common

transform also applŤes to all

content ŤnsŤde
CSS
Transform
scal
e
transform: scale(2);

transform:
scale(0.5);
transform: scale(1,
2);
transform:
scaleX(0.5);

transform:
scaleY(0.5);

x & y axŤs
separately
CSS
Transform
translat
e
transform: translate(20px);

transform: translate(20px, 50px);

transform: translateX(20px);

transform: translateY(20px);

we can also gŤve dŤstance Ťn other unŤts

lŤke
% ems rems etc
show -ve values too
CSS
Transform
ske
w
transform: skew (30deg);

now that we have done Ťt we can go and make

some advanced 3d objects usŤng transform
Ťf we are good at math
Thank You