This presentation contains the most important and basic concepts of CSS and its styling techniques.

1. APNA
COLLEGE
HTML
Structure/layout
CSS JS
Style Logic

2. Level 1
Basics of CSS
APNA
COLLEGE

3. CSS
makeup
not a program
m
Ť
nglanguage,but a styŤ
nglanguage
But for stylŤngthere shouldbesomecontent,andthat's why
westudŤ
edhtm
l beforecss
gotowebsŤ
tes & rem
ovecss
Cascading Style Sheet
It is a language that is used to
A
desc
P
ribe
N
the
A
style of a document.
COLLEGE

4. Basic Syntax
Selector
h1 {
}
Property Value
semŤcolonshowsthat oneproperty has ended& ŤtŤ
s
Ť
m
portant toput thŤ
s eventhoughŤ
t won't Ť
ncurr error
APNA
color: red;
COLLEGE

5. Including Style
Inline
<h1 style="color: red"> Apna College </h1>
WrŤ
tŤ
ng style dŤ
rectly Ť
nlŤ
neon each elem
ent
Style Ť
saddedusŤngthe <style>elementŤ
nthe same document
<style> tag
<style>
h1 {
color : red;
}
</style>
APNA
COLLEGE

6. Including Style
External Stylesheet
best way
An inline style will override external and internal styles
Writing CSS in a separate docuA
ment P
& link
N
ing itA
with HTM L file
COLLEGE

7. Color Property
Used to set the color of foreground
color: red;
color: pink;
color: blue;
color: green;
APNA
COLLEGE

8. Background Color Property
Used to set the color of background
background-color: green;
background-color: red;
background-color: pink
C
;
background-color: blue;
APNA
OLLEGE

9. Color Systems
color: rgb(0, 255, 0);
RGB
color: rgb(255, 0, 0);
wedon'thave to thŤnkoncolorsonour own,wecan just use
color pŤ
cker tools onlŤ
neor searchonlŤ
ne
APNA
COLLEGE

10. Color Systems
color: #00ff00;
Hex (Hexadecimal)
color: #ff0000;
googlecolor pŤ
cker
APNA
COLLEGE

11. Selectors
Universal Selector
Element Selector
* { }
h1 { }
Id Selector
#myId { }
Class Selector
APNA .myClass {}
COLLEGE

12. Practice Set 1
Set its background color to blue.
Q1: Create a simple div with an id "box".
Add some text content inside the div.
Give them all a class "heading" & set color of "heading" to red.
Q2: Create 3 headings with h1, h2 & h3.
Q3: Create a button & set its background color to :
green using css stylesheet
blue using <style> tag
pink using inline style
APNA
COLLEGE

13. Text Properties
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
Ťncss3, latest css -> start and end are Ťntroduced for language
support lŤ
ke arabŤ
c
text-align
text-align : left / right / center APNA
COLLEGE

14. Text Properties
also add style, wavy, dotted or color like red
can also set to none for hyperlinks
text-decoration
text-decoration : underline / ove
A
rlineP
/ line
N
-throA
ugh
COLLEGE

15. Text Properties
font-weight : 100-900
font-weŤ
ght Ť
s to showhowdark or lŤ
ght our text Ť
s
Ť
t can benames or Ť
n terms of numbers
values from100 to 900
font-weight
font-weight : normal / bold / boA
lder /P
light
N
er A
COLLEGE

16. font-family : arial
Text Properties
font-family
we can write multiple familiies as a
fall-back mechanism
APNA
font-family : arial, roboto
COLLEGE

17. APNA
COLLEGE

18. pixels (px)
Units in CSS
Absolute
96px = 1 inch
font-size: 2px;
cm
, m
m
, Ť
nch& others are alsothere
but pŤ
xels Ť
s them
ost used
APNA
COLLEGE

19. line-height : 2px
Text Properties
line-height
line-height : 3
line-height : normal
APNA
COLLEGE

