KD

CSS
code with harry
inline CSS <p style="color: aqua; background-color: blue;"></p>

Internal CSS
<style>
p{
color:purple;
background-color: bisque;
}
</style>
link: CSS enter hit (vscode)
External CSS
<link rel="stylesheet" href="tut13.css">
Make file in same folder of name tut13.css

In that file
p{
color:black;
background-color: aqua;
}
//here p is known as selector. Color is property and black is value.
inline CSS is given more preference than internal CSS.
internal aur external CSS me jiska code baad me likha hai wo priority pe hoga
agr sbse upper priority pe kisi ko rkhna hai to color: black !important; lagao sbse
first priority pe hoga.
Types of Basic CSS selectors.
CSS element selector, CSS id selector, CSS class selector, the CSS grouping
selector.
Css element selector
css id selector
id unique and class multiple.
ek element me multiple class ho skta aur ek class me multiple element aa skti. id
me ek element ki unique id hoti hai. id=identifier.
CSS ELEMENT SELECTOR
p{
color: black;
}
CSS ID SELECTOR
<style>
#redElement
{
color: purple;
}
</style>
<p id="red Element">my name is sonal.</p>
CSS CLASS SELECTOR

<style>
#redElement
{
color: purple;
}
.class{
}
</style>
<body>
<h3>This is CSS tutorial.</h3>
<p id="redElement">you have committed something to someone and its your
responsibility you must do that.</p>
<p class="class">you have committed something to someone and it's your
responsibility you must do that.</p>
</body>
class multiple
<style>
#redElement //redElement id hai so # se start krenge and class ke liye .
lgate hai
{
color: purple;
}
.class{
}
footer, span{
background-color: brown;
}
</style>
<span>this is span.</span>
<footer>This is footer</footer>
using chrome developer tool

go on website right click there and select inspect. In console there will be java
script. In sources we have all files. in network if any network request is coming,
we will see that.
web safe fonts

google se mil rha search kro google se google font copy kro link
vscode me type link: CSS href me wo link paste kro font change ho jayega.
p{
font-family: 'cursive', 'Franklin Gothic Medium', 'Arial Narrow',
Arial, sans-serif;
font-size: 33px; /* 1/96th of an inch */
line-height: 1.3em; /*parent ke size ke kitna gunaa hai ye em*/
font-weight: bold;
font-style: italic;
}
three ways of giving colour
1) color: purple; /*name*/
2) color: rgb(0, 255, 0); /*green colour*/
red green blue
3)color: #ffffff;
/*white colour hex colour*/
BORDER
#redElement
{
/* color: purple; */
height: 100px;
width: 855px;
border-width: 4px;
border-color: blue;
border-style: solid; /*isse border bn jayega solid by default black
colour hai agr border colour nhi diye hai to*/
border-radius: 30px; /*rounded border jitna jyada krenge utna hi round
hote jayega. */
}
SBKO ALG ALG NA LIKH KE SAME LINE ME LIKHNA HAI TO

border: 10px solid green;
border-width:10px; border-style: solid; border-color: blue;
background-repeat: no-repeat;
/* repeat-x and repeat-y will make it repeat in x and y axis */
background-position: center top;
background-position: 192px top; /*position on x and y axis.
y axis me ya to center likh skte ya phir left/right top bottom sift x wale me
likhenge background-position: center left;
background-image: url('sonal.jpeg'); that image should be in same folder. you can
copy image link form google to
.container{
border: 3px solid rebeccapurple;
padding-left: 790px; /* chaaro directions se padding hoga */
/* padding left means left se space chutega aur right me shift hoga content
*/
margin: 54px; /* from everydirection*/
}
we can set margin/padding for top,right,bottom,left like this
padding-left: 790px;
padding-right: 790px;
padding-top: 790px;
padding-bottom: 790px;
ALL TOGETHER YOU CAN DO THIS IN ONE WAY.

