Ten CSS tricks you may not know. 1. CSS font shorthand rule When styling fonts with CSS you may be doing this: font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif There's no need though as you can use this CSS shorthand property: font: bold italic small-caps 1em/1.5em verdana,sans-serif Much better! 2. Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. <p class="text side">... Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. 3. When writing a border rule you'll usually specify the color, width and style (in any order).
If you were to write just border: solid then the defaults for that border will be used. 4. Lots of web pages have a link to a print-friendly version. So, your page header should contains links to two CSS documents, one for the screen, and one for printing: 5. <h1>Buy widgets</h1> Perfect Full Page Background Image. Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised.
Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version. CSS tips and tricks. Here's a CSS-only solution to prevent expanding table cell width.
In many cases, html table cells expand in order to accommodate their contents. For example, you may be required to display a long, contiguous string of characters (a long URL for example) in a table cell that's narrower than the string of characters. Here's one css-only solution I stumbled upon after trying many combinations. I've tested it on the following Windows browsers: IE7, IE8, FF 3.6, Chrome 9, Opera 10, and Safari 5. Unfortunately, on Linux (Red Hat or Ubuntu) FF 3, this solution does NOT work, so beware if you have a significant Linux user base. 1. This alone forces cell content to wrap in IE rather than expanding the cell to fit the contents. 2. <title>Non-expanding table cell example</title> table, td, th { border: 1px solid black; table.winner-table { width: 500px; table-layout:fixed; text-align:left; vertical-align:top; padding: 5px; table.winner-table tr {