20. Text Properties
text-transform
text-tranform : uppercase / lowA
ercase
P
/ ca
N
pitaliz
A
e / none
COLLEGE

21. 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.
Practice Set 2
Q1: Create a heading centred on the page with all of its text capitalized by default.
Q2: Set the font family of all the cA
ontenP
t in tN
he doc
A
ument to "Times New Roman".
Q3: Create one div inside an
C
other
O
div. LLEGE

22. Level 2
Box Model in
css
APNA
COLLEGE

23. Height
Width
Border
Padding
Margin
APNA
COLLEGE
Box Model in CSS Width
Height
Border
Padding
Margin
content

24. By default, it sets the content area height of the element
div {
}
Height
Height
content
APNA
height: 50px;
COLLEGE

25. By default, it sets the content area width of the element
div {
}
Width
Width
content
APNA
width: 50px;COLLEGE

26. border-width : 2px;
border-style : solid / dotted / dashed
border-color : black;
Border
Used to set an element's border
Border
content
APNA
COLLEGE

27. Border
Shorthand
border : 2px solid black
A
; PNA
COLLEGE

28. Border
Used to round the corners of an element's outer border edge
border-radius : 10px; APNA
border-radius : 50C
% ; OLLEGE

29. padding-left
padding-right
padding-top
padding-bottom
Padding
APNA
COLLEGE
Padding
content

30. padding: 50px;
Padding
Shorthand
APNA
padding: 1px 2px C
3px 4
O
px; LLEGE
top |right |bottom |left -> clockwise

31. margin-right
margin-left
margin-top
margin-bottom
Margin
APNA
COLLEGE
Margin
content content

32. margin: 50px;
Margin
Shorthand
top |right |bottom |left -> clockwise
APNA
margin: 1px 2px 3C
px 4O
px; LLEGE

33. Set its background color to green & the border radius to 50%.
Q1: Create a div with height & width of 100px.
Q2: Create the following navbar.
Practice Set 3
APNA
COLLEGE

34. #f08804
(yellow)
#0f1111
(black)
60px
(height)
25px
(text)
200px
(gap)
anchor tags
(links)
APNA
COLLEGE

35. Display Property
inline-block - Similar to inline but we can set margin & padding.
none - To remove element from document flow.
display: inline / block / inline-block / none
inline - Takes only the spaceA
requi
P
red N
by the
A
element. (no margin/ padding)
block - Takes full space
C
avail
O
able i
L
n w
L
idth
E
.
GE

36. Visibility
visibility: hidden;
APNA
COLLEGE
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.

37. Alpha Channel
opacity (0 to 1)
RGBA
color: rgba(255, 0, 0, 0.5
C
);
color: rgba(255, 0, 0, 1);
APNA
OLLEGE

38. (add the previous navbar in the header)
Q1: Create a webpage layout with a header, a footer & a content area containing 3 divs.
Set the height & width of divs to 100px.
Q2: Add borders to all the divs.
Practice Set 4
Q3: Add a different background color to each div with an opacity of 0.5
Q4: Give the content area an appropriate height.
APNA
COLLEGE

39. Level 3
position
APNA
COLLEGE

40. %
Unitsin CSS
Relative
em
rem
more like vh, vw etc
APNA
COLLEGE

41. Percentage (%)
It is often used to define a size as relative to an element's parent object.
width : 33% ;
margin-left : 50% ;
show50% of parent for h1
make one par & one chŤ
ld dŤ
v
sometŤmes the relatŤon Ťsalso to some other property not
just sŤ
ze, but that Ť
s not very commonly used
APNA
COLLEGE

42. Em
font sŤze of chŤld wŤllbe half of parent for 0.5em
for paddŤng & margŤn Ťt's relatŤve to same element's font sŤze
showboth on same par & dŤ
v
make a button wŤ
th border & font-sŤ
ze
then change Ťtsborder radŤus from pŤxelto ems to set a constant shape
APNA
COLLEGE

