Scribd
Upload
45 views46 pages

RBD

Uploaded by

akmmbhakmmbh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views46 pages

RBD

Uploaded by

akmmbhakmmbh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

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

You might also like