Current Section: CSS -> Div // « Back

Div using CSS

Things you will need:
`Basic knowledge on CSS
`Understanding of pixels--If you do not understand pixels please read top section in the tutorial on div for HTML

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 in the div tag you're not putting the properties. 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 what is 'naming' it. Ok...now why do I have to name it?
If you don't name it then you will just have access coding and the div wont take the effects you had set for it. Now what does this code look like? We'll start it and build on from what we already have:

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

Why Do you have the dot before divname? This helps it recognize that you will be using the class= tag. Well that makes sense, but how do I make it left and right?

<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 different scroll bar colors from the rest of the page and different text color. How can I do this? It's simple really, you just have to put all the properties in the tag. First we'll add the border and background:

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

Scrollbar:

<Style type="text/css">
.divname{
left: 00px;
right: 00px;
Border: solid 1px;
Border-color: #000000;
background-color:#7777FF;
scrollbar-track-color:#7777FF;
scrollbar-highlight-color:#7777FF;
scrollbar-3dhighlight-color:#7777FF;
scrollbar-shadow-color:#7777FF;
scrollbar-darkshadow-color:#7777FF;
scrollbar-arrow-color:#7777FF;

Font:

<Style type="text/css">
.divname{
left: 00px;
right: 00px;
Border: solid 1px;
Border-color: #000000;
background-color:#7777FF;
scrollbar-track-color:#7777FF;
scrollbar-highlight-color:#7777FF;
scrollbar-3dhighlight-color:#7777FF;
scrollbar-shadow-color:#7777FF;
scrollbar-darkshadow-color:#7777FF;
scrollbar-arrow-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;
Border-color: #000000;
background-color:#7777FF;
scrollbar-track-color:#7777FF;
scrollbar-highlight-color:#7777FF;
scrollbar-3dhighlight-color:#7777FF;
scrollbar-shadow-color:#7777FF;
scrollbar-darkshadow-color:#7777FF;
scrollbar-arrow-color:#7777FF;
color: #FFFFFF;
}
</Style type="text/css">

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 you are using CSS on your entire page and the effects of scroll bars aren't working, put the Div code before the scroll bar code. If colors aren't working, check spelling if its a word or check you have the # infront of the hexagomal color codes. If other things aren't working always check spelling and see if characters are missing. The smallest character missnig can create big problems.

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