www.freewebsite.0nyx.com
You are here: Home >> CSS Layouts >> Lesson 1 www.freewebsite.0nyx.com - Free Website
 
Site guide
 HOME
 SITE MAP
 
Free tutorials
 Free Flash tutor
 Free HTML tutor
 Free JavaScript tutor
 Free DHTML tutor
 
Free Online Tools
 Color Picker
 MouseOver buttons
 Menus : Dropdown
 Page effects
 Scrollbar
 
More stuff
 Free sub-domains
 Make money : Banners
 Increase traffic
 Improve your website


Become a member become a member      Member's Log-in

CSS LESSON 1

CSS is usually written in notepad or front page. In this tutorial, notepad will be used for the most part.

To insert CSS in HTML, you must have the style element present.

<html>
<head>
<title> Learning CSS... </title>
<STYLE TYPE="text/css"> 
</STYLE> 
</head>
<body>
</body>
Notice that the style tag goes within the two "head" tags and not the body tags.

To insert a comment in a css file simply enclose the comment within a /* and */. This will not show up on the website.

<STYLE TYPE="text/css"> 
/* Hello Friends. */
</STYLE>
One of the most common uses of CSS is to decorate links and text. Let's begin with text first.

Say you want all the <h1> headers in your website to be red. Simply insert the following code in CSS.

<STYLE TYPE="text/css"> 
h1 {color: red}
</STYLE>
What If you want all the headers to be aligned center?

<STYLE TYPE="text/css"> 
h1 {text-align: center}
</STYLE>
To combine both of these properties simply separate them with a ; or semicolon.
<STYLE TYPE="text/css"> 
h1 {text-align: center ; color: red }
</STYLE>
Now say that you only want some of the headers in your website to have these properties.

You need to do two things.

<html>
<head>
<title> Learning CSS... </title>
<STYLE TYPE="text/css"> 
h1.yahoo {text-align: center; color: red }
</STYLE>
</head>
<body>
<H1 class="yahoo"> This One </H1>
</body>
First of all you assign the "h1" in the style tag a name. In this case it is "yahoo".

Then you assign the same name to the "h1 tag" which should have these properties.

This is done using the class element. Don't worry If can't grasp this right away.

Let's move on to lesson 2 and practice what we've learned with the "links".


< < Back     Next > >
Freewebsite: Web design tutorials for the rest of us
Lessons:      Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

 
Praise for freewebsite
   "These tutorials are written in such simple language and they're so much fun. They're simply the best." - Mike

   "Just wanted to drop you a line to say thank you. I created my website within a month after reading your tutorials and now I make thousands with it." - Ken