BLOGGER TEMPLATES - TWITTER BACKGROUNDS

Monday, October 13, 2008

Optimizing CSS : CSS Shorthand

FONT

Instead of writing

font-size: 1em;

line-height: 1.5em;

font-weight: bold;

font-style: italic;

font-family: serif

Write

font: 1em/1.5em bold italic serif

---------------------------------

BACKGROUND

Instead of writing

background-color: #fff;

background-image: url(image.gif);

background-repeat: no-repeat;

background-position: top left;

Write

background: #fff url(image.gif) no-repeat top left

---------------------------------

LIST

Instead of

list-style: #fff;

list-style-type: disc;

list-style-position: outside;

list-style-image: url(image.gif)

Write

list-style: disc outside url(image.gif)

---------------------------------

MARGIN AND PADDING

Instead of

margin-top: 2px;

margin-right: 1px;

margin-bottom: 3px;

margin-left: 4px

Write

margin: 2px 1px 3px 4px (top, right, bottom, left)

---------------------------------

BORDER

Instead of

border-width: 1px;

border-color: black;

border-style: solid

Write

border: 1px solid #000;

---------------------------------

CLASSES IN PARENT ELEMENTS

Instead of

Home

About

Contact

Sitemap

Write

<div class="myClass">

<p>Homep>

<p>Aboutp>

<p>Contactp>

<p>Sitemapp>

<div>

0 comments: