CSS Boxes Tutorial
If you design a website that incorporates CSS in the code, you need to know about the box model that CSS uses. Every element in a website is considered a box of one sort or another, and CSS allows you to alter the appearance and configuration of boxes in ways that plain HTML cannot match. Using CSS to edit your site's boxes, you can completely alter the appearance and even layout of the site by only changing a few small parts of the code itself.
Other People Are Reading
Instructions
-
-
1
Create a new, blank HTML document in a word-processing program such as Notepad.
-
2
Enter the standard tags needed for an HTML document into the document. These are the HTML head and body tags, and in the correct order they should look like this: <html><head></head><body></body></html>.
-
-
3
Add a number of blank lines in between the body tags. This is where you will put the code for your test box.
-
4
Create a box with text in it by adding the following code:
<div>test text</div>
You can replace "test text" with anything you want. If you open the HTML document in a browser now, you will see the text in the box, but the box itself will be invisible.
-
5
Add the following code:
style=""
in the opening div tag, in between the div and the closing bracket. It should look like this:
<div style="">test text</div>
This style attribute allows you to insert CSS code within the HTML div tag to affect the box. All the rest of the code you will add should go in between the quotation marks.
-
6
Add the following code:
background-color:yellow
to the style attribute. This changes the background color of the box, so if you open the document now, you will see your test text in a yellow box.
-
7
Add a semicolon after your color code and add the code
border:solid
to the style. This adds a solid black border around the box, making it slightly larger. CSS box borders always go on the outside of their boxes. You can also add a space after the word "solid" and include a width measurement, such as 5px, or a color name, or both, to alter the appearance of the border.
-
8
Add a semicolon after your border code and add the code
padding:5px
to the style. A box's padding is invisible space in between the edges of the box and the actual content within the box. Making the padding size larger will make the box itself bigger, as it has to accommodate more empty space inside of it around the text.
-
9
Add a semicolon after your padding code and add the code
margin:20px
to the style. The margin is similar to padding, but whereas padding is empty space inside the box, the margin is empty space around the box. The larger the margin, the further away from everything around it the box will get.
-
10
Experiment with different numbers in your border, padding and margin codes to see how they affect the overall appearance of the box. Every box you edit with CSS automatically has these three components as well as the content itself, but if you do not define their appearance in the code, they have a size of zero and will be invisible.
-
1
