No, not books to read, but small simple stuff which I tend to reuse over and over again.
I have collected a lot of the common CSS techniques that I use and put them into one default file, which I import into each of my projects. I dub this holy css file, default.css .
Which as of this moment (21st March 2007) is CSS Validated. :3
So what’s inside it?
The standard controls over the body, and ul, to ensure that I get a common style when I develop sites.
So lets have a look at some of the more interesting things which people generally disregard.
Stupid Image Borders
a img { border: none; }
This should speak for itself. I for one despise borders around images. They look nasty.
Horizontal lists
ul.horizontal-list li { display: inline }
The simplest way to make a horizontal list.
Monospace Baby!
.monospace {
font-family: “Courier New”, Courier, mono;
font-size: 0.95em;
}
Monospace baby! For that awesome terminal looking goodness.
Format First Column in a Table
table.first-id tr td:first-child {
font-size: 0.95em;
text-align: right;
font-family: “Courier New”, Courier, mono;
font-size: 0.95em;
}
Tables should be used for what they were created for. That is tables. I’ve always had problems using the col tag to get the look that I wanted. It never seemed to work. Similarly when writing (X)HTML, I have a tendency to skip writing that.
Rather than implementing a col tag and putting a class attribute to every first column in the list (a very tedious process), I used CSS selectors to select each of the first element in each row, and apply a style to it.
Now all I have to do is apply the class to the table, like so.
| 1 | meh |
| 100 | bleh |
Removing Redundancy
.float-right { float: right }
.float-left { float: left }
.clear { clear: both }
.inline { display: inline; }
.center { margin: 0 auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.full-width { width: 100% }
.cursor-pointer { cursor: pointer }
Note The plugin is screwing up the output of the css code, please for the moment revert to the file.
All these CSS classes should be very straight forward. All are 1 liners meant to do one simple job which I can use to construct a masterpiece, for example: < div class=”float-left text-left cursor-pointer” >. I use this as it quickly gives me the flexibility of modifying my elements without adding in the style attribute.
Conclusion
Use some of these CSS classes yourself! Modify them, and lets see what else you’ve got?