.container{
<style>
padding: 23px 56px 6px 78px; /* padding = top right bottom left; */same for margin
</style>
}
GO ON THE WEBSITE RIGHT CLICK TO INSPECT go on container put cursor on padding 23px
press up arrow key it will increase.
padding: 34px 19px;/* padding: y(top/bottom) x(left/right); if we want to give

some padding to top and bottom*/
jaise hi x ka padding change hoga then hm dekhenge width v change ho rha jbki width
to already de chuke hai change nhi hona chahiye.
aaisa na ho iske liye
box-sizing: border-box;
border box ke karan padding ke hisab se width adjust krega apne aap ko
actual jo width hota hai usme added hota hai margin. so agr width fix krke hmlog
margin ya padding badhaye tb v width change hoga.
widhth: 544px;
UNIVERSAL SELECTOR= KOI V CHIZ JO SARE ITEMS KE LIYE ADD KRNA HAI
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
vs code trick
1)#fruits.item press enter
div#fruits.item press enter
this will fruit as id and item as class for this div.
<div id="fruits" class="item">
</div>
2) p#fruits.mango press enter
this will give fruits as id and mango as class for this para.
3) .sonal press enter
<div class="sonal"></div>
4)select lines that you want to copy press shift alt and down arrow key. entire
lines will be copied.
margin:auto;
/* left aur right me barabar margin chorega so centre me aajayega top se nhi
chorega margin*/
5) shift + alt + down arrow we can select lines that we want to duplicate press
these buttons
ul>li*5 press enter(VS CODE TRICK)
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
6) div.container#cont1 press enter = <div class="container" id="cont1">

7) <button class="btn"></button> button.btn
8)div.box#id*4 press enter
<div class="box" id="id"></div>
class same naam ka ho skta id nhi so change id
<div class="box" id="id1"></div>
9)Put cursor on the line and press Alt+ up arrow key will use to move that line to
up and down
10)ctrl + forward slash(/)= comment out (vs code trick)

 HTML COMMENT OUT
/* footer, span */ CSS COMMENT OUT
(In style CTRL+/ (forward slash)= COMMENT OUT IN CSS
11)
setting pe click then click on command pallete
search view: toggle word wrap press enter horizontal bar will be removed.
12)<button class="btn">contact us</button> (vs code: button.btn) //add button

margin > border> padding (margin ke under border and border ke under padding hota
hai ie margin border ke bahar hoga.
float: left;
image left me jayega aur text uske right me wrap ho jayega.
clear: left;
koi aur image agr hai to uske left me nhi ja skte
<style>
img{
width: 200px;
float: right; //image will come on right side and text will be on
wrapped on to the left of image.
}
</style>
<body>
<link rel="stylesheet" href="foat.css">
<ul>
<li>Home</li>
<li>About us</li>
<li>Team</li>
<li>contact us</li>
<li>Donate</li>
</ul>
ul{
list-style-type: none; //bullet point will be removed.
}
li{
color: white;
padding: 10px 15px;
float: left; // after writing this we will see our website will be black.
}
now if we will change color of li as black. we will see everything will come in a
row. but where is that green color? for this in ul we will have to give border: 1px
solid red;
and remove float from li. as we remove float we will see li will come out of
ul.containtr bexome sort.
to remove this problem we will go in ul(container) and will write overflow: auto;
sometimes it happens that when we insert image it will go out of the container;
container may be a paragraph, ul, div or anything then use overflow: auto; in that
cotainer in css style.
jb v hm float krte hai parent me se overflow ho jata hai content.
p{
border: 1px solid red;
overflow: auto;
}
img{
float: right;
width: 100px;
}
clear: right; //kisi floated element ke right me nhi rh skte.
can be used in floated as well as non-floated element.
clear: both; //its means na ho left me rhega na right me.
<body>
<a href="" class="btn">Read more </a>
</body> link lgayega

KD

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

KD

Uploaded by

Copyright:

Available Formats

CSS

code with harry

inline CSS <p style="color: aqua; background-color: blue;"></p>

Make file in same folder of name tut13.css

CSS CLASS SELECTOR

using chrome developer tool

web safe fonts

SBKO ALG ALG NA LIKH KE SAME LINE ME LIKHNA HAI TO

ALL TOGETHER YOU CAN DO THIS IN ONE WAY.

padding: 34px 19px;/* padding: y(top/bottom) x(left/right); if we want to give

6) div.container#cont1 press enter = <div class="container" id="cont1">

10)ctrl + forward slash(/)= comment out (vs code trick)

12)<button class="btn">contact us</button> (vs code: button.btn) //add button

You might also like