Without CSS style sheets we can't build a modern web today. However, are you familiar with CSS enough to use its maximum possibility? Or just copy a few rows of styles from your first successful website? There are some tips that may help you or may be interesting for you.
Child selection
Well, this is well known I think, but for those, who forget on it often...
<style type="text/css">
#content p a { color: #FF0000; }
</style><div id="content"> <p> <a href="http://www.maxiorel.com">Maxiorel</a> </p> </div> <div id="content2"> <p> <a href="http://www.backuphowto.info">Backup HowTo</a> </p> </div>
Step by step selection
The trick is not very practical, because the large number of consecutive elements (such as lines of the table), requires a very long definition of the CSS:
<style type="text/css">
tr{background-color: #39f;}
tr+tr{background-color: #fff;}
tr+tr+tr{background-color: #39f;}
</style><table cellpadding="5"> <tr> <td>jedna</td> <td>dvě</td> </tr> <tr> <td>tři</td> <td>čtyři</td> </tr> <tr> <td>pět</td> <td>šest</td> </tr> </table>
By attributes selection
Interesting choice depending on whether is defined any property or whether the value of properties is equivalent to a specific value.
a[title] { cursor:help; color:#FF0000; text-decoration:none;}<a href="http://www.maxiorel.cz/">Maxiorel</a> <br /> <a href="http://www.rejpal.cz/" title="Nice forum">Rejpal</a>
a[id="forum"] { color:#0000FF; text-decoration:none;}<a href="http://www.rejpal.cz/" id="forum">Rejpal</a>
To apply only to the style element which value of any attribute contains a given text, follow these steps:
a[title~="The best"] { color:#33CC33;}<a href="http://www.maxiorel.com/" title="The best website">Maxiorel</a> <a href="http://www.rejpal.cz/" title="The best forum">Rejpal</a>
Tags:
