Div Boxes and Border Styles

 

 

There are a lot more styles that we can apply to borders, but this time let’s make a div box. Div’s are used all the time in HTML pages and it is considered the best way to build a webpage now: Instead of tables, use div’s and floats…

A div is pretty much a box with content in it. For instance, on a web page you may have a paragraph in one div and in another div you will have an article, and you can then move the paragraphs and articles to where you would like on your page (using float) and do things such as this…

divbox
It’s quite a simple example. Let’s go through it slowly… Here is the code:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”css.css”>
</head>
<body>


Hello


This paragraph is in a div box!


And we can make funky borders.


</body>
</html>

CSS:

#box

{width: 300px; height: 300px; border-style:dotted; color:red; background-color:yellow;}

 

Firstly, as you notice, I have my HTML page linked up to my CSS page (which I have simply called css.css…exiting I know.)

In the HTML, the important parts are the div starts and endings.You have to give the div and id (or class) in order to change what it looks like…

tells the CSS sheet that anything within the curly braces of #box will be applied to this div box.

Go ahead and write what you would like to inside your div, and then end it off with simply

Now you start with the CSS… First you have to decide how large or small you want your box to be (width and height) and you need to be able to see that it is in a box.. That’s why we have added a border, in this case dotted) and the colors and background colors were just for fun.

Try creating the same box on your own. You could make the boxes different sizes by changing the pixels…You can change the colors and now here, you can change the border style to many different styles:

– Dotted
– Solid Black
– Dashed
– Double
– Groove
– Ridge
– Inset
– Outset
– Hidden
– None
…and more.

You don’t have to have the same border style all around the box. If you wanted the top and bottom of the border to be solid black and you wanted the two sides to be dotted, you can do that.

It is important to know that a div box will always go clockwise… Like this:

example

So if I do this…

#box {width: 300px; height: 300px; border-top:dotted;border-right:dashed;border-bottom:solid black; border-left:ridge; color:red; background-color:yellow;}

Then we will see this result:

dashed

There is a lot more that you can do with div’s. Of course you can have multiple div boxes but you would probably like to separate them a bit, which we will look at in the next lesson. (padding and margin.)

You can make your box have rounded corners simply by using the “border-radius:”.

Simple HTML…

Hello

CSS is a bit different…

.rounded_box  {background-color:yellow; width:200px; text-align:center;padding:50px 0px; border-radius: 25px;}

corners

Cool, right?

That’s enough for today. Great job!