CSS handy tips
Friday, 23 February 2007
This is about the least technical I can be so hopefully I won’t exclude you print designers out there.
Global wildcard
The * global wildcard references the entire tree of a css elements. If used on its own it references the whole css. It is useful for applying global rules and resetting the default styles.
* {
padding:0;
}
Clearing elements
We’ve moved on from clear, now you don’t need to use it as much. If you want an element to clear a floated element you can use overflow:hidden. As long as dimensions aren’t used within the css it can be quite handy.
.nameOfYourClass {
overflow:hidden;
}
More than one class
Multiple classes are also supported by most browsers.
<div class="class1 class2"></div>
Different styles per page
You can also reference certain pages by placing a class or id on the body tag. This allows you to customise navigation for selected tabs for example.
<body id="productsPage">
How cascading part of css works
The following references a “ul” tag with the class nav:-
ul.nav {
color:#FFF;
}
<ul class"nav">
<li>Example</li>
</ul>
You can also references tags within classes so the products class can reference the table element even if the table doesn’t contain a class. This won’t affect other tables which don’t have a products class div container.
.products table {
width:500px;
}
<div class="products">
<table>
<tr>
<td>Example</td>
</tr>
</table>
</div>
Referencing multiple id’s or classes is also very easy:-
.class1, .class2, #someID {
color:#000;
}
Overwriting certain styles that you have already define can be done as well:-
.product1, .product2 {
width:500px;
color:#000;
}
.product2 {
width:auto;
}
Order of elements
The style html attribute applies first, then id selectors, then classes. In the following example the div will be 500 pixels wide. If the style attribute is removed the div will be 400 pixels wide. You get the idea.
<div style="width:500px;" id="example1" class="example2"></div>
#example1 {
width:400px;
}
.example2 {
width:300px;
}