HTM CS JS

L S

Structure/
APN
Styl Logi
layout
COLLEG
A
e c

E
Level 1
APNA
COLLEG
E
Basics of
CSS
CSS
Cascading Style Sheet

It is a language that is used to

A P N
desc ribe the

A style of a document.

COLLEGE
makeup
not a programming language, but a stying
language

But for styling there should be some content, and

that's why we studied html before
css

go to websites & remove css

Basic
Syntax

APN
Selecto
r

h1 color:
{
A
}
red;
Propert
COLLEGE
Valu
y e

semicolon shows that one property has ended

& it is important to put this even though it
won't incurr error
Including
Style
Inlin
e

College
APN
<h1 style="color: red">
</h1>
Apna

<style> tag COLLEG

A
<style>
h1 {
color :
E
red;
} Writing style directly inline on each

< element
Style is added using the <style> element in the same
/ document

s
Including
Style
External
Stylesheet
Writing CSS in a separate docu A P
ment &

link N A
ing it with HTML file

COLLEG
E best way

An inline style will override external and

internal styles
Color Property
Used to set the color of
foreground

color: APNA
COLLEG
red;
color:
pink;
color: blue;

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

background-color:
red;
APNA
background-color:
OLLEG
pink
C ;
background-color:
E
green;
background-color:

blue;
Color Systems
RGB
color: rgb(255, 0,
0); APNA
COLLEG
color: rgb(0, 255,
0);

E
we don't have to think on colors on our own, we
can just use color picker tools online or
search online
Color Systems
Hex

APNA
(Hexadecimal)
color: #ff0000;

COLLEG
color:
#00ff00;

E
google color
picker
Selectors
Universal Class Selector
Selector
*{
}
APNA .myClass

Element {}
Selector

COLLEGE
h1 { }

Id Selector

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

& h3. COLLEG

A
Q2: Create 3 headings with h1, h2
Give them all a class "heading" & set color of
"heading" to red.

Q3:
E
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 APNA

COLLEG
E
text alignement doesn't mean align according to the
page; i.e. right does not mean on the page's right
side
but the parent's right side

in css3, latest css -> start and end are introduced for
language support like arabic
Text
Properties
text-decoration

A P
text-decoration : underline / ove rline /

N A
line -thro ugh

COLLEG
E also add style, wavy, dotted or color
like red

can also set to none for hyperlinks

Text
Properties
font-weight

A
font-weight : normal / bold /

boA P N
900 COLLEG
font-weight
lder / : 100-
light er

E
font-weight is to show how dark or light our
text is it can be names or in terms of
numbers
values from 100 to 900
Text
Properties
font-family

font-family : arial, roboto

arial
APN
A
COLLEGE

we can write multiple

familiies as a fall-back
 APNA
COLLEG
E
Units in
CSS
Absolute

APNA
pixels
(px)

COLLEG
96px = 1
inch
font-size:
2px;
E
cm, mm, inch & others are also
there but pixels is the
Text
Properties
line-height

line-height : APNA
COLLEG
2px

line-height :

E
3

line-height :
normal
Text
Properties
text-transform

text-tranform : uppercase / low A P

ercase /

ca N A
pitaliz e / none

COLLEG
E
Practice Set 2
Q1: Create a heading centred on the page with all of its text capitalized
by default.

Q3: Create one div inside

Q2: Set the font family of all the c A P
LLEG N
onten t in t he

C O
Set id & text "outer" for the first one & "inner" for the
an second

A
doc
otherone. Set
div text size to 10px.
ument to "Times New Roman".
E
div.the outer div text size to 25px & inner
Level 2
APNA
COLLEG
E
Box
Model in
Box Model in Widt
h

CSS Margi

Heigh
content n
Height

t
Width APN
Borde
r
Paddin
g

Border
COLLEG
A
Paddin

g E
Margin
Heig

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

t
element

div
APNA
{
height:
}
50px; COLLEGE
 Widt
h

Width
content
By default, it sets the content area width of the
element

div
APNA
{
width:
}
50px; COLLEGE
Border
content
Used to set an element's
border

border-width : APN Borde

r

2px;
border-style : solid /
dott
border-color : COLLEG
A
ed /
dashed
black;
E
Bord
er
Shorthand

PN
border : 2px solid

