CSS Tricks

pradeep's Avatar author of CSS Tricks
This is an article on CSS Tricks in Web Design, HTML And CSS Tutorials.
All you all might be knowing, CSS based pages are search-engine friendly, so we all try to implement CSS in our web pages, so here are a few CSS tricks which will help you work with ease.

CSS font shorthand rule

When styling fonts with CSS you may be doing this:

Code:
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:

Code:
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.

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:

HTML Code:
<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. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

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!

CSS document for printing

Lots of web pages have a link to a print-friendly version. What many of them don't realise is that there's no need because you can set up a second CSS document to be called up when a user prints the page.

So, your page header should contains links to two CSS documents, one for the screen, and one for printing:

HTML Code:
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
 <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
The first line of code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").

So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads:

HTML Code:
<link type="text/css" rel="stylesheet" href="printstyle.css" media="screen" />
Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You'll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.
karthikp like this
0
juresh's Avatar, Join Date: Sep 2008
Go4Expert Member
HI

nice read. I think you need some more points to add. Ok I have some.
Quote:
1. Use Labels
2. Float Your Labels
3. Careful To Not Wreck Your Default Styling
4. Use the :focus Pseudo Class
5. Prefill With Hints, But Clear Them Away
6. Make it work with Web Form Factory
7. Consider a Prefab Solution
thanks
0
skp819's Avatar
Contributor
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.
0
Full Zip Hoody's Avatar, Join Date: Sep 2010
Go4Expert Member
CSS based pages are search-engine friendly, so we all try to implement CSS in our web pages thanks for the tricks!
0
juliaandrews's Avatar, Join Date: May 2011
Go4Expert Member
I have no brief knowledge so thanks for sharing the detailed information.
Thanks
0
haleysalvador's Avatar
Newbie Member
CSS stands for Cascading Style Sheet and it is useful to add a style to a web document. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. It is also easy to use and once CSS is ready then it will call for any new web design.
0
shrnmlss6's Avatar
Newbie Member
Thanks pradeep for sharing this nice concepts on CSS
0
kumkum01's Avatar, Join Date: Apr 2011
Go4Expert Member
In my point of view it is very harmful suggestion in this site.....Thanks for share useful information in here...
0
karthikp's Avatar, Join Date: Sep 2011
Newbie Member
The multiple classes and document printing tips were quite informative. I'm familiar with the basics of CSS and am looking to expand my knowledge. These tips are really good. Hope you post more tips like these!