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
<div style=”width: 400px; background-color: lightblue; padding: 4px; margin: 0px auto;”>
To center something in IE, you can use text-align=center (which is
frowned upon by non-IE types):
<div style=”text-align:center;”>
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 !!!!