Basic CSS Tutorial


Jun 25, 2008
theone759 submitted a new Article:

Basic CSS Tutorial

*I wrote this a few days after I learned CSS to help others, if there is something you would like added, please let me know (or if there is something wrong)

CSS Tutorial
Q & A:

1] What does CSS Stand for?

CSS Stands for Cascading Style Sheets

2] What does it do?

You can quickly change font, font size, background color/image, text layout, page margin and much more. (I will explain how to change some of those below!)

3] Why should I use CSS (Cascading Style Sheets)?

You can carefully control every aspect of your page(s). Apply changes globally, with a consistent design throughout your web pages.

4] Why does my page look different in different web browsers?

Different browsers will display the CSS Markup differently, which is why you are noticing a difference in the different browsers. Some older browsers can’t display it correctly, or older browsers can’t display it at all.

5] How do I use CSS, or where do I put the code?

You can do it two different ways; you can have it inside your web page (will explain below), or link to a external styles.css.

CSS Markup Example(s):

*You can use this as you need to and alter it to your likings (Hope it helps!)

body {background: black;
color: black;
font size: 16px;
font –family: Garamond;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px; }

Explanation of what each part does:

-- Background: This is the background of your web page, so with that code, our background is black.
*Note you can change that using any hex code. For a list of web-safe colors visit:

-- Color: This is your font color. You can’t change it to font-color, it needs to stay as “color”. Again, you can change this just like above.

-- Font-Size: Pretty self explanatory, this is the size of your font.

-- Font-Family: This is the look of the font, you can change this to another family:

*Note, it’s important to use one of the most common fonts, and they are usually installed on all computers. If you use one that others don’t have it won’t display correctly.

-- Margin-Left/Right/Top: This is the margin of your website (the width of your page [where the text begins and ends]).

So that’s the body of your page, which is the main part, but you can also edit other parts...

Read more about this article here...
Last edited by a moderator: