Introduction to CSS

CSS (Cascading Style Sheet)

CSS рдПрдХ language рд╣реИрдВ рдЬрд┐рд╕рд╕реЗ рд╣рдо рдХрд┐рд╕реА HTML Document рдХреЛ рдПрдХ рдЖрдХрд░реНрд╖рдХ рд░реВрдк рджреЗ рд╕рдХрддреЗ рд╣реИрдВред рдЬрд╣рд╛рдБ HTML рд╕реЗ рд╣рдо рдХрд┐рд╕реА рд╡реЗрдмрдкреЗрдЬ рдХреЛ рдЖрдХрд╛рд░ рджреЗрддреЗ рд╣реИрдВ, рд╡рд╣реАрдВ CSS рд╕реЗ рд╣рдо рдЙрд╕ рдкреЗрдЬ рдХреЛ рдПрдХ рдЖрдХрд░реНрд╖рдХ рд░реВрдк рджреЗрддреЗ рд╣реИрдВред HTML рдХреА рддрд░рд╣ CSS рдХреЛ рд▓рд┐рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рднреА рд╣рдореЗрдВ рдПрдХ text editor (рдЬреИрд╕реЗ notepad, рдпрд╛ notepad ++) рдХреА рдЬрд░реВрд░рдд рд╣реЛрддреА рд╣реИрдВ рдФрд░ рдкреЗрдЬ рдореЗрдВ рдЬреЛ рдмрджрд▓рд╛рд╡ рд╣реЛрддреЗ рд╣реИрдВ рд╡реЛ рдмреЗрдм рдмреНрд░рд╛рдЙрдЬрд░ рдкрд░ рджрд┐рдЦрддреЗ рд╣реИрдВред

CSS рдХреЗ рджреНрд╡рд╛рд░рд╛ рд╣рдо HTML Elements рдХреЛ рд╡рд┐рднрд┐рдиреНтАНрди Properties рджреЗ рд╕рдХрддреЗ рд╣реИрдВ рдЬрд┐рдирдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╣рдо рдЖрдЧреЗ рдЪрд░реНрдЪрд╛ рдХрд░реЗрдВрдЧреЗред

CSS рд▓рд┐рдЦрдиреЗ рдХреЗ рддреАрди рдЕрд▓рдЧ-рдЕрд▓рдЧ рддрд░реАрдХреЗ рд╣реИрдВ, рд╣рдо рдЗрдирдореЗрдВ рд╕реЗ рдХреЛрдИ рднреА рдПрдХ рддрд░реАрдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ тАУ

  1. Inline CSS.
  2. Internal CSS.
  3. 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 рдХреА рдХреБрдЫ рдмреЗрд╕рд┐рдХ рдкреНрд░рд╛рдкрд░реНрдЯреАрдЬ

  1. height :- рдХрд┐рд╕реА element рдХреЛ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рд╣рд╛рдИрдЯ рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкреНрд░рд╛рдкрд░реНрдЯреА use рдХрд░рддреЗ рд╣реИрдВред
  2. width :- рдХрд┐рд╕реА element рдХреЛ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд width (рдЪреМрдбрд╝рд╛рдИ) рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕ рдкреНрд░рд╛рдкрд░реНрдЯреА рдХреЛ use рдХрд░рддреЗ рд╣реИрдВред
  3. color :- рдХрд┐рд╕реА element рдХреЗ text рдХреЛ color рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкреНрд░рд╛рдкрд░реНрдЯреА use рдХрд░рддреЗ рд╣реИрдВред
  4. background-color :- рдХрд┐рд╕реА element рдХреЗ background рдХрд╛ color change рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдкреНрд░рд╛рдкрд░реНрдЯреА use рдХрд░рддреЗ рд╣реИрдВред
  5. border :- рдХрд┐рд╕реА element рдХреА рдмрд╛рд░реНрдбрд░ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ use рдХрд░рддреЗ рд╣реИрдВред
  6. рдЗрд╕рдореЗрдВ рд╣рдо рддреАрди рдЪреАрдЬреЗ 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% рд╣реЛрдЧреА|


error: Content is protected !!