CSS (Cascading Style Sheet)
CSS рдПрдХ language рд╣реИрдВ рдЬрд┐рд╕рд╕реЗ рд╣рдо рдХрд┐рд╕реА HTML Document рдХреЛ рдПрдХ рдЖрдХрд░реНрд╖рдХ рд░реВрдк рджреЗ рд╕рдХрддреЗ рд╣реИрдВред рдЬрд╣рд╛рдБ HTML рд╕реЗ рд╣рдо рдХрд┐рд╕реА рд╡реЗрдмрдкреЗрдЬ рдХреЛ рдЖрдХрд╛рд░ рджреЗрддреЗ рд╣реИрдВ, рд╡рд╣реАрдВ CSS рд╕реЗ рд╣рдо рдЙрд╕ рдкреЗрдЬ рдХреЛ рдПрдХ рдЖрдХрд░реНрд╖рдХ рд░реВрдк рджреЗрддреЗ рд╣реИрдВред HTML рдХреА рддрд░рд╣ CSS рдХреЛ рд▓рд┐рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рднреА рд╣рдореЗрдВ рдПрдХ text editor (рдЬреИрд╕реЗ notepad, рдпрд╛ notepad ++) рдХреА рдЬрд░реВрд░рдд рд╣реЛрддреА рд╣реИрдВ рдФрд░ рдкреЗрдЬ рдореЗрдВ рдЬреЛ рдмрджрд▓рд╛рд╡ рд╣реЛрддреЗ рд╣реИрдВ рд╡реЛ рдмреЗрдм рдмреНрд░рд╛рдЙрдЬрд░ рдкрд░ рджрд┐рдЦрддреЗ рд╣реИрдВред
CSS рдХреЗ рджреНрд╡рд╛рд░рд╛ рд╣рдо HTML Elements рдХреЛ рд╡рд┐рднрд┐рдиреНтАНрди Properties рджреЗ рд╕рдХрддреЗ рд╣реИрдВ рдЬрд┐рдирдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╣рдо рдЖрдЧреЗ рдЪрд░реНрдЪрд╛ рдХрд░реЗрдВрдЧреЗред
CSS рд▓рд┐рдЦрдиреЗ рдХреЗ рддреАрди рдЕрд▓рдЧ-рдЕрд▓рдЧ рддрд░реАрдХреЗ рд╣реИрдВ, рд╣рдо рдЗрдирдореЗрдВ рд╕реЗ рдХреЛрдИ рднреА рдПрдХ рддрд░реАрдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ тАУ
- Inline CSS.
- Internal CSS.
- External CSS.
1. Inline CSS
рдЬрдм рд╣рдо рдХрд┐рд╕реА HTML tag рдХреЗ рдЕрдВрджрд░ рд╣реА CSS рд▓рд┐рдЦрддреЗ рд╣реИрдВ рддреЛ рдЙрд╕реЗ Inline CSS рдмреЛрд▓рддреЗ рд╣реИрдВред рдЗрд╕ рддрд░реАрдХреЗ рдореЗрдВ CSS рдХреА Properties тАЬstyleтАЭ attribute рдХреЗ рдЕрдВрджрд░ рд▓рд┐рдЦреА рдЬрд╛рддреА рд╣реИрдВред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП
<div style = тАЬcolor:red;height:50px;width:50px;background-color:blue;тАЭ>Test</div>
рдКрдкрд░ рджрд┐рдП e.g. рдореЗрдВ рд╣рдордиреЗ div element рдХреА CSS рдЙрд╕рдХреЗ рдЕрдВрджрд░ рд╣реА рд▓рд┐рдЦреА рд╣реИрдВред рдЗрд╕ CSS рд╕реЗ рд╣рдореЗрдВ рдПрдХ рдмрд╛рдХреНтАНрд╕ рдорд┐рд▓реЗрдЧрд╛ рдЬрд┐рд╕рдХреА height рдФрд░ width рджреЛрдиреЛрдВ 50px рд╣реЛрдЧреАрдВ, background color blue рд╣реЛрдЧрд╛ рдФрд░ text рдХрд╛ color red рд╣реЛрдЧрд╛ред
2.Internal CSS
рдЗрд╕ рддрд░реАрдХреЗ рдореЗрдВ CSS рдХрд┐рд╕реА HTML рдкреЗрдЬ рдореЗрдВ рд╣реА рд▓рд┐рдЦрддреЗ рд╣реИрдВ рдЬрд┐рд╕рдХрд╛ effect рднреА рдХреЗрд╡рд▓ рдЙрд╕реА рдкреЗрдЬ рдкрд░ рдкрдбрд╝рддрд╛ рд╣реИрдВред рдЗрд╕ рддрд░реАрдХреЗ рдореЗрдВ CSS style tags рдХреЗ рдЕрдВрджрд░ рд▓рд┐рдЦрддреЗ рд╣реИрдВ рддрдерд╛ style tags head tags рдХреЗ рдЕрдВрджрд░ рд░рд╣рддреЗ рд╣реИрдВред
рдиреЛрдЯ :- рдпрд╣рд╛рдБ рд╣рдордиреЗ #box рдХрд╛ use рдХрд┐рдпрд╛ рд╣реИрдВред рд╣рдордиреЗ div рдХреЛ рдПрдХ id рджреА рд╣реИрдВ тАЬboxтАЭ, рдФрд░ рд╣рдо рдЙрд╕ div рдХреЛ рдЙрд╕рдХреА id рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рд╣реА Properties рджреЗ рд░рд╣реЗ рд╣реИрдВред рдЬрдм рд╣рдо рдХрд┐рд╕реА element рдХреЛ рдЙрд╕рдХреА id рдХреЗ рдЖрдзрд╛рд░ рдкрд░ Select рдХрд░рддреЗ рд╣реИрдВ рддреЛ id рдХреЗ рдкрд╣рд▓реЗ # рдХрд╛ use рдХрд░рддреЗ рд╣реИрдВред рдЗрд╕реЗ id selector рдмреЛрд▓рддреЗ рд╣реИрдВ (рдЬреИрд╕реЗ рдпрд╣рд╛рдБ #box)ред
рдЕрдЧрд░ рд╣рдореЗрдВ рджреЛ рдпрд╛ рджреЛ рд╕реЗ рдЬреНтАНрдпрд╛рджрд╛ elements рдкрд░ рдПрдХ рдЬреИрд╕реА Properties apply рдХрд░рдиреА рд╣реЛрдВ, рддреЛ рд╣рдо Class Selector рдХрд╛ use рдХрд░рддреЗ рд╣реИрдВред
For e.g.
<html>
<head>
<title></title>
<style>
.myboxes
{
color:red;
height:50px;
width:50px;
backgroundтАУcolor:blue;
}
</style>
</head>
<body>
<div class = тАЬmyboxesтАЭ>Test 1</div>
<div class = тАЬmyboxesтАЭ>Test 2</div>
</body>
</html>
рдпрд╣рд╛рдБ рд╣рдордиреЗ рджреЛрдиреЛрдВ рд╣реА div рдХреЛ рдПрдХ рдЬреИрд╕реА class рджреА рд╣реИрдВ рдФрд░ рдЙрдирдХреА class рдХреЗ рдЖрдзрд╛рд░ рдкрд░ CSS рд▓рд┐рдЦреА рд╣реИрдВред рдпрд╣ CSS рдЗрди рджреЛрдиреЛрдВ рдкрд░ apply рд╣реЛрдЧреАред рдЕрдЧрд░ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рджреЛ рд╕реЗ рдЬреНтАНрдпрд╛рджрд╛ div рд╣реИрдВ рдЬрд┐рди рд╕рднреА рдХреА class тАЬmyboxesтАЭ рд╣реИрдВ рддреЛ рдпрд╣ CSS рдЙрди рд╕рднреА рдкрд░ apply рд╣реЛрдЧреАред рдпрд╣рд╛рдБ рд╣рдордиреЗ element рдХреА class рдХреЗ рдкрд╣рд▓реЗ .(рдбреЙрдЯ) рд▓рдЧрд╛рдпрд╛ рд╣реИрдВред .myboxes рдХреЛ рд╣рдо class selector рдХрд╣реЗрдВрдЧреЗред
рд╣рдо рдХрд┐рд╕реА рдПрдХ element рдХреЛ рдЙрд╕рдХреЗ рдирд╛рдо рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рднреА CSS рджреЗ рд╕рдХрддреЗ рд╣реИрдВред
For e.g.
<html>
<head>
<style>
p{ color: red; }
</style>
<body>
<p> This is a test </p>
</body>
</html>
рдпрд╣рд╛рдБ рд╣рдордиреЗ p element рдХреЛ рдЙрд╕рдХреЗ рдирд╛рдо рдХреЗ рдЖрдзрд╛рд░ рдкрд░ select рдХрд░рдХреЗ CSS рджреА рд╣реИрдВред рдЗрд╕реЗ element selector рдХрд╣рддреЗ рд╣реИрдВред
External CSS
рдЗрд╕ рддрд░реАрдХреЗ рдореЗрдВ рд╣рдо рдПрдХ рдЕрд▓рдЧ CSS file рдмрдирд╛рддреЗ рд╣реИрдВред рдФрд░ рдЙрд╕реЗ html file рдореЗрдВ link рдХрд░рддреЗ рд╣реИрдВред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдЕрдЧрд░ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ basic.html рдирд╛рдо рдХреА рдлрд╛рдИрд▓ рд╣реИрдВ рдФрд░ рдЙрд╕рдХреА CSS рдХреА рдПрдХ рдЕрд▓рдЧ style.css рдирд╛рдо рдХреА рдлрд╛рдЗрд▓ рд╣реИрдВред
basic.html
<html>
<head>
<title></title>
<link rel =тАЬstylesheetтАЭ href =тАЬstyle.cssтАЭ type = тАЬtext/cssтАЭ>
</head>
<body>
<p>This is a test<p>
</body>
</html>
style.css
p{ color: red; }
рд╣рдордиреЗ рд╣рдорд╛рд░реА stylesheet рдХреЛ html рдкреЗрдЬ рдореЗрдВ link tag рдХреЗ рджреНрд╡рд╛рд░рд╛ include рдХрд┐рдпрд╛ рд╣реИрдВред
CSS рдХреА рдХреБрдЫ рдмреЗрд╕рд┐рдХ рдкреНрд░рд╛рдкрд░реНрдЯреАрдЬ
- height :- рдХрд┐рд╕реА element рдХреЛ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рд╣рд╛рдИрдЯ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкреНрд░рд╛рдкрд░реНрдЯреА use рдХрд░рддреЗ рд╣реИрдВред
- width :- рдХрд┐рд╕реА element рдХреЛ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд width (рдЪреМрдбрд╝рд╛рдИ) рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕ рдкреНрд░рд╛рдкрд░реНрдЯреА рдХреЛ use рдХрд░рддреЗ рд╣реИрдВред
- color :- рдХрд┐рд╕реА element рдХреЗ text рдХреЛ color рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкреНрд░рд╛рдкрд░реНрдЯреА use рдХрд░рддреЗ рд╣реИрдВред
- background-color :- рдХрд┐рд╕реА element рдХреЗ background рдХрд╛ color change рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкреНрд░рд╛рдкрд░реНрдЯреА use рдХрд░рддреЗ рд╣реИрдВред
- border :- рдХрд┐рд╕реА element рдХреА рдмрд╛рд░реНрдбрд░ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ use рдХрд░рддреЗ рд╣реИрдВред
- рдЗрд╕рдореЗрдВ рд╣рдо рддреАрди рдЪреАрдЬреЗ define рдХрд░рддреЗ рд╣реИрдВред рдмрд╛рд░реНрдбрд░ рдХреА рдореЛрдЯрд╛рдИ, рдЙрд╕рдХреА рд╕реНтАНрдЯрд╛рдЗрд▓ рдФрд░ рдЙрд╕рдХрд╛ рд░рдВрдЧред
For e.g. рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдПрдХ div рд╣реИрдВ рдЬрд┐рдирдХреА id тАЬmyboxтАЭ рд╣реИрдВред рдЗрд╕рдореЗрдВ рд╣рдо рд╕рдордЭрддреЗ рд╣реИрдВ рдХрд┐ рдХрд┐рддрдиреЗ рддрд░реАрдХреЗ рд╕реЗ рд╣рдо рдмрд╛рд░реНрдбрд░ рджреЗ рд╕рдХрддреЗ рд╣реИрдВред
<div id = тАЬmyboxтАЭ>This is a test</div>
рдЗрд╕ div рдкрд░ рд╣рдо internal CSS apply рдХрд░ рд░рд╣реЗ рд╣реИрдВред
<style>
#mybox
{
border: 1px solid black;
}
</style>
рдЗрд╕ caseрдореЗрдВ 1px border рдХреА рдореЛрдЯрд╛рдИ рд╣реЛрдЧреА, solid рдЙрд╕рдХреА рд╕реНтАНрдЯрд╛рдЗрд▓ рд╣реЛрдЧрд╛ рдФрд░ рд░рдВрдЧ black рд╣реЛрдЧрд╛ред рд╣рдо рдмрд╛рд░реНрдбрд░ рдХреА рдореЛрдЯрд╛рдИ рдХреЛ pixels (px) рдХреЗ рджреНрд╡рд╛рд░рд╛ рдмрдврд╝рд╛ рдпрд╛ рдШрдЯрд╛ рд╕рдХрддреЗ рд╣реИрдВред рдЬреИрд╕реЗ 1px, 5px, 2px, 10px, etc. рдФрд░ рдмрд╛рд░реНрдбрд░ рдХреА рд╕реНтАНрдЯрд╛рдИрд▓ рд╡ рд░рдВрдЧ рднреА рд╡рд┐рднрд┐рдиреНтАНрди рджреЗ рд╕рдХрддреЗ рд╣реИрдВред рдЬреИрд╕реЗ тАУ
2px solid blue;
5px dotted red;
4px dotted green;
10px double gray;
тАЬborderтАЭ property рд╕реЗ рд╣рдо рдПрдХ рдмрд╛рд░ рдореЗрдВ рдмрд╛рд░реНрдбрд░ рдХреА рдореЛрдЯрд╛рдИ, рд╕реНтАНрдЯрд╛рдИрд▓ рд╡ рд░рдВрдЧ рджреЗ рд╕рдХрддреЗ рд╣реИрдВред рдкрд░рдиреНтАНрддреБ рдпрджрд┐ рд╣рдо рдЪрд╛рд╣реЗрдВ рддреЛ рдмрд╛рд░реНрдбрд░ рдХреА рдЕрд▓рдЧ-рдЕрд▓рдЧ рдкреНрд░рд╛рдкрд░реНрдЯреА рднреА рджреЗ рд╕рдХрддреЗ рд╣реИрдВ тАУ
- borderтАУwidth:тАУ рдмрд╛рд░реНрдбрд░ рдХреА рдореЛрдЯрд╛рдИ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдПред
- borderтАУstyle:тАУ рдмрд╛рд░реНрдбрд░ рдХреА рд╕реНтАНрдЯрд╛рдЗрд▓ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдПред
- borderтАУcolor:тАУ рдмрд╛рд░реНрдбрд░ рдХрд╛ рд░рдВрдЧ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдПред
For e.g.
#mybox
{
border -width : 2px;
borderтАУstyle : solid;
borderтАУcolor : red;
}
рд╣рдо рдХрд┐рд╕реА element рдХреЛ рдЪрд╛рд░реЛрдВ рддрд░рдл рдЕрд▓рдЧ-рдЕрд▓рдЧ border рднреА рджреЗ рд╕рдХрддреЗ рд╣реИрдВред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рдпрджрд┐ рд╣рдореЗрдВ рд╣рдорд╛рд░реА div рдХреЛ рд╕рд┐рд░реНрдл top border рджреЗрдиреЛ рд╣реЛ рддреЛ рд╣рдо рд▓рд┐рдЦреЗрдВрдЧреЗред
#mybox
{
borderтАУtop : 2px solid black;
}
рд╣рдо рдЪрд╛рд░реЛ рддрд░рдл рдЕрд▓рдЧ-рдЕрд▓рдЧ рдмрд╛рд░реНрдбрд░ рднреА рджреЗ рд╕рдХрддреЗ рд╣реИрдВред
For e.g.
#mybox
{
border-top: 1px solid red;
border-left: 2px dotted green;
border-bottom: 2px double blue;
border-right: 4px solid black;
}
6. margin:- рдЗрд╕ property рдХрд╛ рдЙрдкрдпреЛрдЧ elements рдХреЗ рдЪрд╛рд░реЛрдВ рддрд░рдл space create рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣реЛрддрд╛ рд╣реИрдВред
рдХрд┐рд╕реА рднреА element рдХреА margin adjust рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд┐рднрд┐рдиреНтАНрди рдкреНрд░рд╛рдкрдЯреНрд░реАрдЬ рд╣реЛрддреА рд╣реИрдВред
- marginтАУtop
- marginтАУright
- marginтАУbottom
- marginтАУleft
margin рдкреНрд░рд╛рдкрдЯреНрд░реАрдЬ рдХреА рдирд┐рдореНтАНрди рд╡реИрд▓реНтАНрдпреВрдЬ рд╣реЛ рд╕рдХрддреА рд╣реИрдВ тАУ
- auto:- рдпрджрд┐ рд╣рдо рдХрд┐рд╕реА element рдХреА margin auto рджреЗрддреЗ рд╣реИрдВ рддреЛ рд╡рд╣ margin рдмреНрд░рд╛рдКрдЬрд░ рдХреИрд▓реНтАНрдХреБрд▓реЗрдЯ рдХрд░рддрд╛ рд╣реИрдВред
- length:- рдХрд┐рд╕реА element рдХреА margin, px, pt, рдпрд╛ cm рдХреЗ form рдореЗрдВ рднреА рджреЗ рд╕рдХрддреЗ рд╣реИрдВред
- %:- рдХрд┐рд╕реА element рдХреА margin % form рдореЗрдВ рднреА рджреЗ рд╕рдХрддреЗ рдЬреЛ рдХрд┐ рдЙрд╕ element рдХреЗ parent element рдХреА height/width рдХреЗ рд╣рд┐рд╕рд╛рдм рд╕реЗ рдХреИрд▓реНтАНрдХреБрд▓реЗрдЯ рд╣реЛрддреА рд╣реИрдВред
- Inherit:- рдЗрд╕рдХреЗ рджреНрд╡рд╛рд░рд╛ рдХреЛрдИ element рдЕрдкрдиреЗ parent element рдХреА margin рд╕реНтАНрд╡рдВрдп рдкрд░ apply рдХрд░ рд╕рдХрддрд╛ рд╣реИрдВред
рдирд┐рдореНтАНрдирд▓рд┐рдЦрд┐рдд рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рд╣рдо рдПрдХ <div> element рдХреЗ рдЪрд╛рд░реЛрдВ рддрд░рдл рдХреА margin рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╕реЗрдЯ рдХрд░ рд░рд╣реЗ рд╣реИрдВ тАУ
div{
marginтАУtop: 100px;
marginтАУbottom: 100px;
marginтАУright: 150px;
marginтАУleft: 80px;
}
marginтАУshort hand property :
рд╣рдо рдХрд┐рд╕реА element рдХреА рдЪрд╛рд░реЛрдВ рддрд░рдл рдХреА margin рдПрдХ рд╣реА рдкреНрд░реЙрдкрд░реНрдЯреА рд╕реЗ рднреА рджреЗ рд╕рдХрддреЗ рд╣реИрдВред top, bottom, left, right рдХреЗ рд▓рд┐рдП рдЕрд▓рдЧ-рдЕрд▓рдЧ margin рдкреНрд░реЙрдкрд░реНрдЯреА рджреЗрдиреЗ рдХреА рдмрдЬрд╛рдП рд╣рдо рдПрдХ рд╕рд┐рдВрдЧрд▓ margin property рдореЗрдВ рдЪрд╛рд░реЛрдВ рддрд░рдл рдХреА margin рдХрд╛ рдЙрд▓реНтАНрд▓реЗрдЦ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рджреЗрдЦрддреЗ рд╣реИрдВ рдХреИрд╕реЗ тАУ
рдЕрдЧрд░ margin рдкреНрд░реЙрдкрд░реНрдЯреА рдореЗрдВ рдЪрд╛рд░ рд╡реИрд▓реНтАНрдпреВрдЬ рд╣реИрдВ –
margin: 20px 34px 50px 70px;
рддреЛ,
top margin 20px рд╣реЛрдЧреАред
right margin 34px рд╣реЛрдЧреАред
bottom margin 50px рд╣реЛрдЧреАред
left margin 70px рд╣реЛрдЧреАред
div{
margin: 20px 34px 50px 70px;
}
* рдЕрдЧрд░ margin рдкреНрд░рд╛рдкрд░реНрдЯреА рдореЗрдВ рддреАрди рд╡реИрд▓реНтАНрдпреВрдЬ рд╣реЛрдВ –
рдЬреИрд╕реЗрдВ, margin: 10px 15px 25px;
рддреЛ, top margin 10px рд╣реЛрдЧреА, right margin рдФрд░ left margin, рджреЛрдиреЛрдВ 15px рд╣реЛрдЧреА, bottom margin 25px рд╣реЛрдЧреАред
* рдЕрдЧрд░ margin рдкреНрд░рд╛рдкрд░реНрдЯреА рдореЗрдВ рджреЛ рд╡реИрд▓реНтАНрдпреВрдЬ рд╣реЛрдВ –
рдЬреИрд╕реЗ margin: 10px 20px;
рддреЛ,
top рдФрд░ bottom margin 10px рд╣реЛрдЧреАрдВ рдФрд░ left рдФрд░ right margin 20px рд╣реЛрдЧреАред
* рдЕрдЧрд░ margin рдкреНрд░рд╛рдкрд░реНрдЯреА рдореЗрдВ рдХреЗрд╡рд▓ рдПрдХ рд╡реИрд▓реНтАНрдпреВ рд╣реЛ,
рдЬреИрд╕реЗ margin: 45px;
рддреЛ, рдЪрд╛рд░реЛрдВ рддрд░рдл рдХреА margin 45px рд╣реЛрдЧреАред
* margin auto value:- рдХрд┐рд╕реА element рдХреЛ рдЙрд╕рдХреЗ container рдХреЗ рдЕрдВрджрд░ horizontally center рдореЗрдВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕ property рдХреЛ use рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИрдВред рдРрд╕рд╛ рдХрд░рдиреЗ рд╕реЗ element рдХреЛ рдЬреЛ width рдФрд░ height specify рдХреА рдЧрдИ рд╣реИ рд╡рд╣ рд╡реЛ occupy рдХрд░реЗрдЧрд╛ рдФрд░ рдмрдЪрд╛ рд╣реБрдЖ space left рдФрд░ right margins рдореЗрдВ equally distribute рд╣реЛ рдЬрд╛рдПрдЧрд╛ред
Padding:-
Padding рдХреЛ рд╣рдо рдХрд┐рд╕реА element рдХреЗ border рдХреЗ рдЕрдВрджрд░ рдХреЗ space рдХреЗ рд░реВрдк рдореЗрдВ define рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдзреНтАНрдпрд╛рди рд░рдЦрдиреЗ рд╡рд╛рд▓реА рдмрд╛рдд рд╣реИрдВ рдХрд┐ рд╣рд░ рдПрдХ html element рдХреА border рд╣реЛрддреА рд╣реИрдВ рдЬрд┐рд╕реЗ рд╣рдо рдЙрд╕рдХреА border property рдХреЗ рджреНрд╡рд╛рд░рд╛ show рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдХрд┐рд╕реА element рдХреА padding set рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП CSS рдХреА рдЪрд╛рд░ рдкреНрд░рд╛рдкрд░реНрдЯреАрдЬ рд╣реЛрддреА рд╣реИрдВ рдЬрд┐рдирд╕реЗ рдЖрдк рд╣рд░ рдПрдХ side рдХреА padding рд╕реНтАНрд╡рддрдВрддреНрд░ рд░реВрдк рд╕реЗ рджреЗ рд╕рдХрддреЗ рд╣реИрдВред рдпреЗ рдЪрд╛рд░ рдкреНрд░рд╛рдкрд░реНрдЯреАрдЬ рд╣реИрдВ тАУ
paddingтАУtop, paddingтАУright, paddingтАУbottom, paddingтАУleft.
рдпрджрд┐ рд╣рдо рдЪрд╛рд░реЛрдВ рддрд░рдл рдПрдХ рдЬреИрд╕реА padding рджреЗрдирд╛ рдЪрд╛рд╣рддреЗ рддреЛ рд╡реЛ рд╣рдо рдПрдХ рд╕рд┐рдВрдЧрд▓ property тАШpaddingтАЩ рд╕реЗ рджреЗ рд╕рдХрддреЗ рд╣реИрдВред
Padding рдХреА рд╡реИрд▓реНтАНрдпреВ pixels рдореЗрдВ define рдХреА рдЬрд╛рддреА рд╣реИрдВ рдФрд░ рд╣рдо padding рдХреА negative рд╡реИрд▓реНтАНрдпреВ рдирд╣реАрдВ рджреЗ рд╕рдХрддреЗред
* paddingтАУleft property :- рдпрд╣ рдкреНрд░рд╛рдкрд░реНрдЯреА рдХрд┐рд╕реА element рдХреА left side рдХреА padding define рдХрд░рддреА рд╣реИрдВред
For e.g.
p{
paddingтАУleft : 25px;
}
рдЗрд╕ e.g. рдореЗрдВ p element рдХреЗ left side 25px рдХрд╛ extra space create рд╣реЛ рдЬрд╛рдПрдЧрд╛ред
* paddingтАУright property :- рдпрд╣ property рдХрд┐рд╕реА element рдХреА right side рдХреА padding define рдХрд░рддреА рд╣реИрдВред
For e.g.
p{
padding-right: 20px;
}
рдЗрд╕ e.g. рдореЗрдВ p element рдХреЗ right side 20px рдХрд╛ extra space create рд╣реЛ рдЬрд╛рдПрдЧрд╛ред
рдиреЛрдЯ :- рдХрд┐рд╕реА рднреА padding property рдореЗрдВ рдЬреЛ space create рд╣реЛрддрд╛ рд╣реИрдВ рд╡рд╣ рдЙрд╕ element рдХреЗ border рдХреЗ рдЕрдВрджрд░ рд╣реА рд╣реЛрддрд╛ рд╣реИрдВред
* padding-top :- рдпрд╣ property рдХрд┐рд╕реА element рдХреЗ border рдХреЗ рдЕрдВрджрд░ рд╣реА рдКрдкрд░ рдХреА рддрд░рдл space create рдХрд░рддреА рд╣реИрдВред
For e.g.
p{
Padding-top: 50px;
}
рдЗрд╕ e.g. рдореЗрдВ p element рдХреЗ border рдХреЗ рдЕрдВрджрд░ рдКрдкрд░ рдХреА рддрд░рдл 50px рдХрд╛ extra space create рд╣реЛ рдЬрд╛рдПрдЧрд╛ред
* padding-bottom :- рдпрд╣ property рдХрд┐рд╕реА element рдХреЗ border рдХреЗ рдЕрдВрджрд░ рд╣реА рдиреАрдЪреЗ рдХреА рддрд░рдл space create рдХрд░рддреА рд╣реИрдВред
For e.g.
p{
padding-bottom: 40px;
}
рдЗрд╕ e.g. рдореЗрдВ p element рдХреЗ border рдХреЗ рдЕрдВрджрд░ рдиреАрдЪреЗ рдХреА рддрд░рдл 40px рдХрд╛ extra space create рд╣реЛ рдЬрд╛рдПрдЧрд╛ред
*тАШpaddingтАЩ-shorthand property :- рд╣рдо рдХрд┐рд╕реА element рдХреЗ рдЪрд╛рд░реЛрдВ рддрд░рдл рдХреА padding рдПрдХ рд╕рд┐рдВрдЧрд▓ property тАШpaddingтАЩ рд╕реЗ рднреА adjust рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред
рдЕрдЧрд░ padding рдХреА рдЪрд╛рд░ values рд╣реЛрдВ
div{
padding: 20px 25px 30px 35px;
}
рддреЛ тАУ
top-padding 20px рд╣реИрдВред
right-padding 25px рд╣реИрдВред
bottom-padding 30px рд╣реИрдВред
left-padding 35px;
* рдпрджрд┐ padding рдХреА рддреАрди value рд╣реЛрдВ –
div {
padding: 20px 30px 40px;
}
рддреЛ тАУ
top padding 20px рд╣реЛрдЧреАред
right рдФрд░ left paddings 30px рд╣реЛрдЧреАред
bottom padding 40px рд╣реЛрдЧреАред
* рдпрджрд┐ padding рдХреА рджреЛ values рд╣реЛрдВ –
div {
padding: 10px 20px;
}
рддреЛ,
top рдФрд░ bottom paddings 10px рд╣реЛрдЧреА
right рдФрд░ left paddings 20px рд╣реЛрдЧреАред
* рдпрджрд┐ padding рдХреА рдПрдХ value рд╣реЛ –
div{
padding:40px;
}
рддреЛ рдЪрд╛рд░реЛрдВ рддрд░рдл рдХреА padding 40px рд╣реЛрдЧреАред
*Height рдФрд░ Width:- рдХрд┐рд╕реА element рдХреА height рдФрд░ width set рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП тАШheightтАЩ рдФрд░ тАШwidthтАЩ properties рдХрд╛ use рдХрд░рддреЗ рд╣реИрдВред
height рдФрд░ width рдХреА value рд╣рдо px, cm, рдпрд╛ % рдореЗрдВ рджреЗ рд╕рдХрддреЗ рд╣реИрдВред
For e.g.
div{
height: 200px;
width: 50%;
}
рдКрдкрд░ рджрд┐рдП рдЧрдП рдЙрджрд╛рд╣рд░рдг рдореЗрдВ width:50% рдХрд╛ рдорддрд▓рдм рд╣реИрдВ div рдХреЗ parent element рдХреА width рдХрд╛ 50% рд╣реЛрдЧреА|