CSS Tips & Tricks

The power of CSS, besides giving the web designers more control over the web pages layout is also the separation between the page content and its presentation.

Linking your web pages to an external CSS file makes the HTML code cleaner, creates a more consistent look throughout your web site and updating your web pages layout much much easier: modify your CSS files then all your web pages follow the new CSS rules in a snap.

However when you want to use CSS to format your classified ads or other type of ads to be posted on somewhere else than your website, using an external CSS is not often possible.
In that case, inline CSS is the way to go.
For instance to create a dashed red border of 2 pixels width around your ad, you would write your flyer like this:

<div style=”padding-right: 5px; padding-left: 5px; padding-bottom: 5px; margin: 10px; width: 400px; padding-top: 5px; height: 150px; border: #ff0000 2px dashed;”>
The content of your ad would go here.
You can add in some pictures, links or anything else
just like in a regular web pages.
…………………
…………………
………………..</div>You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.

You just created CSS box of 400 pixels wide and 150 pixels height where your ad content is padded 5 pixels from the box edges. A 10 pixels margin is defined around the box as shown below.

Feel free to add in the font type, color and size to have more control over your ad’s text.
font-family: verdana, arial, helvetica, sans-serif; color: #00000; size:13px;
Your text color is now defined to be in black (six characters hexadecimal value: 000000) with a size of 13 pixels.

You should always give the web browser a choice of fonts at least 3.

That means if the end-user computer does not have Verdana, the browser will look for the second option which is Arial. If available then Helvetica or any other sans-serif font if any of the above is not installed in the user’s computer.

This entry was posted on Thursday, December 28th, 2006 at 2:22 pm and is filed under CSS Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.