| background-color: | background-color: #808080; background-color: rgb(128,128,128); background-color: #gray; |
|
| demo >> | ||
| background-image: | background-image: url(images/bg.gif); | |
| background-attachment: default; | ||
| background-attachment: fixed; | ||
| background-repeat: repeat; | ||
| background-repeat: | background-repeat: no-repeat; | |
| background-repeat: repeat-y; | ||
| background-repeat: repeat-x; | ||
| background-position: | background-position: top center; background-position: 125px 150px; background-position: 10% 90%; |
|
| background: | background: #fff url(images/bg.gif) no-repeat fixed top center; background: #fff url(images/bg.gif) no-repeat fixed 10% 90%; |
|
| demo >> | ||
| border-color: | border-color: #ccc; | |
| border-style: | border-style: dashed; | |
| border-width: | border-width: 1px; | |
| border: | border: 1px solid #ccc; | |
| border-top: | border-top: 1px solid #FF9900; | |
| border-right: | border-right: 1px solid #FF9900; | |
| border-left: | border-left: 1px solid #FF9900; | |
| border-bottom: | border-bottom: 1px solid #FF9900; | |
| demo >> | ||
| cursor: | cursor: hand; | |
| color: | color: #808080; color: rgb(128,128,128); color: #gray; |
|
| display: | display: inline; | |
| display: block; | ||
| display: none; | ||
| demo >> | ||
| font-family: | font-family: Arial,Helvetica, serif, sans-serif; | ABC |
| font-size: | font-size: 8px; | ABC |
| font-size: 4pt; | ABC | |
| font-size: 1em; | ABC | |
| font-style: | font-style: italic | ABC |
| font-weight: | font-weight: bold; | ABC |
| font: | font: 15px Georgia, Arial; | ABC |
| font: bold italic 15px Georgia, Arial; | ABC | |
| font: bold italic 70% Georgia, Arial; | ABC | |
| height: | height: 200px; | |
| letter-spacing: | letter-spacing: 0.85em; | ABC |
| letter-spacing: 4px; | ABC | |
| letter-spacing: 2pt; | ABC | |
| demo >> | ||
| line-height: | line-height: 16px; | |
| line-height: 1.4em; | ||
| line-height: 135%; | ||
| demo >> | ||
| list-style-image: | list-style-image: url (images/bullet.gif) | |
| list-style-type: | list-style-type: square; | |
| demo >> | ||
| margin: | margin: 10px; | |
| margin-top: | margin-top: 20px; | |
| margin-right: | margin-right: 30px; | |
| margin-bottom: | margin-bottom: 40px; | |
| margin-left: | margin-left: 50px; | |
| padding: | padding: 10px; | |
| padding-top: | padding-top: 10px; | |
| padding-right: | padding-right: 30px; | |
| padding-bottom: | padding-bottom: 40px; | |
| padding-left: | padding-left: 50px; | |
| demo >> | ||
| text-align: | text-align: left; | |
| text-align: center; | ||
| text-align: right; | ||
| text-align: justify; | ||
| demo >> | ||
| text-decoration: | text-decoration: line-through; | |
| text-indent: | text-indent: 50px; | |
| text-transform: | text-transform: capitalize; | |
| demo >> | ||
| vertical-align: | vertical-align: top; | |
| vertical-align: bottom; | ||
| vertical-align: top; | ||
| demo >> | ||
| visibility: | visibility: hidden; | |
| visibility: visible; | ||
| width: | width: 200px; | |
| width: 90%; | ||
| width: 4em; | ||
| demo >> | ||
| word-spacing | word-spacing: 50px; | |
| demo >> | ||
| Pseudo-Class for hyperlinks | ||
| #elementID a | #elementID a {color: blue; text-decoration: none;} | |
| #elementID a:link | #elementID a:link {color: blue; text-decoration: none;} | |
| #elementID a:visited | #elementID a:visited {color: green;} | |
| #elementID a:hover | #elementID a:hover {color: red;} | |
| demo >> | ||
a.className |
a.className {color: blue; text-decoration: none;} | |
| a.className:link | a.className:link {color: blue; text-decoration: none;} | |
| a.className:visited | a.className:visited {color: green;} | |
| a.className:hover | a.className:hover {color: red;} | |
| demo >> | ||
| Pseudo-Class for first elements | ||
| element:first-letter | p:first-letter {font-size: 55px} | |
| element:first-line | p:first-line {font-size: 55px} | |
| element:first-child | p:first-child {font-size: 55px} | |
| demo >> | ||
CSS Tutorials
Properties
CSS
Other Tutorials
© Morina Internet Solutions - All Rights Reserved