To add css to the document
When we have to show their term and description like unordered and ordered list
When same word in italics have different meaning or when we have to say things sarcastically
The attribute named title has only work is when we go our mouse to the position then then it will
show a title
Best way to attach figure with figure caption as we does not use ordinary method because we
doesnot sure of that working
Video
For adding subtitles
Iframe this is uses to use resource of other website in our own websites like you want to play or use
youtube video into your websites the you use iframe but be carefull with security furposes
Way to add svg
This help us to make your image responsive
Make your image swith when screen size changes
Summaray of upper two images
For tables we have to insert row wise
Rowspan use to take two row and col span to take two columns;
<table>
<tr>
<th colspan="2">Animals</th>
</tr>
<tr>
<th colspan="2">Hippopotamus</th>
</tr>
<tr>
<th rowspan="2">Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
<tr>
<th colspan="2">Crocodile</th>
</tr>
<tr>
<th rowspan="2">Chicken</th>
<td>Hen</td>
</tr>
<tr>
<td>Rooster</td>
</tr>
</table>
Styling in col
Adding a caption
Now CSS gona start
Rectangle element kabhi bhi banna ho toh wo div ka
istmal karna hai
If I simply worte the element div like <div> </div> then
for css calling I have to write div
But if I make id then for calling I have to use # like
For <div id=”abhi”></div> I have to use #abhi{
}
But if I make class then for calling I have to use . like
For <div class=”abhi”></div> I have to use .abhi{
}
Color used for text color and background color used for
bg color
For px or pixles if we define some pixcles to something
and if we minimise our website then it take that
amount of space which we defined to it (mtlb agar
humne kuch space define kiya hai toh wo utha toh lega
hi chahe minimise hi kyoun na kardo screen ko)
We should not use pixcles while making websites
% - which is as simple as it shown that it changes with
scheen means total
Parent means div ke andar div now you can think
Maxwidth and minwidth hook set kardeta hai use upar
nhi jane deta hai
Padding – In padding we do not have to talk to element
on which we need padding we talk to padd then padd
make boundry around the element
So wo element andar aa
jata hai ;
Margin -YE do element ke beech mai space dene ke
kam aata hai like upar wale element ke niche space
denge bottom ya neeche wale element ke upar space
denge like top
Padding
This changes to
Margin margin ne
box ko hi gheech liya
NOTE- Box ke andar lagtha hai padding and box ke bhar
lagtha hai margin
Padding
Ye pheli value like 30 px upar neche lagegi and 10 px
right left lagegi
Top right bottom left
Border
Double can be changed to dash , solid ,double
Border radius
Border radius can make block into capsule by making
border radius is equal to half of width
Selectors in css
Talking about block and inline element
Block elemnt allow nhi karte ki koi unke sath mai aaye
Bbbbbbbbbbbbbb ---------------------------------------
Nothing we can put side of b segment
But inline allows to element to get side of theirs
Agar niche wala block hai aur upar wala in line toh bhi
block wala niche hi rahega
Agar ye dono inline element hai toh ye allow nhi
karenge ki app inki width ya height ko badaye
NOTES- Block element donot allow any one to its left
right but usme width height de skte hai
Inline element kehta hai aajao agar jagah hai toh but
app inki width and height nhi badha skte
Inline block – ye bydefault is nature ka nhi hota hai
hume banna padhta hai ki block tum inline block ban
jao , aur inline block allow karta hai right left mai aana
aur hum uski width and height bhi badha skte hai
Position : absolute – kisi bhi element ki position
absolute bna di toh wo apni jagah se upar uth jayega
Like this toh uske peeche wala element aage aa jayega
aur hum website ko upar se dekhte hai jiski wajah se
wo element chup jaye ga aur jo element utha hai wo
uss plane mai kahi move kar skta hai
Toh man le humne sbko utha diya toh sarre uth jayege
toh hume normal dikhega – so normal dikhega but sbka
plane alag hoga wo elemnt place ke sequence ke hisab
se hoga
Like this- third wala element layer 3 pe utha hai 2 wala
layer 2nd pe and 1st wala layer 1st pe uth hai
Position:relative- like ak box kisi dabbe mai hai toh wo
toh bhar nhi jaa skta but agar mai use absolute bna du
toh wo arram se bhar jaa skta hai so wo toh dabbe se
bhi bhar nikal jayega toh hum use uss dabbe ke relative
bna skte hai so abb wo uppar toh uthega but dabbe ke
bhar nhi jayega aur abb wo sarre value uss dabbe ke
respect mai lega naa ki screen ke respect mai phele wo
screen ke respect mai lee rha tha but abb wo dabbe ke
respect mai lega
like isko humane
relative banaya hai toh jo bhi left 10% hai wo box ke
respect mai hai screen ke respect main hi haii
Position: fixed – scroll karne pe wo pe bhi wo move nhi
karega uski positon fixed rahegi
Flexbox
so agar mai elemnt ko agal bagal rkhna chahta hun tb
mai flexbox ka istmal kaunga
Hume in teeno ko agal bagal lana hai prr……… hum flex
box inpe nhi lagayenge kyonki flex box laga hai jinko
agal bagal lana hai unke parents pe mtlb uss black wale
pe
SO flex box ka nature hai jispe flex box lagayenge uske
sarre children agal bagal aa jayenge
So flex box banate hi uske do axis access ho jate hai
Y- axis : cross;
X- axis : main from left to right mainly jaise element
rhke honge main axis ki direction vaise hi hogi
Isse use karte hi wo agal bagal aa jayenge
Main axis pe kam karne ke liye use hota hi JUSTIFY
CONTENT
Cross axis pe kam karne ke liye use hota hai aligned
items
ye main axis pe center pai aa gye
hai
Justify-content: space-between (element ke beech mai
space lee ayega)
Justify-content: space-around(element ke agal bagal
space lee aata hai)
Green and yellow ke beech space bhaout jyada dikh rhi
hai becoz use area main dono side se space mil rhi hai
Islye wo jyada ho gyi
Justify-content: space-evenly
isme space barabar batta hai
Justify-content: end(apne axis pe end pe phaucha dega
wo)
Pseudo element and classes(very very imp)
First line –
So jo bhi first line hogi uska color red ho jayega so ye
Dynamic hota hai toh hum zoom out karenge toh jo bhi
first line mai aayega uska color red ho jayega
Iske andar color , font-family ka use kar skte hai
FIRST LETTER
Is to handle first letter dynamicially
SELECTION
Iska aisa hai ki jisko mai select karta jau uska color
green kar dena
Jaise jaise mai select karta jaunga color green hota
jayega
PSEUDO CLASSES
hover------------
Hover ka mtlb hai jab mouse jaye
So jab mouse jaye toh color red kar dena
Active- ye click karne pe chalega
Focus- ye input lete samay kam atta hai like jab hum
form bharte hai toh nam waghera dalte hai toh uss
area pe click karte hi uska color grey se white ho jata
hai like that
Nth child
Ye nth child ko handle karne ke kam aat ahai]
So bhi paragraph tag ke present hai unme se teesre ko
handle karna hai toh iska use
Agar mai isme kn likhunga toh har kkt ko handle karega
Colors
This code will make 3 div
Like this
GRID
So grid help karta hai layout bannane keliye mtlb in
direction of row and column at a same time like
Bhai same kam toh flex box bhi karta tha na but wo ak
time sirf ak direction mai work karta tha
Ye ak sath dono direction mai work kar sakta hai
Agar hum ak ak box mai center karna chahte ya kam
karna chahte hai toh hum align-itmes , justify items ka
istmal karenge
And agar pre area maim ai tab align content and justify
content ka istmal karenge
Agar sherian ko beech mai nhi lana aur baki sabko
beech mai lana hai toh phele sabko beech mai le
aayege align items and justify items se then h1 ko alag
se target kar lenge then justify self ka istmal karenge
kyonki hum child mai baithe baithe child ko control
karna chahte hai tb
Hum grid mai individual element ke sath bhi ched chad
kar sakte hai like
Aise
Shortcut way to write this
