Styling css is just follow the rules, if you run with the rule, you can get a good working, but sometime, you forgot that in these rule, you miss something that can make you better in styling css. This entry is just a bit experiences i got and i want to share with you. It'll help you not much but without that, your design can not be better.
Just change the values inherited from body
You can save your time when design css and make the css style look simple, easy to read and easy to edit by define all HTML tags you'll use in css style. When you use each tag in different cases, you dont need to re-style it, just re-use it with changing some properties you want. And you need to understand that in css, most of HTML tags will inherit properties from body tag, so that, just one time define in body tag, just change value of properties when you use tags: h1, h2, span, p, div...
body {
background-color: #fff;
color: #333;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 18px;
}
h1 {
font-size: 24px;
}
Group HTML tag selectors in one style
With some tags like html,body,div,ul,ol,li,dl,dt,dd ...similar properties, you can group that all into one style, save your css size, save your time... And when you use it somewhere in your css, you dont need to replace the same style in so many selectors.
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input {
margin: 0;
padding: 0;
}
Target css property in each Web Browser
You know that sometime, each web browser will display your css differently. When you add property like margin-left to your selector, maybe Firefox margin exactly but maybe IE do nothing. How to resolve this problem? Follow this example below:
#box {
margin-left: 20px; /* all browsers including Mac IE */
*margin-left: 22px; /* IE 7 and below */
_margin-left/**/:/**/ 18px; /* IE 6 only */
}
With this solution, you can target your css property to each web browser if something went wrong with any web browser displaying. Read my entry
here to find some tips about css in IE.
Use short rule in one selector.
In CSS2, you can use the short rule, this is much better when you are a lazier. Some time, when i design css with Dreamweaver, i automatically generate the background for a selector like this:
#box {
background-attachment: fixed;
background-color: #fff;
background-image: url(images/header-bg.gif);
background-position: left top;
background-repeat: repeat-x;
}
But you can do it by following rule:
#box {
background: #fff url(images/bg.gif) repeat-x fixed top left;
}
and this below is rule for font:
h3 {
font: 1em/1.5em bold italic small-caps verdana,serif;
}
Whenever out-line css style is a big mistake
Don't ever think everything you can style css in out-line style by set attribute for HTML tag like class, id. I think give you an example help you get better than saying a lot. This mistake is not a big problem, but it make your design poor and look not professionally.
By normal, you do a menu separated by a border like this:
ul li {
display: block;
float: left;
margin: 5px;
border-right: solid 1px #000;
}
You think it's ok? I'm fastidious and i really don't like at the end of menu, it has one | odd. And now, you need to style in-line it by do HTML like this:
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li style="border-right: none;">Text 4</li>
</ul>
You can do that tip when you have close DIV tags and don't want it double border size, just remove border at the close side from one of two.
Write your css with Alphabet and Paragraph and Commenting
I know that it not difficult to find and edit your css seletors, with any css design application, you can easy find your one css selector you want to edit by using finder feature(normal use hot key Ctrl + F). But formating your css is a good skill you need to have as a habits. Something will like this below:
/* IMAGES */
img {
border: 0;
}
img.across {
margin: 2px 0 16px 0;
}
img.left {
float: left;
margin: 2px 20px 16px 0;
}
img.right {
float: right;
margin: 2px 0 16px 20px;
}
img.flushleft {
margin-left: -20px;
}
img.flushright {
margin-right: -20px;
}
So, you know, css maybe easy to learn, but it's not easy to use, and using well is more difficult. Keep your good working in css by train yourself and improve your css skill, right now!
