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".
|