What is css shorthand property?

Hi friends in this post I am sharing  about css shorthand property.Css shorthand property is used to minimize the code and it helps to load the webpage quickly.

 

 

 

 

css shorthand property

 

 

 

 

 

Let we see with examples.

HTML file without css shorthand property

  • Open notepad copy and paste the below code and save it as xyz.html

<style>
.xyz{
  width:250px;
  height:250px;
  background-color: #0066ff;
  margin-top : 50px;
  margin-right:50px;
  margin-bottom :50px;
  margin-left :50px;
}


</style>
<div>
<div class="xyz">
</div>
</div>

output without css shorthand property

 

HTML file with css shorthand property

  • Open notepad copy and paste the below code and save it as mno.html

<style>
.mno{
  width:250px;
  height:250px;
  background-color: #0066ff;
  margin: 50px 50px 50px 50px;
}

</style>
<div>
<div class="mno">
</div>
</div>

output with css shorthand property

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment