CSS (cascading style sheets) are pretty much useful if you are designing a website and in most cases without css it is inevitable from design point of view. Hand-coding CSS can be pretty easy if you know some pretty basic rules.
The following are some of the most useful CSS tips for any beginners.
1. Classes vs IDs
It is very important to understand the difference between classes and ID used in HTML.
– Classes (starts with .) can be reused as many times as you can within a tag.
– IDs (starts with #id) can only be used ONCE
Example:
/* Example of class */
.header {
width: 100%;
background: #000;
}
/* Example of ID */
#header
{
width: 100%;
}
/* HTML */
blah blah...
blah....
2. Color Codes
You can specify color codes in short hand with just 3chars. For example if the color is #ffcc00, you can specify first letter of each pair.
#ffcc00 => #fc0;
3. Order in Padding/Margins
whenever you specify the left,right,top,left for margins or padding, always remember it must be mentioned in clockwise direction. Just like how time clock runs.
Top => Right => Bottom => Left
Example:
#header {
margin: 10px 5px 5px 0;
}
4. Top Navigation Menu
Most often top navigation menus are made using bulleted lists. The trick is using display: inline in the bulleted list so that it is force to display horizontally.
/* CSS code */
#navmenu {
list-style: none;
margin: 0;
padding: 0;
}
#navmenu li
{
padding: 5px;
display: inline;
}
/* HTML code */
5. Changing Link Color
Its easy to change link color in css.
If i have used #header a in the css, then it means all tags under #header will be effected by this css code. You need not declare id or class inside a href tag. It will automatically take its effect.
/* css code */
#header {
font-size: 12px;
}
#header a {
background: #ef0;
color: #cc0;
}
6. Applying Opacity while Hovering
Wouldnt it look great if you apply hovering feature of opacity, which looks pretty interesting.
#header a .hover {
background: #cc0;
filter: alpha(opacity=70);-moz-opacity:0.6;
Simply specifying opacity only works in IE browsers and doesnt work in Firefox browser. For that to work you have to specify an extra parameter “-moz-opacity:;