43. Rem (Root Em)
font sŤze of chŤld wŤllbe half of parent for 0.5em
for paddŤng & margŤn Ťt's relatŤve to same element's font sŤze
showboth on same par & dŤ
v
make a button wŤ
th border & font-sŤ
ze
then change Ťtsborder radŤus from pŤxelto ems to set a constant shape
APNA
COLLEGE

44. Others
vh: relative to 1% viewport height
vw : relative to 1% viewport width
APNA
COLLEGE

45. Position
The position CSS property sets how an element is positioned in a document.
position : static / relative /
A
absoP
lute N
/ fixed
A
COLLEGE

46. Position
static - default position (The top, right, bottom, left, and z-index properties have no effect)
relative - element is relative to it
A
self. (P
The t
N
op, rig
A
ht, bottom, left, and z-index will work)
absolute - positioned relatC
ive toO
its cloL
sestL
posE
ition
G
ed anE
cestor. (removed from the flow)
fixed - positioned relative to browser. (removed from flow)
sticky - positioned based on user's scroll position

47. z-index
It decides the stack level of elements
z-index : auto (0)
z-index : 1 / 2 / ...
z-index : -1 / -2 / ...
Overlapping elements with a larger z-index cover those with a smaller one.
show 3d space
APNA
COLLEGE

