CSS Topic Covered

1 color:
2 background-color:
3 RGB(255,0,0); range 0-255
RGBA(255,0,0,1) A means Alpha Channel that opacity
is in range 0 to 1 eg 0.5
4 Hex color:#ff0000 here 0-9 10=a,11=b,12=c,13=d,15=e,16=f
16*16=255=ff
5 Selectors
Universal (*{}) , Element h1{} , Id Selector #id{} ,Class .class{}

6 Text Properties
Text-align: left/right/center
Text-decoration: underline/overline/line-through
Font-weight: normal/bold/bolder/lightr range=100-900
Font-family : arial , roboto;
Line-height : normal /in pixel/in number
Text-transform : uppercase/lowercase/capetalize/none

7 Units in Css (Absolute Unit )

96 px = 1 inch = 2.54 cm

8 Box Model in CSS

Height
Width
Border
 Border-radius:10px,50%; for circle shape
Padding :
Padding : top | right | bottom | left clockwise
Margin
margin : top | right | bottom | left clockwise

9 Display Properties
1 inline – take space as per requirement eg span tag (no margin /padding )
2 block – take full width in element eg div tag
3 inline-block- similar to inline but in this can set margin and padding
4 none – remove element as like the element is deleted form the page
Most used is “inline-block” & “block”

10 Visibility
In this the element is not display but the space of that element is present
Visibility :hidden ; rarely use

11 Units in CSS
1 %:
it is used to give parent to child format like in parent when we give
height, width parent height=200px =100% for child is used in height , width
2 em:
It Is used to font like properties in parent child relation also we use it for
width for eg font-size=30px=1em for half of it 0.50
3 rem (root em)
It is used the font size of root element like body=16px by default then in
body=16px=font-size=1rem for half of it is 0.5

Vh , Vw
12 Position
position : static / relative / absolute / fixed
1 static :
default position (The top, right, bottom, left, and z-index properties
have no effect)
2 relative :
As per his requirement is change its position itself
3 absolute:
As per parent child relation is change but parent does not have position
static
4 fixed:
Position is set as per body tag or as per web page used for header and
footer mainly
5 sticky
Based on scroll bar but in upper and lower site of position have big
content like paragraph

13 z-index
Used for overlapping of element
z-index:-2,-1,0,1,2,n

14 Background Images
background-image : url("image.jpeg");
background-size : cover / contain / auto / 900px
you can set it manually too by width and height
15 Flex Box
1 flex-direction : row(default) / row-reverse / column / column-reverse;
used to direct as per row in x axis

2 justify-content : flex-start / flex-end / centre / space-

evenly ,between ,around
used to adjust items as x-axis in row dirn that means horizontally

3 align-items : flex-start / flex-end / center

used to adjust items in y axis in row dirn that means vertically

4 flex-wrap : no wrap / wrap / wrap-reverse

when flexbox is created if elements re bigger then they are adjust by
itself but if we wrap then they take empty space of a container

5 align-content: flex-start / flex-end / center

Is work when flex wrap is used otherwise is not work

 Used in under elements of Container

6 align-self: flex-start / flex-end / center

Is work as align-items but it used in particular element it has high
priority than align-item

7 flex-grow: 0.5/0/1/2
When the elements are bigger than container then they are adjust
there size but if we use this property then they grow
 8 flex-shrink: 0.5/0/1/2
When the elements are bigger than container then they are adjust
there size but if we use this property as 0 then they will be take there old
height width that means they cannot shrink or cannot adjust there size .

Notice :- make flexbox in practical

16 Media Queries
@media (width : 600px)
{
div
{
background-color : red;
}
}
@media (min-width : 600px)
{
div
{
background-color : red;
}
}
 @media (min-width : 200px) and (min-width : 300px)
{
div
{
background-color : red;
}
}

17 Transitions
Transition : property name | duration | timing-function | delay
property name: we can apply transition in specific element like font-
size or etc or simply in All elements
duration : how many time the transition will run
timing-function: it is a style when the element change its state
delay: it means when or how many time after the transition/ effect
apply in element
Syntax:
transition: all/font-size 2s ease-in/ease-out/linear/steps(no)/cubic 1s

18 Transform
1 Rotate :
Syntax : transform : rotate(45deg);
Rotate: 45deg;
Rotate: x 45deg;
Rotate: y 45deg;
Rotate: z 45deg;
Used to rotate element in 3 axis x ,y ,z
2 Scale:
 Syntax : transform: scale(2); element size is double in 2
transform: scale(0.5);
transform: scale(-1, 2); here x ,y axis is involve

Used to scale element that means to increase/decrease the size of an

element in 2 axis x ,y.

3 translate :
Syntax : transform: translate(20px);
change position of an element as per x , y axis used +ve and -ve
values
transform: translate(20px, 50px);
here x , y values are add

Used to translate element that means to change the position of an

element in 2 axis x ,y.

19 Animation Properties
Syntax :
Shorthand
animation: name | duration | timing-function | delay | iteration-
count | direction ;
eg
animation: animate123 3s ease 1s infinite/5 column

Animation-direction : is used when we have to move element or change

the element position
animation-direction : normal / reverse / alternate / alternate-reverse
 eg animation :position 3s linear 1s infinite normal;
@keyframe position
{
from{ margin:0px; }
to{ margin:200px }
}

Templates
@keyframe animation_name {
From{ property : value; }
here you can add multiple values
To{ property : value ;}
}

@keyframe animation_name {
0%{ property : value; }
50%{ property : value ;}
100%{ property : values }
}
Eg
animation :circle 2s linear 1s infinite normal;
@keyframe animation_name {
0%{ font-size: 20px;}
50%{ font-size: 30px;}
100%{ font-size: 40px; }
}
Notice :- make transition and animation in practical .
Code with Harry

Grouping of Selectors :
h1,h2,h3,div { property :value;}

Grouping of Class selector with normal :

p .class a{ property :value;}
.class ul li a { property :value;}}

Types of colours
Like rgb() , hex(#ff0000) ,hsl hue , saturation , lightness
Hsl(8,90%,60%);
Background-repeat : no-repeat/repeat/ repeat-x/ repeat-y
background-position: ; top || left || bottom ||right || || center
left top || right top || left bottom || right bottom
background-attachment: scroll ; fixed || scroll || local
Margin -Collapsing ;
Step 1: create 2 div 1 &2 give them width height and background
Step 2: give div1 margin from right 30px & div2 margin from left 20px
Step 3 : both margins cannot divide that means the doesn’t give 30+20=50px
Step 4: the highest margin get priority and they will be adjust in that
Step 5: div1 get 30px and div 2 adjust with 20 px int it that means 30-20=10px
is extra of div1

Notice :- Explore Google Fonts and Unsplash images .

Generic Families :
They are base Families that means it will be main branch family for eg. Sans ,
serif ,serif-sans and other sub branch families are font-famiies for eg. Times in
roman , Calibri (Body)

float : left || center || right

used to set elements at particular position create 2 divs for info of this
clear :
explore this with float property

Explore grid
Display: grid; it like flex give it to only parent

grid-row-gap: 9px;
grid-column-gap: 9px;
grid-gap: 20px; shorthand of upper 2
grid-template-columns: 43px 334px auto; it makes 3 columns auto is used
grid-template-rows: 434px 834px ; make rows
justify-content: center;
align-content: space-between;

overflow : hidden //scrollbar hidden

color : transparent //color of any element goes transparent
outline: none //use in text field input border : none