Search This Blog

Loading...

Mar 22, 2013

CSS Shorthand: Font, Background, List Style and More

Not using shorthand CSS is I think the most common mistake that we do as a web developer. Shorthand for CSS properties like font, background, border and more are oftentimes ignored and not even know the syntax is. The advantage of shorthand CSS is to save lines of code and not to mention that you can easily update them. Here are some css shorthand samples:

FONT:

Syntax:
  
.body{
 font: font-style font-variant font-weight font-size/line-height font-family;
}
Sample:
  
.body{
 font: normal small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}

BORDER:

Syntax:
  
.myClass{
  border: border-width border-style border-color;
}
Sample:
  
.myClass{
  border: 1px solid #CCC;
}

BACKGROUND:

Syntax:
  
.body{
 background: background-url background-repeat background-attachment background-position background-color;
}
Sample:
  
.body{
 background: url('image/sample.png') no-repeat scroll 0 0 #FFF;
}

LIST-STYLE:

Syntax:
  
.mylist{
  list-style: list-style-type list-style-position list-style-image;
}
Sample:
  
.mylist{
  list-style: disc outside url('images/test.png');
}

1 comments:

Anonymous said...

This is very interesting, You're a very skilled blogger.
I have joined your feed and look forward to seeking more of
your excellent post. Also, I have shared your
website in my social networks!

Also visit my web page motorhomes