Five Great Tips For Designing CSS - World is Welcome To The World of Linux

Five Great Tips while designing CSS

While designing the CSS , keep in mind the following tips and these will be really helpful ….

Avoiding changing the default font size

Try to avoid specifying the body font size. Don’t do this, for example:

body {font-size: 24px;}

People have set their browser’s option to a text size that’s readable for them. We don’t know whether they’ve got a pixel resolution of 1680×1050 or 800×600 pixels. It makes a difference.

Making Sure Your Borders Show Up

p {border: 12px;}

In spite of this rule that according to above example, no border shows up around the paragraphs.

We’d logically think that by specifying a border size, we’d see a border. Not so. Unless we also specify a border style, we don’t get a border. The default style is none, so change it to include a style:

p {style: solid ;  border : 12px;}

Watching Out for Color Clash

What if we specify a text color, but fail to specify a background color? sounds harmless, but it can be a problem. Some users employ personal style sheets, including their favorite colors. What happens if a user specifies brown for their backgrounds and white for their text? Say that you specify brown for your text:

BODY {color: brown;}

The user won’t see your text at all because their background color and your foreground (text) color are identical. The solution? Always specify a background If we’re going to color the text. Then you have control over how the text looks against that background:

BODY {color: brown; background-color: yellow;}

Centering for Everyone

Centering elements on a Web page still isn’t quite solved. It’s a common

enough task — we want some things centered on the page, such as certain kinds of titles and headlines. But how to do it?

One method is to put an element inside a div, and then center the div

(this works in Netscape or Mozilla or Firefox and so on, but not in Internet Explorer). Setting a div’s margin to zero and auto, you effectively center it in all browsers except IE

To center something in IE, you can use text-align=center (which is

frowned upon by non-IE types):

The solution? Make everybody happy by wrapping a div with the 0px auto

inside another div with text-align set to center, like this:

<html>

<head>

<style>

</style>

</head>

<body>

<div style=”text-align:center;”>

<div style=”background-color: lightblue; width: 400px;

padding: 4px; margin: 0px auto;”>

<p>HERE I am...

</div></div>

</body>

</html>

Using Your Own Bullets in Lists

With CSS, designing custom bullets in a graphics program and then assigning

them to list items is easy. The following code produces the result shown in

<HTML>

<HEAD>

<style>

ul { list-style-image: url(“mybullet.jpg”); font: 32px; }

</style>

</HEAD>

<body>

<ul>

<li>first

<li>second

<li>third

</ul>

</body>

</html>

Good Luck !!!!

Leave a Reply Cancel reply