Easy to learn CSS (tutorial)

**~~GrooN~~** · 03-26-2008

This is GrooN's version of a basic CSS (Cascading Style Sheets) tutorial.

Before we begin!
1: Im sorry if there is any spelling errors or anything, i haven't read this through for spelling...

2: you have to know all the basics in HTML, It will be very hard to understand if you dont know it. (I'm sure you can find guides in the HTML section)

3: Sometimes i will put comments IN the codes it will be between: /* Comment */

What's CSS!?
CSS is a langauge you use for designing websites.
You can have the CSS code inside the HTML file or in an extern file.
This file can be putted anywhere you want it.
Then you connect to the file through HTML. (keep up reading to find out how)

Lets Begin!
First you have to know how to connect to the CSS file and how to create the CSS file.
In your HTML code between <head> and </head> input this code for connect to an extern html file:

Code:

<link rel="stylesheet" type="text/css" href="style.css">
 
/* It will look like this in the full doc:  */
 
<HTML>
<HEAD>
<title>my website title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
 
</BODY>
<h1>Welcome to my website</h1>
<BODY>
<HTML>

And this is how it would look if it should be written IN the HTML document:

Code:

<HTML>
<HEAD>
<title>my website title</title>
<style type="text/css">
 /* Then all the code is written here like if this was the file */
</style>
 
</HEAD>
 
</BODY>
<h1>Welcome to my website</h1>
<BODY>
<HTML>

Tip: The code is the same if it was an extern or intern code
Yea, but what do i write in the file!?
How if we say i want a website with black background and white text i should write something like:

Code:

body {
    background-color: #000000;
}
h1 {
    color: #FFFFFF;
}

First i write "body", this is what tag i want to write to. ( <body></body> )
and i write " { " this is where the code starts and " } " is where it ends.
Between these there is a code "background-color: #000000;" Background-color makes you edit the background color, and then the " : " is where the value starts. and " ; " is where it ends. Then the " #000000 " is the color code. (black)

And the:
h1 {
color: #FFFFFF;
}
is the same:
h1 /* The HTML tag you want to write to */
{ /* Starts the code */
color /* Same as "background-color" this one just edit the color of the text */
: /* Start of value */
#FFFFFF /* the value (color) */
; /* End of value */
} /* End of the code */

I understand if you're confused!
But all this code mixed with the HTML code will give you this:

Now you know the basics, how it works...
You can find more TAGS how to edit background image and text font, and meny meny other things, here:
CSS2 Reference

Made by GrooN :wave:

**ThunderSS** · 04-24-2008

Nice one but css is very easy...the easiest programming language i know

only few tags not so complex and few parameters. However is a must to use in a decent web page

. When i learned it it took me around 2 hours to get it

**Tanax** · 04-24-2008

@up- CSS isn't a program language. It hasn't any form of functions or variables. It's the same language as HTML, which is a markup language.

Both HTML and CSS is markup languages.

JavaScript and PHP are examples of programming languages(actually I think they're called script languages, but meh..).

Shout-Out

User Tag List

Thread: Easy to learn CSS (tutorial)

Thread Tools

Search Thread

Easy to learn CSS (tutorial)

Similar Threads

Very easy [Higher Learning] in Dalaran with Radar/Dumper

CSS Beginner Tutorial

CSS Quick Tutorial

[Tutorial] Easy Way to Add CUSTOM Items

Tutorial: Shocking Text (Easy)

OwnedCore Forums

casino

CoreCoins

My OwnedCore

About Us

Casino