Jo$h
Posting Freak
- Jul 7, 2010
- 1,030
- 79
Welcome to The first tutorial on CSS. In the series of this tutorial, we will go very far in-depth on how to code CSS and integrate it with your HTML pages. If you are unfamiliar with HTML please click
Ways you can integrate CSS with your HTML page:
Comments
To insert a comment in your CSS page (which makes it more neat and organized) type in
anywhere in your External CSS document.
Using CSS on your Page
To use the CSS on your page you will need to use the
Tag. On Your CSS Document You will need to determine whether it is an ID or a class. You can use an ID selector as follows
That will define an Id. If you wish to use a Class use the class selector as follows
In order to add the element characteristics into the page you need to specify on the div tag as follows.
There is NO SELECTOR when you insert in the HTML page. Just class and id. You can also define actual HTML tags. It must be a REAL tag. When you define a tag there is no selector.
is a REAL HTML tag. Whatever you define that tag and use the body tag on the page it will display.
CSS Syntax
You need to know the syntax in order for your code to work. Below is an example of the ID selector using CSS Syntax.
In The Next Tutorial we will review quite more of the definitive codes.
You must be registered for see links
before proceeding with this tutorial.Ways you can integrate CSS with your HTML page:
- External Stylesheet This is the most common way to insert CSS into your page. When you have an external stylesheet you save it as a separate file with the extension ".css" You will also have to link your file to your HTML. Insert the following code into the <head> section of your HTML page.
Replace the Bolded section with your CSS Sheet. Good ideas for a name are "main.css" "site.css" or "css.css".Code:
<link rel="stylesheet" href="[B]mystyle.css[/B]" type="text/css" /> - Inline Stylesheet This is the least common way to insert CSS into your page and I highly discourage it. When you have an Inline stylesheet you code with
attributes within the element you want to change. Just like the Following:Code:
style=""Code:<p style=""> - Internal Stylesheet When you want to make your page different from the other pages on the website you will use an Internal Stylesheet. You insert
tags in the <head> section of your page and define in between them.Code:
<style>
Comments
To insert a comment in your CSS page (which makes it more neat and organized) type in
Code:
/*COMMENT HERE*/Using CSS on your Page
To use the CSS on your page you will need to use the
Code:
<div>
Code:
#ELEMENTNAME
Code:
.ELEMENTNAME
Code:
If ID: <div id="elementname">
If Class: <div class="elementname"
Code:
bodyCSS Syntax
You need to know the syntax in order for your code to work. Below is an example of the ID selector using CSS Syntax.
Code:
#elementname {
Define your CSS codes here
}In The Next Tutorial we will review quite more of the definitive codes.
!
goodjob
