CSS Tutorials

Properties

background-color: background-color: #808080;
background-color: rgb(128,128,128);
background-color: #gray;
CSS demo
    demo >>
     
background-image: background-image: url(images/bg.gif); CSS demo
  background-attachment: default; CSS demo
  background-attachment: fixed; CSS demo
  background-repeat: repeat; CSS demo
background-repeat: background-repeat: no-repeat; CSS demo
  background-repeat: repeat-y; CSS demo
  background-repeat: repeat-x; CSS demo
background-position: background-position: top center;
background-position: 125px 150px;
background-position: 10% 90%;
CSS demo
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; CSS demo inline
  display: block; CSS demo inline
  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
Other Tutorials