Cascading Style Sheets CSS का एक Style Sheets Format है जो कि World Wide Web Consortium (W3C) के द्वारा Approved है. CSS3 आसान Syntax का प्रयोग करते हुए HTML Documents के साथ काम करता है.
CSS3 (Version 3.0) Development मे जारी रहता है और इसमे बेहतर Highlights शामिल होते है जैसे Vertical Text, Extensive Backgrounds और Borders, Speech Recognition और User Interaction आदि.
ज़्यादातर Web Browsers CSS3 को Support करते है क्योंकि यह अधिक लोकप्रिय होता है और अधिक Web Designers CSS3 मे Layout Design के उपयोग को लागू करते है.
Style Sheets का Development Markup Language को अधिक प्रभावशाली बनाने के लिए किया गया था. यह SGML की शुरुआत मे 1980 के दशक के आसपास मे Discovered की गई थी.
CSS का तीसरा स्तर 1998 के आसपास Developed करने के लिए शुरू किया गया था और 2009 तक यह Development के अधीन था.
CSS3 का पहला कार्य Draft 19-01-2001 मे आया था और जब से पहले परिचय अभी भी यह Under Construction है.
CSS2 मे कुछ निश्चित कमियां थीं और Developer ने इसकी Stupidity की वजह से CSS3 को Developed किया था.
CSS3 को इसकी विशिष्टताओं के अनुसार इसे अलग-अलग Modules मे Divided किया गया है.
CSS3 का पहला कार्य Draft 19-01-2001 को आया था लेकिन शुरुआत में इसे जून 1999 मे Declared किया गया था.
CSS3 CSS 2.1 का एक Extension है जो कि Strong New Functionality को जोड़ता है लेकिन यह अब एक ही Specification नहीं है. इसके बजाय इसे कई Modules मे विभाजित किया गया है.
प्रत्येक Modules CSS की उपधारा के लिए एक Standalone Specification है जैसे कि Selectors, Text, और Background.
हर एक Modules के अपने स्वयं के Authors और स्वयं का Time Table होता है.
इस का फायदा यह है कि पूरे CSS3 के Specification को एक छोटे से काम करने के लिए इंतजार नहीं करना पड़ता है और उस Module मे जो थोड़ी सी मे है जबकि प्रतीक्षा आगे बढ़ सकती है.
CSS3 आपको नई सुविधाओं प्रदान करता है.
CSS3 मे CSS2 का बहुत बड़ा सहयोग है. हम इस सहयोग को Modules भी कह सकते हैं. CSS3 में कुछ Modules बहुत महत्वपूर्ण होते है.
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
CSS3 मे Border Radius Property का उपयोग Rounded Corner को बनाने के लिए किया जा सकता है. यह Property Outer Border Corner के Shape को आमतौर पर Define करती है.
CSS3 से पहले कटा हुआ images का उपयोग Rounded Corners को बनाने के लिए किया जाता है जो कि Troublesome था.
लेकिन अब आप CSS3 मे Border Radius का उपयोग कर के किसी भी Element का "rounded corners" दे सकते है.
#rcorners3 {
border-radius: 60px/15px;
background: #000;
padding: 20px;
width: 200px;
height: 150px;
}
| Values | Description |
|---|---|
| border-radius | Boarder Radius Property की स्थापना के लिए इस Element का उपयोग करते है. |
| border-top-left-radius | Top Left Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
| border-top-right-radius | Top Right Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
| border-bottom-right-radius | Bottom Right Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
| border-bottom-left-radius | Bottom Left Corner के Border को निर्धारित करने के लिए इस Element का उपयोग करते है. |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Rounded Corners</title>
<style type="text/css">
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #d61515;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #d61515;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #d61515;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
</html>
CSS3 मे Border Image Property का उपयोग कुछ Elements मे Image Border को जोड़ने के लिए किया जाता है. आपको Border Images को Call करने के लिए किसी भी HTML Code का उपयोग करने की आवश्यकता नही होती है.
#borderimg {
border: 10px solid transparent;
padding: 15px;
}
| Values | Description |
|---|---|
| border-image-source | Border Image Source का उपयोग Image Path को Set करने के लिये किया जाता है. |
| border-image-slice | Border Image Slice का उपयोग Border Image को Slice करने के लिये किया जाता है. |
| border-image-width | Border Image Width का उपयोग Border Image की Width को Set करने के लिये किया जाता है. |
| border-image-repeat | Border Image Repeat को Border Image को Rounded, Repeated और Stretched के रूप मे Set करने के लिए उपयोग किया जाता है. |
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS3 Border Images</title>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 13px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 23px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 33px;
}
</style>
</head>
<body>
<p id="borderimg1">image boarder example</p>
<p id="borderimg2">image boarder example</p>
<p id="borderimg3">image boarder example</p>
</body>
</html>
CSS3 मे Multi Background Property का उपयोग एक या एक से अधिक Image को HTML Code के बिना एक Time मे जोड़ने के लिए किया जाता है. इसमे हम अपनी आवश्यकता के अनुसार Image को जोड़ सकते है.
#multibackground {
background-image: url(images/logo.png), url(images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 85px;
}
| Values | Description |
|---|---|
| background | इसका उपयोग एक Section में सभी Background Image Properties को Set करने के लिए किया जाता है. |
| background-clip | इसका उपयोग Background के Painting Area को Declared करने के लिए किया जाता है. |
| background-image | इसका उपयोग Background Image को Specify करने के लिए किया जाता है. |
| background-origin | इसका उपयोग Background Image की Position को Specify करने के लिए किया जाता है. |
| background-size | इसका उपयोग Background Image के Size को Specify करने के लिए किया जाता है. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of Multi Background Images</title>
<style>
#multibackground {
background-image: url(images/logo.png), url(images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id="multibackground">
<h1>www.tutorialsroot.com</h1>
<p>Lorem Ipsum is simply dummy text the printing and typesetting.
Lorem Ipsum has been the industry's standard dummy text ever since the
when an unknown printer took a galley of type and scrambled it
to make a type specimen book.</p>
</div>
</body>
</html>
CSS3 मे Gradients आपको दो या अधिक Colors के बीच Smooth Transition को Specified करने देते है.
CSS3 दो प्रकार के Gradients को परिभाषित करता है
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Linear Gradients का उपयोग दो या अधिक Colors को Linear Formats मे से ऊपर से नीचे तक करने के लिए किया जाता है.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#grads1 {
height: 200px;
background: -webkit-linear-gradient(red,green);
background: -o-linear-gradient(red,green);
background: -moz-linear-gradient(red,green);
background: linear-gradient(red,green);
}
</style>
</head>
<body>
<div id="grads1"></div>
</body>
</html>
Radial Gradients की Position उस Point पर है जहां Radial प्रारंभ होता है यानी Ellipse या Circle का Center होता है.
<!DOCTYPE html>
<html>
<head>
<style>
#grads1 {
height: 280px;
width: 600px;
background: Yellow;
background: -webkit-radial-gradient(red, blue, green);
background: -o-radial-gradient(red, blue, green);
background: -moz-radial-gradient(red, blue, green);
background: radial-gradient(red, blue, green);
}
</style>
</head>
<body>
<div id="grads1"></div>
</body>
</html>
Text Shadow आपको इसके पीछे मौजूदा Text पर Shadow डालने की अनुमति देती है. लेकिन Background के Top पर इसको Simple Elegant Shadowing Effect के रूप मे उपयोग करना आसान होता है.
हालांकि यह सबसे उपयोगी है जब एक Background Image पर Text डालते है तो जिसमें बहुत यह अधिक विपरीत हो सकती है. और Text Background के खिलाफ आसानी से दिखाई नही दे सकता है.
Text Shadow जोड़ने से आपको Text के चारों ओर एक रूपरेखा मिलती है जिससे कि यह Image के साथ मिश्रण हो लेकिन यह अधिक Visible होता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Text shadow</title>
<style>
h1 {
text-shadow: 2px 2px #FF0000;
}
h2 {
text-shadow: 2px 2px yellow;
}
h3 {
text-shadow: 2px 2px 5px blue;
}
h4 {
color: white;
text-shadow: 2px 2px 4px green;
}
h5 {
text-shadow: 0 0 3px red;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
</style>
</head>
<body>
<h1>Tutorialsroot.com</h1>
<h2>Tutorialsroot.com</h2>
<h3>Tutorialsroot.com</h3>
<h4>Tutorialsroot.com</h4>
<h5>Tutorialsroot.com</h5>
<h6>Tutorialsroot.com</h6>
</body>
</html>
Box Shadow CSS3 मे एक बहुत शक्तिशाली Property है. CSS3 मे Box Shadow Properties आपको एक या एक से अधिक Inner और Outer Drop Shadows बनाने की अनुमति देता है.
Box Shadow Property के लिए आपको Horizontal और Vertical Offsets को Set करने की आवश्यकता होती है और फिर आप वैकल्पिक Blur और Color Set कर सकते है. और आप शुरू मे Default और साथ ही Inset Shadows को बना सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Example of Box Shadow</title>
<style>
div {
width: 400px;
height: 200px;
padding: 40px;
background-color: #FF0000;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>
Web Fonts Web Designer को Fonts का उपयोग करने की अनुमति देता है जो Users के Computer पर Installed नही होती है. जब आप Font का उपयोग करना चाहते है तो बस अपने Web Server पर Font File शामिल करे और आवश्यक होने पर यह स्वचालित रूप से उपयोगकर्ता को Download कर दिया जाएगा.
<!DOCTYPE html>
<html>
<head>
<title>Example of Web Font</title>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>This is the example of font face with CSS3</div>
</body>
</html>
| Values | Description |
|---|---|
| font-family | Font Family का उपयोग Font के Name को Define करने के लिए किया जाता है. |
| src | Src का उपयोग URL को Define करने के लिए किया जाता है. |
| font-stretch | Font Stretch का उपयोग Find के लिए प्रयुक्त कैसे Font को फैलाया जाना चाहिए के लिए किया जाता है. |
| font-style | Font style का उपयोग Font के Style को Define करने के लिए किया जाता है. |
| font-weight | Font Weight का उपयोग Font के Weight को Define करने के लिए उपयोग किया जाता है. |
CSS3 Transforms आपको Elements को Translate, Rotate, Scale, Skew करने की अनुमति देता है. Transformation एक Effect है जो एक Element को Shape, Size, Position को Change कर देता है.
translate()
rotate()
scale()
skewX()
matrix()
Translate() Method का उपयोग आप उसके Parameter के आधार पर किसी Object को Move करने के लिए करते है. आप इस Method मे दो प्रकार के Parameter को Pass कर सकते है जो की एक Left (x-axis) से है और दूसरा Top (y-axis) से होता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of translate() Method</title>
<style>
div {
float:left;
width:200px;
height:200px;
background-color: blue;
border:1px solid #A00000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_translate {
position:absolute;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:translate(40px,40px);
-ms-transform:translate(40px,40px);
-moz-transform:translate(40px,40px);
-webkit-transform:translate(40px,40px);
-o-transform:translate(40px,40px);
}
</style>
</head>
<body>
<div>
<p>tutorialsroot</p>
</div>
<div id="div_translate">to make a type specimen book.</div>
</body>
</html>
Rotate() Method का उपयोग उसकी Value के आधार पर किसी Object को Rotate करने के लिये किया जाता है. इस Method मे आप दो प्रकार की Values को Pass कर सकते है एक तो Positive Clockwise Rotation के लिए और दुसरी एक Negative Counter Clockwise Rotation के लिए है.
<!DOCTYPE html>
<html>
<head>
<title>Example of rotate() Method</title>
<style>
#div_norotate {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #1a22de;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotate {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(148, 255, 0, 0.5);
border:1px solid #1a22de;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="div_norotate">Tutorialsroot Original</div>
<div id="div_rotate">After Rotate Method Tutorialsroot</div>
</body>
</html>
Scale() Method का उपयोग उसकी Value के आधार पर Object Size को बढ़ाने या घटाने के लिए किया जाता है. इस Method से आप दो प्रकार की Values को Parameter मे पास कर सकते है जो कि एक तो width (x-axis) के लिए है और दुसरी height (y-axis) के लिए है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Scale() Method</title>
<style>
#div_noscale {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(0, 255, 111, 0.5));
border:1px solid #e21212;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_scale {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(0, 255, 111, 0.5);
border:1px solid #e21212;
transform:scale(2,2);
-ms-transform:scale(2,2);
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
}
</style>
</head>
<body>
<div id="div_noscale">Tutorialsroot Original</div>
<div id="div_scale">After Scale Method Tutorialsroot</div>
</body>
</html>
Skew() Method का उपयोग Parameter मे Pass Value के आधार पर किसी Object के Angle को बदलने के लिए किया जाता है. Parameter मे दो प्रकार की Value हो सकती है एक horizontal (x-axis) के लिए है और दुसरी vertical (y-axis) के लिए है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Skew() Method</title>
<style>
#div_noskew {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_skew {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:skew(15deg,20deg);
-ms-transform:skew(15deg,20deg);
-moz-transform:skew(15deg,20deg);
-webkit-transform:skew(15deg,20deg);
-o-transform:skew(15deg,20deg);
}
</style>
</head>
<body>
<div id="div_noskew">Tutorialsroot Original</div>
<div id="div_skew">After Scale Method Tutorialsroot</div>
</body>
</html>
Matrix() Method का उपयोग एक समय मे सभी Transformation को बदलने के लिए किया जाता है. ऐसे Parameter मे आप Six प्रकार की Value को Pass कर सकते हो.
<!DOCTYPE html>
<html>
<head>
<title>Example of Matrix() Method</title>
<style>
#div_nomatrix {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_matrix {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-ms-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-moz-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-webkit-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-o-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
}
</style>
</head>
<body>
<div id="div_nomatrix">Tutorialsroot Original</div>
<div id="div_matrix">After Scale Method Tutorialsroot</div>
</body>
</html>
एक Transforms CSS3 की ऐसी Property है जिसका उपयोग Element के वास्तविक स्वरूप को बदलने के लिए किया जाता है. CSS3 की इस सुविधा के साथ आप एक Element की Shape, Size position को बदल सकते है.
3D Transforms CSS3 Transform का ऐसा है Amazing Feature जिसका उपयोग निम्नलिखित Methods के लिए किया जाता है.
3D Transforms के उपयोग से आप Element को x-axis, y-axis and z-axis, कर सकते है.
RotateX() Method का उपयोग किसी Object को x-axis अक्षांश पर दी गई Degree पर घुमाने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of X-axis 3D transforms</title>
<style>
#div_norotate {
float:left;
width:200px;
height:200px;
background-color:rgba(107, 214, 158, 0.5);
border:1px solid #2917cc;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotatex {
position:absolute;
width:200px;
height:200px;
background-color:rgba(37, 117, 79, 0.5);
border:1px solid #2917cc;
transform:rotateX(140deg);
-webkit-transform:rotateX(140deg);
-moz-transform:rotateX(140deg);
}
</style>
</head>
<body>
<div id="div_norotate">tutorialsroot</div>
<div id="div_rotatex">After rotateX method tutorialsroot</div>
</body>
</html>
RotateY() Method का उपयोग Object को Desired Degree पर Y-axis के ऊपर घुमाने के लिए किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Y-axis 3D transforms</title>
<style>
#div_norotate {
float:left;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(107, 214, 158, 0.5);
border:2px solid #2917cc;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotateY {
position:absolute;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:rgba(37, 117, 79, 0.5);
border:2px solid #2917cc;
transform:rotateY(140deg);
-webkit-transform:rotateY(140deg);
-moz-transform:rotateY(140deg);
}
</style>
</head>
<body>
<div id="div_norotate">Tutorialsroot</div>
<div id="div_rotateY">After rotateX method tutorialsroot</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Example of Z-axis 3D transforms</title>
<style>
div {
width: 400px;
height: 200px;
background-color: #a7e2bc;
border: 1px solid pink;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
background-color: pink;
}
</style>
</head>
<body>
<div>tutorialsroot.com</div>
<div id="zDiv">
tutorialsroot.com
</div>
</body>
</html>
Animation CSS3 की एक ऐसी Property है जिसका उपयोग Flash या किसी और अन्य Animation Application के उपयोग के बिना Object को Animate करने के लिए किया जाता है. CSS3 के इस Feature के साथ आप Object को एक Style मे एक Animated तरीके से बदल सकते है.
यह धीरे-धीरे किसी Object Style को दूसरे Style में बदलता है और यह पूरा Animation CSS3 के साथ Keyframes Declared करने पर निर्भर करता है.
Animation Process मे परिवर्तन और Elements के साथ Speed बनाने की भी प्रक्रिया होती है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Moving Left Animation</title>
<style>
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials root</h1>
<p>This is an example of moving left animation</p>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Moving left animation with keyframes</title>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials root</h1>
<p>Animation left with an extra keyframe to make text changes.</p>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
Multiple Columns CSS3 का एक Advance Feature है जिसका उपयोग Newspaper Layout को बनाने के लिए किया जाता है.
आप अपने एक Articles मे एक से अधिक Columns बना सकते है भले ही वह एक Paragraph मे हो.
CSS3 मे Multiple Columns की तीन Properties है जो उचित Layout बनाने के लिए उपयोग की जाती है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Multi columns</title>
<style>
#multiple_columns {
text-align:justify;
column-count:3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule: 2px solid #6AAFCF;
-webkit-column-rule: 2px solid #6AAFCF;
-moz-column-rule: 2px solid #6AAFCF;
column-gap: 40px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
}
</style>
</head>
<body>
<div id="multiple_columns">
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
My Name is Ammu. I Live in Telangana. My Best Friend is Ali
</div>
</body>
</html>
Box Sizing CSS Property का उपयोग Default CSS Box Model को बदलने के लिए किया जाता है. जैसे Browser पर Browser द्वारा Element की Height और Width को परिवर्तन करने के लिए उपयोग किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Box Sizing</title>
<style>
.div1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
.div2 {
width: 200px;
height: 300px;
padding: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="div1">Tutorialsroot.com</div></br>
<div class="div2">Tutorialsroot.com</div>
</body>
</html>
| Value | Description |
|---|---|
| content-box | इसमे Width और Height Properties और न्यूनतम अधिकतम Properties मे केवल Content शामिल होते है Border, Padding, और Margin शामिल नहीं होते है . |
| border-box | इसमे Width और Height Properties और न्यूनतम अधिकतम Properties मे Content, Padding और Border शामिल होते है लेकिन Margin नहीं होते है. |
| initial | हम इस Properties को अपनी Default Value पर Set करते है. |
| inherit | हम इस Properties को इसके Parent Element से प्राप्त करते है. |
<!DOCTYPE html>
<html>
<head>
<title>Example of Box Sizing</title>
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 1em solid blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">My Name is Ammu</div>
<div class="box">My Best Friend is Ali</div>
<div style="clear:both;"></div>
</div>
</body>
</html>