Library tutorials & articles
Ten CSS Tricks You May Not Know
- CSS shorthand
- Image Replacement & Printing
- CSS box model
- CSS Positioning
CSS shorthand
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! Just a few of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.
2. Two classes together
Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like! For example:
<p class="text side">...</p>
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. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
3. CSS border default value
When writing a border rule you'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.
If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!
Related articles
Related discussion
-
accutane online without prescription, isotretinoin online, accutane cost, accutane acne treatment
by torgo (0 replies)
-
Front End UI Developer - XHTML CSS PHOTOSHOP AGILE Job Opportunity - LONDON £45k
by Andybrown (0 replies)
-
A large number of corporate websites for sale, cheap
by manypeopledesign (0 replies)
-
Lead Developer needed for full time role in London Music marketing agency
by neilcartwright (0 replies)
-
Positions on divs to affect css on menu links
by squirrels (0 replies)
Related podcasts
-
Despise the listener
We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.
This thread is for discussions of Ten CSS Tricks You May Not Know.