Shorthand Properties

Some value from css property can be filled with teks and number or mixture of both. With shothand properties, we can shorten the writting.
See this code:

selector { property: top right bottom left }

And this for example before shorthand properties:

<html>
<head>
   <title>Shorthand Properties</title>
   <style type="text/css">
       div {
           background-color: #CC9;
           border-top-width: 1px; 
	   border-right-width: 5px;
	   border-bottom-width: 5px;
	   border-left-width: 10px;
           
	   border-top-color: green;
	   border-right-color: yellow;
	   border-bottom-color: red;
	   border-left-color: blue;

           border-top-style: solid;
           border-right-style: solid;
           border-bottom-style: solid;
           border-left-style: solid;
       }
   </style>
</head>
<body>
<div>
   <h4>Shorthand Properties</h4>
   <p>This is shorthand properties using CSS. Very simple and very nice</p>
</div>
</body>
</html>


And now this is for After using shorthand properties:

<html>
<head>
   <title>Shorthand Properties</title>
   <style type="text/css">
       div {
           background-color: #CC9;
           border-width: 1px 5px 5px 10px;
	   border-color: green yellow red blue;
           border-style: solid;
       }
   </style>
</head>
<body>
<div>
   <h4>Shorthand Properties</h4>
   <p>This is shorthand properties using CSS. Very simple and very nice</p>
</div>
</body>
</html>

But if you have border with same value. You can use this code:

<html>
<head>
   <title>Shorthand Properties</title>
   <style type="text/css">
       div {
           background-color: #CC9;
           border: 3px green solid;
       }
   </style>
</head>
<body>
<div>
   <h4>Shorthand Properties</h4>
   <p>This is shorthand properties using CSS. Very simple and very nice</p>
</div>
</body>
</html>

And this another code using shorthand properties. Before shorthand properties:
[/sourcecode]
But if you have border with same value. You can use this code:

<html>
<head>
   <title>Shorthand Properties</title>
   <style type="text/css">
       p {
           font-style: bold;
           font-size: 12px;
           font-family: Arial, Verdana, sans-serif;
       }
   </style>
</head>
<body>
<div>
   <h4>Shorthand Properties</h4>
   <p>This is shorthand properties using CSS. Very simple and very nice</p>
</div>
</body>
</html>

After Shorthand Properties:

<html>
<head>
   <title>Shorthand Properties</title>
   <style type="text/css">
       p {
           font: bold 12px Arial, Verdana, sans-serif;
       }
   </style>
</head>
<body>
<div>
   <h4>Shorthand Properties</h4>
   <p>This is shorthand properties using CSS. Very simple and very nice</p>
</div>
</body>
</html>

4 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s