Published 19 years 3 months ago • Last updated March 22, 2025 • ⏱️ 2 min read
This is about the least technical I can be so hopefully I won't exclude you print designers out there.
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;
}
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;
}
Multiple classes are also supported by most browsers.
<div class="class1 class2"></div>
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">
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;
}
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;
}