48. Background Image
Used to set an image as background
APNA
background-image :
C
url("i
O
mage.
L
jpeg
L
");
EGE

49. Background Size
cover = fits with no empty space
contain - fits with image fully visible
auto = original size
background-size : cover / contain / auto
APNA
COLLEGE

50. Qs: Create the following layout using the given html.
Practice Set 5
Use the appropriate position property for the div element to place it at the
right end of 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>
Give the div a height, width & some background image.
APNA
COLLEGE

51. Level 4
Basics of CSS
APNA
COLLEGE

52. Flexbox
Flexible Box Layout
It is a one-dimensional layout method for arranging items in rows or columns.
APNA
COLLEGE

53. The Flex Model
set dŤsplayproperty of contaŤnerto flexfŤrst
CO
L
flex item
flex container
APNA
LE
ma
G
in axisE
cross axis

54. 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;
APNA
COLLEGE

55. Flex Properties
for Flex Container
justify-content : alignment along the main axis.
flex-start / flex-end / centre / space-evenly /
align-content : alignment of space between & around the content along cross-axis
APNA
flex-wrap : nowrap / wrapC
/ wra
O
p-
reve
L
rseLEGE align-items : alignment along
the cross axis.

56. 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 items if
space is 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 growat all
A
P
N
A
COLLEGE

57. Now, use flexbox to place them all spaced equally in a single line.
Qs: Create a navbar with 4 options in the form of anchor tags inside list items.
Qs: Use flexbox to center one div inside another div.
Qs: Which has higher priority - align-items or align-self?
Practice Set 6
APNA
COLLEGE

58. Media Queries
Help create a responsive website
Ťntoday's world everyone has a dŤfferentdevŤcewŤththousand of
dŤ
fferent screen sŤ
zes
Ťfyou buŤlta websŤtepeople wŤlluse Ťton laptop, bŤgscreen
computers, an Ťphone,a bŤgscreen androŤdphone or a small screen
one,an Ť
pad
even orŤentatŤonŤsdŤfferentlŤkelandscape or portraŤt
so Ťt's Ťmportant that layout looks good on all
so weneed desŤgn to be responsŤve, respond to dŤfferentscreen sŤzes
& orŤ
entatŤ
on
@ media (width : 600px) {
div {
background-color : red;
}
}
@ media (min-width : 600px) {
div {
background-color : red;
}
}
APNA
COLLEGE

59. Media Queries
Ťntoday's world everyone has a dŤfferentdevŤcewŤththousand of
dŤ
fferent screen sŤ
zes
Ťfyou buŤlta websŤtepeople wŤlluse Ťton laptop, bŤgscreen
computers, an Ťphone,a bŤgscreen androŤdphone or a small screen
one,an Ť
pad
even orŤentatŤonŤsdŤfferentlŤkelandscape or portraŤt
so Ťt's Ťmportant that layout looks good on all
so weneed desŤgn to be responsŤve, respond to dŤfferentscreen sŤzes
& orŤ
entatŤ
on
@media (min-width : 200px) and (min-width : 300px) {
div {
background-color : red;
}
}
APNA
COLLEGE

60. Qs: Add a media query to implement the following:
the color of a div changes to green for viewport width less than 300px
Practice Set 7
the color of a div changes to pink for width between 300px & 400px
the color of a div changes to blue for width above 600px
APNA
the color of a div chang
C
es to
O
red fo
L
r wid
L
th b
E
etw
G
een 4
E
00px & 600px

61. Level 5
THESE ARE thŤ
ngs that canbecalledadvancedCSS
Ť
t Ť
s an Ť
m
portant chapter becauseweshouldknow
but practŤ
callyŤ
tna aapuse nahŤkarenge
but pata honachahŤ
ye
APNA
COLLEGE

62. Transitions
Transitions enable you to define the transition between two states of an element.
toaddsom
e anŤ
m
atŤ
on toelem
ents
tŤ
m
Ť
ngfunctŤ
onŤ
s howthetransŤ
tŤ
onshouldbeapplŤ
ed
showhover
transition-property : property you want to transition (font-size, width etc.)
transition-duration : 2s / 4ms ..
APNA
transition-timing-functionC
: ease
O
-in / e
L
aseL
-out
E
/ lin
G
ear /E
steps ..
transition-delay : 2s / 4ms ..

63. Transition Shorthand
property name |duration |timing-function |delay
toaddsom
e anŤ
m
atŤ
on toelem
ents
transition: font-size 2s ease-in-ouA
t 0.2s;
PNA
COLLEGE

64. CSS Transform
Used to apply 2D & 3D transformations to an element
rotate
toaddsom
e m
oreanŤ
m
atŤ
on tohowan
elem
ent looks
rotate Ť
s sŤ
m
pletounderstand,wŤ
ll take
angles anddegreesŤ
s m
ost com
m
on
transformalsoapplŤ
es toall content Ť
nsŤ
de
APNA
transform: rotate(45deg);
COLLEGE

65. CSS Transform
scale
x& y axŤ
s separately
transform: scaleX(0.5);
transform: scaleY(0.5);
transform: scale(2);
transform: scale(0.5);
transform: scale(1, 2);
APNA
COLLEGE

66. CSS Transform
transform: translate(20px);
translate
transform: translate(20px, 50px);
wecanalso gŤvedŤstanceŤ
nother unŤtslŤke
%em
s rem
s etc
show-vevaluestoo
APNA
transform: translateX(20
C
px);
OLLEG
E transform: translateY(20px);

67. CSS Transform
transform: skew (30deg);
skew
nowthat wehavedoneŤ
t wecangoandm
akesom
eadvanced3d
objects usŤ
ngtransformŤ
f wearegoodat m
ath
APNA
COLLEGE

68. @keyframe myName {
from { font-size : 20px; }
}
Animation
To animate CSS elements
APNA
to { font-size : 40px; }
COLLEGE

69. Animation Properties
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
APNA
COLLEGE

70. Animation Shorthand
animation : myName 2s linear 3s
A
infinit
P
e nor
N
mal
A
COLLEGE

71. % in Animation
@keyframe myName {
0% { font-size : 20px; }
50% { font-size : 30px; }
100% { font-size : 40px; }
}
APNA
COLLEGE

72. Qs: Create a simple loader using CSS
Practice Set 8
Step1 : create a div with circular shape & a thick border from one end
(top/bottom/left/right)
APNA
Step2 : To make it spin c
C
reate
O
an an
L
imat
L
ion
E
whic
G
h tran
E
sforms it from 0deg to 360deg
Step3 : Add the animation property to the loader with infinite duration