Forgot Password / Register
Site Statistics
Total Members: 520
Total Tutorials: 242
Newsest User: 8884244477
Todays Unique Hits: 784
0 Users 8 Guests Online

A little of bit of both

Here i will be teaching you alittle bit of HTML so you can understand more on the CSS thing. The HTML will not be very well commented as this is a CSS tut, and is simply here to help understand the CSS.

1:) We just need to make something that we can define a class to so lets just do something easy and make a div, and define a class for it then type something and close it like this:

Code

<div class="divs">
Hello World lol
</div>


Now what the class is telling it to do is to look in the CSS for something with the named "divs".

So lets make the style to define the name "divs". We do that with something like this:

Code

<style type="text/css">
.divs
{
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #000;
background-color: #d3d3d3;
}
</style>


Now you have successfully made a style sheet, which u will need to include at the very top of your document, so now the divs will look like what you have told them to look like.

Your final code result should be like this:
Code

<style type="text/css">
.divs
{
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #000;
background-color: #d3d3d3;
}
</style>
<div class="divs">
Hello World lol
</div>



Now we are onto explain this CSS code fully;

1st:
Code

<style type="text/css">


^^Tells the document this is where the style for the page is defined at.

2nd:
Code

.divs


^^Tells the documents that this is a certain class that is defined somewhere in this document

3rd:
Code

{


^^Tells the document that this is opening the class to define the style

4th:
Code

text-decoration: none;


^^Tells the document that you don't want the text in the class to have any decoration such as: underline, italic, strike, etc..

5th:
Code

font-family:Verdana, Arial, Helvetica, sans-serif;


^^Tells the document that this is the type of text you want to use for this class

6th:
Code

font-size: 75%;


^^Tells the document that you want to use a text of the size of 75%, you do not have to use %, you can use px as well, i just prefer %.

7th:
Code

color: #000;


^^Tells the document that you want the color of your text to be #000 or #000000, which is just standard black.

8th:
Code

background-color: #d3d3d3;


^^Tells the document that you want the bg color of the div to be #d3d3d3, or a light gray.

The full code should be something like this:

Code

<style type="text/css">
.divs
{
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #000;
background-color: #d3d3d3;
}
</style>
<div class="divs">
Hello World lol
</div>


For questions or help or just comments, post below.
FtH8er
Author:
Views:
1930
Rating:
Posted on Wednesday 11th July 2007 at 05:24 PM
FtH8er
FtH8er
trust me, im plenty experienced in php, mysql, html, and css, its just html and css tuts are the easiest ones to make lol
Posted on Wednesday 11th July 2007 at 12:30 PM
cyruswu
cyruswu
YAY! Ftcher makes an tutorial that's really easy for me. lol.