1. CSS Short-Hand Code:

When writing your CSS, you may want include many properties that could make your CSS code a bit messy. You can solve this problem by using CSS short-hand code to make your code neat and clean. The most common CSS properties that allow you to use short-hand code are font, margin, padding, background and border. The properties must be put into a specific order for your web browser to read them.

In the examples below you can see how much shorter and simpler your code can get:

Font:

#some-div{
font-family: Helvetica, Arial, Sans-Serif;
font-style: oblique; 
font-weight: bold; 
font-size: 16px; 
}

#some-div{
font: oblique bold 16px Helvetica, Arial, Sans-Serif;
}

Margin/Padding Properties:

This example also shows how to use the short-hand code for margin and the short-hand CSS for padding works the same, just replace margin with padding.

#some-div{
margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;
}

#some-div{
margin: 5px 10px 20px 15px;
}

If your top and bottom have the same margin and the left and right have the same margin you can use the code below. This also works the same for padding.

#some-div{
margin-top: 10px; margin-right: 30px; margin-bottom: 10px; margin-left: 30px;
}

#some-div{
margin: 10px 30px;
}

Background Property

#some-div{
background-color: #000;
background-image: url(image.jpg);
background-position: left top;
background-repeat: no-repeat;
}

#some-div{
background: #000 url(image.jpg) top left no-repeat;
}

Border Property

#some-div{
border-width: 2px; border-style: solid; border-color: #000;
}

#some-div{
border: 2px solid #000;
}

You can also use this short-hand CSS with border-top, border-right, border-left, and border-bottom.

#some-div{
border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;
}

#some-div{
border: 2px 5px 10px 3px;
}

2. Multiple classes together in one element

If you want to apply multiple classes to a certain element of your page, you can combine them as shown in the example below. All you need is to separate the classes with a space and voilá. Remember that CSS cascades so if you have the same properties in your second class as your first it will be overwritten by your second.

<div class="classOne classTwo">content here</div>

3. Underscore (_) and asterix (*) to hack multiple browsers

Sometimes coding for multiple browsers can be a pain as your styles can look different in each. A simple but effective solution is to add an asterix (for Internet Explorer 6 and below) or an underscore (for Internet Explorer 7 and above) in front of your property and that fixes your problems. In the example below we can have a margin-bottom property that will work differently for Firefox, Internet Explorer 6 and 7.

#some-div{
margin-top: 25px; *margin-top: 20px; _margin-top: 35px;
}

Firefox will give the element above a top margin of 25px while Internet Explorer 6 will give a 20px margin and Internet Explorer 7 a 35px margin. Pretty cool, huh?

Thanks for ready and please leave some feedback!

I’m happy to announce that the new and improved version of my website is live! The new site features a new design and social media tools for interactivity. Check it out and leave me some feedback!

In today’s age of high-speed internet, the last thing that users want to do is to wait for a website to load even if it is for a few seconds. One of the “musts” for today’s web design is to create a website that loads quickly enough so users don’t leave your site before the whole page is displayed.

To minimize this problem, many sites are designed to preload images in order to speed up page display. JavaScript is the most common way to preload images but it is not the only option available. An alternative to JavaScript is to use the CSS display: none; property. This technique may be more reliable and it requires less complex code. Easy!

Preloading images using JavaScript is a good technique, however, browsers must be JavaScript-enabled and have JavaScript turned on. Without JavaScript, the images won’t preload.

CSS: Our Best Preloading Friend!

CSS offers us a simple and reliable option. By using display: none;, we tell the browser to request an image from the server, but not to display it on the page. The browser just requests the image from the server and caches it for future use.

Common Uses:

• Use in the home page to load images that will be used on the rest of the website
• Cache all the hover images in your site for menus, slide shows, etc.

The CSS Code:

This is a very simple technique. All we need to do is to place the img tags at the beginning, right under the opening body tag and insert CSS style directly within the img tag:

...

</head>

<body>

<!--preloaders-->
<img src="image_1.jpg" style="display:none;" alt=""/>
<img src="image_2.jpg" style="display:none;" alt=""/>
<img src="image_3.jpg" style="display:none;" alt=""/>
<!--end preloaders-->

...

• Very Important: The empty alt tag is important because screen readers will simply ignore the image. You MUST insert the empty alt tag otherwise your website will fail the W3C‘s accessibility standards!
• A good idea is to insert comments like in the example above just to separate and locate your rollover images

Summary:

That’s it for this technique! Very simple, almost no code and same results as JavaScript.