black A; COLLEG
A
E
Border
Used to round the corners of an element's outer
border edge

border-radius : 10px;

APNA border-radius : 50 C
%;

OLLEGE
Paddi
content
ng
padding- Paddin

APN
left g

padding-
right
padding-
top
padding-
COLLEG
A
bottom
E
Paddi
ng
Shorthand

padding:
50px;
APN
padding: 1px 2px
A
C O 3px 4 px;

LLEGE
top | right | bottom | left -> clockwise
Margin Margi
content n content

margin-

APN
right
margin-
left
margin-
top
margin-
COLLEG
A
bottom
E
Marg
in
Shorthand

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

Q2: Create the following

APNA
navbar.
COLLEG
E
 60px
200p (heigh
x t)
25p (gap
x ) #f0880
#0f111
(tex anchor 4
1
t) tags (yellow

APNA
(black)
(links) )

COLLEG
E
Display Property
display: inline / block / inline-block / none

block - Takes full

A P N
G
inline - Takes only the space requi red by

space
C O L
inline-block - Similar
avail to iinline
able
E
n but we can set margin &
the A
padding.
element. (no margin/ padding)
none - To remove element from document flow.

w
L E idth .
 Visibility

visibility:
hidden; APN
COLLEGE
A
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
APNA
color:rgba(255, 0, 0,
OLLEG
0.5
C );

E
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
header)
& width
previous
APN
of in
navbar divs to 100px.
the

COLLEG
Q2: Add borders to all the
divs.
A
E
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
APNA
COLLEG
E
positi
on
Units in
CSS
Relative

% APNA
e COLLEG
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.

APNA
COLLEG
width :
33% ;
margin-left :
50% ;
E
show 50% of parent for h1

make one par & one child div

sometimes the relation is also to some other

property not just size, but that is not very
commonly used
Em

APNA
COLLEG
E
font size of child will be half of parent for
0.5em

for padding & margin it's relative to same element's

font size

show both on same par & div

make a button with border & font-size

Rem (Root
Em)

APNA
COLLEG
E
font size of child will be half of parent for
0.5em

for padding & margin it's relative to same element's

font size

show both on same par & div

make a button with border & font-size

Othe
rsrelative to 1% viewport height
vh:

vw : relative to 1% viewport width

APNA
COLLEG
E
Position
The position CSS property sets how an element is positioned in a
document.

position : static / relative / A P

abso lute

N / fixedA
COLLEG
E
Position
static - default position (The top, right, bottom, left, and z-index properties
have no effect)

relative - element is relative to it A P

self. ( The t N op, A
rig ht,

bottom, left, and z-index will work) absolute - positioned relat C ive

to O its clo L L E G
sest pos ition ed an E cestor. (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

APNA
smaller one.

COLLEG
z-index : auto
(0)
z-index : 1 /
2 / ...
z-index : -1 / -
2 / ...
E
show 3d
space
Background
Image
Used to set an image as

APNA
background

background-

C O
image : url("i mage.
L L
jpeg ");

EGE
Background
Size

APN
background-size : cover / contain /
auto

COLLEG
A
E
cover = fits with no empty
space contain - fits with image
fully visible auto = original size
Practice Set 5
Qs: Create the following layout using the
given html.

APN
Give the div a height, width & some background
image.
Use the appropriate position property for the div element to

COLLEG
place it atof
right end the
the page. (The div should not move even
on scroll)
A
Use z-index to place the div on top of
page.

<p> lorem*5 </p>

E
<div> Love Nature
</div>
<p> lorem*5 </p>
Level 4
APNA
COLLEG
E
Basics of
CSS
Flexbox
Flexible Box
Layout

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

COLLEG
A
E
The Flex Model
flex

APNA
container

CO LE G ma i

flex
L E
n axis

item cross
axis

set display property of container to

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

flex-direction
(default)
flex-direction
: row;

: row-
APN
reverse;
flex-direction
column;
: COLLEG
A
E
flex-direction : column-
reverse;
Flex
Properties
for Flex Container
justify-content : alignment along the
main axis.
APN
flex-start / flex-end / centre / e-evenly

CA O
spac /
flex-wrap : nowrap / wrap / wra p-

reveL LEGE
rse align-items :

align-content : alignment of space

alignment along the cross axis. between & around the content
along cross-axis
Flex
Properties
for Flex Item
align-self : alignment of individual along the
cross axis.
APN
flex-grow : how much a flex item will grow relative to the rest of the
flex
spaceitems
is if
available COLLEG
A
E
flex-shrink : how much a flex item will shrink relative to the rest of the
flex items if space is available

silmilar to align items but for individual

element and it overrides align items

grow & shrink take values like 0,

1, 2, 3 0 = doesn't grow at all
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.
APNA
COLLEG
Qs: Use flexbox to center one div inside
another div.

E
Qs: Which has higher priority - align-items or
align-self?
Media Queries
Help create a responsive
website

APNA
@media (width :
600px) { div {
background-
color : red;
}
}
COLLEG
@media (min-width :
600px)
div {{
E in today's world everyone has a different device with
background-color : thousand of different screen sizes
if you built a website people will use it on laptop, big
red; screen computers, an iphone, a big screen android phone
or a small screen one, an ipad
}} even orientation is different like landscape or
portrait so it's important that layout looks
good on all
so we need design to be responsive, respond to different
screen sizes & orientation
Media Queries

300px)
div {
{
APN
@media (min-width : 200px) and (min-width :

COLLEG
background-color :

A
} red;
}

E in today's world everyone has a different device with

thousand of different screen sizes
if you built a website people will use it on laptop, big
screen computers, an iphone, a big screen android phone
or a small screen one, an ipad
even orientation is different like landscape or
portrait so it's important that layout looks
good on all
so we need design to be responsive, respond to different
screen sizes & orientation
Practice Set 7
Qs: Add a media query to implement the
following:

APN
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 changA

C O Les to red fo
the color of a div changes to blue for width
r
above 600px

wid
L E G E
th b etw een 4 00px & 600px
Level
5
APNA
COLLEG
E
THESE ARE things that can be called
advanced CSS it is an important chapter
because we should know but practically
itna aap use nahi karenge
but pata hona chahiye
Transitions
Transitions enable you to define the transition between two states of
an element.

width etc.)
transition-duration : 2s /
APN
transition-property : property you want to transition (font-size,

A
4ms ..

transition-timing-function C O : ease -in /

e L L E G E
ase -out / lin ear / steps ..
to add some animation to elements
timing function is how the transition should be
transition-delay : 2s / 4ms .. applied show hover
Transition Shorthand
property name | duration | timing-function
| delay

A
transition: font-size 2s ease-in-ou t

0.2s; PNA
COLLEG
E to add some animation to
elements
CSS Transform
Used to apply 2D & 3D transformations to an
element
rotat
etransform: rotate(45deg);
APN
A
COLLEGE
to add some more animation to
how an element looks

rotate is simple to understand,

will take angles and degrees is
most common

transform also applies to all

CSS Transform
scal
e
transform: scale(2);

transform: APNA
scale(0.5);
transform: scale(1, COLLEG
2);
transform:
scaleX(0.5); E
transform:
scaleY(0.5);

x & y axis
separately
CSS Transform
translat
e
transform:
translate(20px);
transform: translate(20px,
50px);
APN
CA
transform: translateX(20 px);

OLLEGE transform:
we can also give distance in other
units like
% ems rems etc
show -ve values too
CSS Transform
ske
w
transform: skew
(30deg);
APN
COLLEG
A
E
now that we have done it we can go and make some
advanced 3d objects using transform if we are
good at math
Animation
To animate CSS
elements

@keyframe
to { font-size : 40px; }
myName
from {{font-size :
20px; }
APN
}
A
COLLEGE
Animation
Properties
animation-

APNA
name
animation-
duration

COLLEG
animation-timing-
function
animation-

E
delay
animation-iteration-
count
animation-
direction
Animation
Shorthand
animation : myName 2s linear

A
3s
A P N
COLLEG
infinit e nor mal

E
% in Animation

@keyframe
myName { APN
COLLEG
0 % {{font-size
font-size: :

A
50%
20px;
30px; } }
100% { font-size :
} 40px; }

E
Practice Set 8
Qs: Create a simple loader using
CSS

APN
Step1 : create a div with circular shape & a thick border
from one end
(top/bottom/left/
right)

Step2 : To make it spin c A

C O L L
reate an an imat ion

E G Ewhic h tran sforms it from 0deg to 360deg