Basic CSS

Main >> Tutorials >> CSS >> 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 I write 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 trough all the HTML codes to change them, you only change one part of the CSS code and all the places that are simular will change as well. This is the reason I update my 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 4: 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!

Copyright (C) 2007-2008 vejc-design.com. All rights reserved.
WP | ONE | GA | PB | CC

Advertising

Want to be here?

Top Affiliates

Jessica	Jabed
Fatima	Vicky
Gunnstein	Kristin
Anna	Jack
Lise	Tori

MORE?

the owner

Vibeke. 20 years old. February 23. Norway. Asker. green eyes. brown hair. soccer player.
Loves: Jan Christopher. kebab. friends. Dolly+Ferdinand. Kumsen. money. pizza. snowboard. my green car. surprises. candy. coca cola. LOST. Prison Break. Ugly Betty. sun. Nickelback.
Hates: arrogant/fake people. school. toes. rain. stealers/copiers. homework. teachers.

MORE?

Calendar

October 2008

M	T	W	T	F	S	S
« Sep
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Domain

Owner: Vibeke
Host: one
Site name: vejc-design.com
Online since: 4. October '07
Hits:
Online: Online
Last updated: 7. October '08

MORE?

Layout

Layout up since October 1. It was made by Vibeke in Paint Shop Pro 9. Featuring Vibeke & Jan Christopher. Fonts used: Ambrosia. Texture from here.

link me

MORE?

Updates

October 7

1 coded layout

Changed "the owner" section

October 6

Layout challenge #5

11 PNGs

October 5

1 tutorial

7 textures

Ad challenge starts

9 PNGs

October 2

8 PNGs

Ads

Ad challenge

This list does not show the top referers, it only shows the last hits I have received. I will keep it a secret who wins untill October 26. Good luck everyone:)