Tutorials
- ASP.NET
- C#
- C++
- Java
- JavaScript
- MySQL
- PHP
- Ruby
- SQL
- VB.NET
Code
How To
News
Forums
Pictures
Videos
Icons
Newsgroups

Building a C# Chat Client and Server

A step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.

in C# Programming Tutorials

Getting Hard Drive Information

A C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.

in C# Programming Tutorials

UPS Shipping Calculator

This tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.

in PHP Programming Tutorials

Create Your Own Rich Text Editor

Creating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.

in JavaScript Programming Tutorials

Tutorials

Programming Tutorials

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (132)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (28)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (61)
Python (3)
Ruby (18)
Silverlight (1)
SQL (8)
VB.NET (5)
Visual Basic (3)

IT Jobs

From CareerBuilder

Geekpedia » CSS Tutorials » CSS Basics

CSS Basics

This tutorial teaches you the basics of CSS. You'll learn the CSS code, the style attribute, the <style> tag, and how to define CSS in an external file.

On Friday, October 12th 2007 at 04:52 PM

By ulrik damm (View Profile)

(Rated 3.5 with 9 votes)

Contextual Ads

More CSS Resources

CSS Basics

CSS, Cascading Style Sheets, is a powerful, yet simple tool when writing websites. The purpose of CSS is to easy change the look of the elements of you website. It can change e.g. color, font, width, height, position, alpha, z-index, and so on. The usage of CSS is very simple, and can easy be put into html documents. For example, we got this heading in a div:

<p>Welcome to my website</p>

The output of this is a boring header in size 12 Times New Roman. Now, you want to make the size to 20, the font to Arial and the color to red. This is easily done using CSS:

<p style=”font-size: 20; font-family: Arial; color: red;”>Welcome to my website</p>

That was better! Now, what we did was to add the style. The style is the CSS part. In the style, you specify the look of the elements; in this case you are changing size color and font.
The CSS code, that between the “”s, is made of two things: the first is the value that is going to be changed, followed by a colon (:), then the value you are changing in into, followed by a semi-colon (;). E.g. we are changing the color of the text by using the color-keyword.

Color: red;

This is how simple it is. Now, we’re changing the font and size, by using the font-family and font-size keywords:

Font-family: Arial; font-size: 20;

Notice that if the font doesn’t exists on the computer showing the webpage, Times New Roman is used instead, so do not use any special font.
This is simple how it’s done. Now, you can try to change different values. Here are some of the most used:

Syntax/explanation/values

Font-weight - used to make the font bold – normal/bold/bolder/lighter
Background-color – used to change the color of the background – color-name/#000000/transparent/rgb(123,123,123)
Background-image – used to put an image in the background – none/url(‘backgroun.jpg’)
Position – changes if the position of the element can be changed by top and left – absolute/relative
Top – the y value – value
Left – the x value – value
Border-style – sets the style of the border of an element – none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset
Border-color – sets the color of the border – color-name/#000000/transparent/rgb(123,123,123)
Border-width – sets the width of the border – thin/medium/think/(value)

There’s unending more CSS properties, which I don’t want to write here. Look forward to part 2 - CSS Classes.

CSS Classes

When working with CSS, you may want some elements to look like each other, and it’s annoying to change everything two times when changing the values. Then you can just make classes. Classes are groups of elements with the same CSS-properties. Some classes are already build in into CSS, e.g. h1, body, div, p, and so on. You can change them as well as you can create your own and change them. First, we’ll try to change one that already exists. To use classes, you are going to use the <style> in the head section of your document.
In head, write the following:

In the body-section write:

<h1>Welcome</h1>

You’ll now see that the color of the <h1> has changed. This is because we changed the CSS-properties of the h1-class In the <style> section. Now this wasn’t difficult, neither is the next part.
In head, write following:

And following in body:

<p class="title">Welcome</p>

Now, you’ll see that the Welcome text has the properties described in the style, but this time, we just change it on a non-existing class. Then, in the <p>, we assign the title-class to the text, and the text is changed :)

I hope you understand, look forward to the next part of the tutorial: CSS part 3 – external CSS files

CSS External Files

In this tutorial, we'll look on how to create external files to store your CSS. We have this HTML site:

<html>
<head>
<style>
h1 {
color: red;
}
.subtitle {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p class="subtitle">to my website</p>
</body>
</html>

Now, we can make this a lot easier to read by making an external file. The name is going to have the .css extension.
Here, we make a file named styles.css, containing the code between the <style> tags:

h1 {
color: red;
}
.subtitle {
font-weight: bold;
}

And in our document, we'll put this line of code instead:

So now out HTML document looks like this:

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome</h1>
<p class="subtitle">to my website</p>
</body>
</html>

The power of external files is that you can have more of them, and just change it if you want a new look for your website. If you know a little JavaScript or PHP, you can also make so that your user can choose the stylesheet himself.

And that's how to do that. So simple :)

Digg It!

Del.icio.us Reddit

StumbleIt

Newsvine

Furl

BlinkList

Rate this tutorial

Current Comments

by js on Saturday, December 29th 2007 at 04:45 AM

Hi..

It very good for startup like me...could please post some more article to study deeply

by mz rahman on Friday, May 16th 2008 at 12:01 PM

hi! it is a good way to explain for the beginners, i appriciate your method.
thanks

by sezer on Friday, June 27th 2008 at 02:26 PM

css Font examples , Properties , Attribute - - //
http://www.css-lessons.ucoz.com/font-css-examples.htm

by Eric Agustian on Wednesday, August 27th 2008 at 09:06 PM

Yeah, I'm agree with others. It's nice articles.

by Joe on Thursday, October 23rd 2008 at 08:46 PM

Been trying to learn coding and I think that this is a great explanation of CSS for beginners. Straight to the point without overstating anything.

Thank you for this.

by yogesh on Wednesday, February 25th 2009 at 07:05 AM

Hi,
Articals are good.
Can you put practical oriented learining here
so that a biggener also able to develop the web page.
thanks.

by yogesh on Wednesday, February 25th 2009 at 07:06 AM

Hi,
Articals are good.
Can you put practical oriented learining here
so that a biggener also able to develop the web page.
thanks.

by yogesh on Wednesday, February 25th 2009 at 07:06 AM

Hi,
Articals are good.
Can you put practical oriented learining here
so that a biggener also able to develop the web page.
thanks.

by syed on Sunday, April 4th 2010 at 01:02 PM

http://www.geekpedia.com/tutorial235_CSS-Basics.html

by Tutorials99 on Wednesday, May 26th 2010 at 01:47 AM

Just brilliant. Awesome tutorial. keep it up
i found another site having Fantastic Page Rank Professional tutorials
see link below
http://www.tutorials99.com