Working with Divs
id: 5
Category: CSS
Rated:

Rate: 12345

Div using CSS

Things you will need:
`Basic knowledge on CSS
`Basic understanding of Divs in HTML
`Basic understanding of pixels

Making Divs is just as easy with CSS as it is with HTML. There isn't much of a difference between the HTML and the CSS except that your properties (such as left and top will be in CSS and not in the DIV tag itself). First we should start our CSS code:

<style type="text/css">

Next we need to know what we want to name the Div and what we want it to do. But what do you mean, name it? In the Div tag you will be entering class="DIV Name Here". This is how you 'name' it. But at the moment, we will build the CSS code.

Naming it is another term for giving it a class. In CSS defining classes is as simple as putting the name of the class you want and putting a "." before it. An example:

<style type="text/css">
.divname{

Why Do you have the "." before divname? This helps it recognize that you will be using the class="divname" tag.

<style type="text/css">
.divname{
left: 00px;
right: 00px;

I want it to have a border and a background. I also want it to have a different text color. How can I do this? It's simple really, you just have to put all the properties in the CSS script. First we'll add the border and background:

<style type="text/css">
.divname{
left: 00px;
right: 00px;
border: solid 1px #000000;
background-color: #7777FF;

The above code will make a div 0px from top and bottom and a solid border around the div itself, the border color being black(#000000). The background of the DIV will be a purple color(#7777FF).

You can change the font of the text only in the div as well. You do this by adding color:YOUR COLOR HERE; in the example below, I will make the text white.

<style type="text/css">
.divname{
left: 00px;
right: 00px;
border: solid 1px #000000;
background-color:#7777FF;
color: #FFFFFF;

Next we must end this style tag. The final code looks like this:

<style type="text/css">
.divname{
left: 00px;
right: 00px;
border: solid 1px #000000;
background-color:#7777FF;
color: #FFFFFF;
}
</style>

Now that we have ended it, where is the div? I dont see it on the page...Well, we need to add the div tag on the page and name it. Example for this:

<div class="divname">

Text text

</div>

Ending Tips: If colors aren't working, check spelling if it's a word (like blue etc.), or check you have the # in front of the hexagonal color codes. If other properties aren't working always check spelling and see if characters are missing. The smallest character missing can create big problems.

If you have any questions you may contact me using the "Contact us" link under the site navigation.

Sitely Home Contact Us About Us

Navigation CSS HTML Website Creation
PHP CuteNews
Photoshop 7.0

Affiliates Apply? (10)

Credits

Site & Layout © Dice of AOR
Anime Oasis Renascence
Valid XHTML 1.0 Transitional Valid CSS 2.1

Disclaimer

All contents are © Dice.
If credit for anything is missing please contact me and it will be added. If there is something you wish me to take off the site (that belongs to you) contact me. It will be removed immediatly.

Basic Rules

All tutorials on this site were written by me, Dice. They may not be redistributed without permission! Feel free to link to the videos.

I have used this site also for a project in college :3