Basics of CSS

Salty · August 29th, 2009, 12:02 AM

Okay, this is a simple and easy tutorial for CSS (cascading style sheets). I'm not super good myself, so please correct any mistakes you see. Good luck.

Part 1 - Introduction

Here are a few points to know before starting CSS:

CSS means 'Cascading Style Sheets', and allows you to set the properties for a CSS class you assign to elements of your webpage. It is an extremely useful tool to use in web design, if used correctly.
---------
Okay, moving on now to important things... When you start CSS you usually see tons of confusing values. I'll give a quick definition on those:

color - The color of your font of your webpage text.
font-family - Your preferred font (IE- "Helevtica", "Verdana", etc)
font-style - The style of your font. (IE- Italic)
font-size - The size of your font.
font-weight - (IE- font-weight:bold;)
text-decoration - Style of your webpage text (IE- text-decoration:underline;) The following can be used for text-decoration:
None
Underline
Overline
Line-through
Blink
Protip: Never use blink ever.
text-transformation - When you hover over the text, it changes. (IE- text-transformation:capitalize;) The following can be used for text-transformation:
None
Lowercase
Uppercase
Capitalize
text-align - Where you want to align the text on your webpage (IE- text-align:right, left, center, justify;)
a - A link.
a:active - Current link/page you're on.
a:visited - Visited link.
a:hover - The link you're cursor is on. You can use different color to change the link color when you hover over it. You can also change the text-decoration and text-transformation. Example:
Code:
```
a:hover {
color:#333;
text-decoration:underline;
text-transformation:captalize;
}
```
background - The color of your background.
background-image - The image of your background. Example:
Code:
```
background-image:url(url goes here. must be hosted image)
```
background-repeat - Where you want your background image to repeat. Examples:
Code:
```
background:url(url);
background-repeat:no-repeat;
```
This will stop the image from repeating
Code:
```
background:url(url);
background-repeat:repeat-x;
```
This will make your image repeat left and right.
Code:
```
background:url(url);
background-repeat:repeat-y;
```
This will make your image repeat up and down.
background-position: - The position of your image. Example:
Code:
```
background-position:left;
```
The following can be used in background-position:
left
right
top
bottom
center
top right
top left
bottom right
bottom left
center center
center right
center left
center top
center bottom
border - A border for whatever. Example:
Code:
```
thead th {
border:1px solid #5F5F5F;
border-bottom-width:1px;
padding:5px;
text-align:center;
}
```
The following can be used for border:
solid
dashed
dotted
double
ridge
groove
inset
outset
hidden
none
You can use borders on the top or bottom of an image, or anything else. The following can be used:
border-top: ….
border-left: ….
border-bottom: ….
border-right: ….
margin - You can specify the margin to be equal on all sides using this code. Change the value to increase or decrease the margin around the area on your webpage the CSS class is assigned to. The following can be used:
margin-left
margin-right
margin-bottom
margin-top
Code:
```
margin: 5px ;
```
padding - Opposite of margin. Padding will increase the space between the content of the element and the edge of the element. This is recommended for text boxes to make sure the text doesn't push up alongside the edge of the box. The following can be used:
padding-left
padding-right
padding-bottom
padding-top
width - Change the width of the class.
height - Change the height of the class.

Part 2 - Using CSS

This part we're going to learn how to use CSS. Yay. Now, before even doing anything, we're going start by using the ';' and '{/}' tags.

Code:

body {
background:#000;
color:#fff;
}

See how I used the '{' tag in the very beginning? In CSS, it's basically an opening and closing tag. You must use this tag, or your CSS will be incomplete. Now, moving onto the semi-colon, this is to separate lines. Again, without this tag the CSS would be incomplete.

In CSS, you can setup the coding in two different ways. Examples:

1

Code:

body {background:#000;color:#fff;}

2

Code:

body {
background:#000;
color:#fff;
}

Either way will be fine, but it's strongly recommended to use the 2nd option. The first may become too confusing and messy.

Also, when using HEX codes in CSS, you must always have the # symbol before the hex number.

Now that you have a basic understanding on how to write CSS and how to use the tags, we can move onto actually using CSS.

Part 4 - Background and text

Now that we know the attributes and values, we can put all of it into action! We're going to start off with background. Background is a very important part of CSS as it's the color/image behind the main content. Without a background, a webpage would look incomplete.
Text is another important feature. I think you know why we need text in CSS, but you don't know how to use it.

Code:

body {
background:#000;
color:#fff;
font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif;
font-size:93.3%;
}

Okay, so do you think you can translate that (in your head) into a webpage? It's simple, the background:#000; means your webpage's background color is black (in HEX, #000000). The color:#fff; means the font color is now white (in HEX, #ffffff). The font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif; means that the main font is Helvetica. The font-size:93.3% means that the font size is... well 93.3%. You can use different terms other than % for the font-size.

So that's basically what that is. For the font-family, the font choices must only be browser known fonts. So you can't use some font made on another website, as the browser will not recognize it.

Part 5 - Links (a)

Links in CSS are known as 'a'. In HTML, a link means 'a: href', but this is a much simpler and easier version. Anyway, 'a' is another important thing in CSS. You may see it like this in the actual code:

Code:

a {
color:#0C79A5;
text-decoration:none;
}

What does this mean? It means the general link color will be a shade of light-blue. The a:hover in CSS is when you basically move your mouse cursor over a link. Here is an example in CSS:

Code:

a:hover {
color:#0A6F9D;
text-decoration:none;
}

What does this mean? It means the hovered link color is a darker shade of blue. So when you hover over the link, the color will be dark blue :]

Part 6 - Paddings and Margins

Okay, paddings and margins in CSS can be quite tricky, so be careful. Anyway, if read through the list of stuff in CSS then you should know what these mean, if not, go read again.
Anyway, I'm going to use this for my board wrapper:

Code:

#wrap {
background:#fff;
border:1px solid #3D97BB;
margin:0 2% 30px;
}

For more information on using margins, refer to this guide.

As you can see, the margin is 2% for the wrapper. Let's say I want it to be smaller? Easy, increase the percentage of the margin % and it will decrease in width. What if I want it bigger? The decrease it.

Paddings... I'm not an expert at, so I can't really say much about them.. I'll refer you to this guide.

Well, I guess that's the end until I edit with other stuff I might have missed. Hope this helped you get a basic understanding of CSS.

Bud Light · August 29th, 2009, 02:41 AM

you really did go only for the bare basics :v

good job though. I didn't know you dealt with coding.

Bud Light · August 29th, 2009, 02:41 AM

also, you should learn the DIV style of CSS. it's a lot cleaner and easier to manage, really

Salty · August 29th, 2009, 04:10 AM

Yeah, feel free to edit and shit, I know I've forgotten tons of stuff since I made this at 12 AM :/

Bud Light · August 29th, 2009, 04:28 AM

Quote:

Originally Posted by Salty

Yeah, feel free to edit and shit, I know I've forgotten tons of stuff since I made this at 12 AM :/

uuuuh

I might add some things, but I don't know if I want to add a whole section on div tags.

Salty · August 29th, 2009, 04:34 AM

Then I'll just edit myself... This would be easier to make if I made a tut explaining how to make a webpage and stuff. >_>

Bud Light · August 29th, 2009, 04:50 AM

Quote:

Originally Posted by Salty

Then I'll just edit myself... This would be easier to make if I made a tut explaining how to make a webpage and stuff. >_>

I could write a "tut", if you'd even call it that, for html coding.

Though when you use CSS, there's not much to do about html.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode