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 HoveringWouldnt 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:
Similar Posts:
- CSS Tutorial: How to Design Round Corner Boxes
- How to design 3 Column Website Layout with Top Navigation Menu in CSS
- Changing Quote and Code Tags in WordPress
- Color Gradients Appear Dull in LCD Monitor
- Adding border to images in WordPress post!
- Nokia E50 Mobile Review
- How to install Xvfb (X11 Server) in Linux Server
- 30+ Best jQuery Tutorials & Plugins for Beginners
- How to get parent category name in WordPress?
- Remove text wrap around image in wordpress
March 3, 2012
a good quick tutorial. For a more thorough course: CSS Tutorial or HTML Tutorial