A little of bit of HTML and CSS


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:

CSS Code
  1. <div class="divs">
  2. Hello World lol
  3. </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:

CSS Code
  1. <style type="text/css">
  2. .divs
  3. {
  4. text-decoration: none;
  5. font-family:Verdana, Arial, Helvetica, sans-serif;
  6. font-size: 75%;
  7. color: #000;
  8. background-color: #d3d3d3;
  9. }
  10. </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:
CSS Code
  1. <style type="text/css">
  2. .divs
  3. {
  4. text-decoration: none;
  5. font-family:Verdana, Arial, Helvetica, sans-serif;
  6. font-size: 75%;
  7. color: #000;
  8. background-color: #d3d3d3;
  9. }
  10. </style>
  11. <div class="divs">
  12. Hello World lol
  13. </div>



Now we are onto explain this CSS code fully;

1st:
CSS Code
  1. <style type="text/css">


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

2nd:
CSS Code
  1. .divs


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

3rd:
CSS Code
  1. {


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

4th:
CSS Code
  1. 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:
CSS Code
  1. 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:
CSS Code
  1. 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:
CSS Code
  1. color: #000;


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

8th:
CSS Code
  1. 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:

CSS Code
  1. <style type="text/css">
  2. .divs
  3. {
  4. text-decoration: none;
  5. font-family:Verdana, Arial, Helvetica, sans-serif;
  6. font-size: 75%;
  7. color: #000;
  8. background-color: #d3d3d3;
  9. }
  10. </style>
  11. <div class="divs">
  12. Hello World lol
  13. </div>


For questions or help or just comments, post below.
FtH8er's Avatar
Author:
Views:
2,167
Rating:
Posted on Wednesday 11th July 2007 at 05:24 PM
FtH8er
FtH8er's Avatar
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's Avatar
YAY! Ftcher makes an tutorial that's really easy for me. lol.