Basic CSS

CSS is not easy for beginners to understand! I struggled alot with it in the beginning! You have to be patient, and read closely everything here!
First of all CSS stands for Cascading Style Sheets it is made for you to style your website faster and easier. Instead of going through all the HTML codes to change them, you only change one part of the CSS code and all the places that are similar will change as well. This is the easiest way to update a frontpage so fast!

Step #1: Start by copying this basic CSS code:
<style type="text/css"> body, html, div, font, p, td { font-family: Tahoma; font-size: 7pt; line-height: 7pt; color: #000000; margin: 0; padding: 0; } .entrytext{ font-weight: normal; } h1 { background: #000000; color: #ffffff; font-family: Tahoma; font-size: 10pt; line-height: 10pt; font-weight: bold; text-transform: uppercase; text-align: right; margin: 0; margin-top: 1px; margin-bottom: 1px; padding-top: 2px; padding-bottom: 2px; border-bottom: 2px dotted #ffffff; } h2 { background: #404040; color: #ffffff; font-family: Tahoma; font-size: 7pt; line-height: 7pt; font-weight: bold; text-align: left; margin: 0; width: px; margin-top: 1px; padding: 0px; padding-bottom: 0px; border-bottom: 0px solid #FFFF00; } h3 { background: #c0c0c0; color: #000000; font-family: tahoma; font-size: 7pt; line-height: 7pt; font-weight: normal; text-transform: none; text-align: left; margin: 0; margin-bottom: 1px; padding: 0px; padding-bottom: 1px; border-bottom: 0px solid none; } .special { font-family: Tahoma; font-size: 7pt; color: #293763; font-weight: bold; line-height: 7pt; } a:link, a:visited, a:active { text-decoration: none; font-weight: bold; font-family: tahoma; color: #ffffff; cursor: crosshair; } a:hover { text-decoration: none; font-weight: bold; font-family: tahoma; color: #000000; cursor: crosshair; } a.nav, a.nav:link, a.nav:active, a.nav:visited { height:10; padding:0; padding-left:1; padding-right:1; color:#000000; border-bottom:1px solid #000000; display:block; text-transform:uppercase; background:#ffffff; } a.nav:hover { height:10; padding:0; padding-left:1; padding-right:1; color:#000000; border-bottom:1px solid #000000; display:block; text-transform:uppercase; background:#ffffff; } input, select { color: #FE7785; background: #ffffff; font-size: 7pt; font-weight: normal; font-weight: bold; text-decoration: none; font-family: Tahoma; text-align: center; border-width: 1px; border-style: solid; border-color: #000000; } TEXTAREA { color: #FE7785; background: #ffffff; font-size: 7pt; font-weight: normal; text-decoration: none; font-family: Tahoma; text-align: center; border-width: 1px; border-style: solid; border-color: #000000; } </style>

Step #2: Now you can start changing the site, I mostly use the < h1 >, < h2 > and < h3 > codes to change the site. Copy the code under and paste it into your website on the same page where you pasted the CSS code earlier. I hope this will give you an example of how it actually works. <h1>TITLE 1</h1> <h2>TITLE 2</h2> <h3>TEXT</h3>

Step #3: If you still don't understand anything. Start playing around with some of the color codes in the CSS code and see what you are changing. This way you'll easier get to know the CSS code and you will gradually learn how everything works!

online
Back | Refresh | Forward
© 2008 rockdonut.heartlesswind.com