inheritnoneunderlineoverlineline-throughblink - Not supported by IE. Note: blinking text is notoriously disliked by users and is bad from an accessibility point of view.
a:hover { text-decoration: none; }<STYLE type=text/css>
A:link {
COLOR: red /*The color of the link*/
}
A:visited {
COLOR: #800080 /*The color of the visited link*/
}
A:hover {
COLOR: green /*The color of the mouseover or 'hover' link*/
}
BODY { COLOR: #800080 /*The color of all the other text within the body of the page*/
{
</STYLE>
<link type="text/css" rel="stylesheet" href="basic.css">
reset.cssreset.css resets all fundamental styles, so you starts with a real blank new stylesheets.
1
2
3
4
5
6
| .header {<br> background-color: #fff;<br> background-image: url(image.gif);<br> background-repeat: no-repeat;<br> background-position: top left; <br> } |
1
2
3
| .header {<br> background: #fff url(image.gif) no-repeat top left<br> } |
Class and IDclass is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.<li><li> a.k.a link list, is very useful when they are use correctly with <ol>or <ul>, particulary to style a navigation menu.<table>, try <div><div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>‘s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.
1
| ul li { ... } |
1
| ol li { ... } |
1
| table tr td { ... } |
1
| li { ... } |
1
| td { ... } |
<li> will only exist within <ul> or <ol> and <td> will only be inside <tr> and <table> so there’s really not necessary to re-insert them.!important!important will be taken into use regardlessly if there’s a overwriting rule below it.
1
| .page {<br> background-color:blue !important;<br> background-color:red;<br>} |
background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.<h1>title</h1> from a text based title to an image. Here’s how you do it.
1
2
3
4
5
6
| h1 {<br>text-indent:-9999px;<br>background:url("title.jpg") no-repeat;<br>width:100px;<br>height:50px;<br>} |
text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed widthand height.position: {...}@import vs <link>@importand <link>. If you are uncertain which method to use, here’s few articles to help you decide.
px vs empx or em? These following articles might give you a better understanding on the typography units.
<link>. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types.
