MaraHTML
Coding resources, tutorials and more.
CSS Boxes
Share this page:
CSS treats every element as if it lives in its own box.
Dimensions
By default a box is just big enough to hold its contents, but if you want the size to be different you can use the width and height properties. These can be specified pixels, percentages or ems.
Pixels allow you to accurately control size. I'd recommend these for club layouts.
When you use percentages the size of the box is relative to the the size of the browser window, or if it's within another box, it's a percentage of the size of that box.
div {height: 150px; width: 400px; background-color:#9C3F6B}
p {height: 50%; width: 50%; background-color:#30B8C6;}
Tu quoque, Brute, fili mi, nihil timor populi, nihil!
When you use ems, the size of the box, is based on the size of the text.
p {height: 2em; width: 30em; background-color:#F7D79D;}
Curabitur est gravida et libero vitae dictum.
Limiting Width and Height
Sometimes it's useful to make sure elements of your layout never get smaller or larger than a certain size.
div {min-width: 100px; max-width:200px; min-height: 50px; max-height;}
Borders
Every box has a border, by default though it's not visible.
Border width
By default the border width is medium.
p {border-width: 2px;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
p {border-top-width: 2px; border-right-width: medium; border-bottom-width: thick; border-left-width: thin;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
Border Style
By the default the border style is none therefore, this property needs to be specified in order for your border to show.
p {border-style: solid;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
p {border-top-style: dashed; border-right-style: dotted; border-bottom-style: double; border-left-style: groove;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
p {border-top-style: ridge; border-right-style: inset; border-bottom-style: outset; border-left-style: none;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
Border Color
By the default the border color is black.
p {border-color: #05AB5A;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
p {border-top-color: #EE145B; border-right-color: #C11926; border-bottom-color: #7C422C; border-left-color: #3C15A7;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
Border Shorthands
You can specify the top, right, bottom and left (in that order) in one property for width, style and color.
p {border-style: dotted dashed none solid;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
The border property allows you to specify the width, style and color (in that order) of a border in one property. If you leave the color part blank, it'll use the default (black).
p {border: 3px dotted #4AC600;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
Border Radius
The border-radius property is used to create rounded corners on a box.
p {border-radius: 10px;}
Magna pars studiorum, prodita quaerimus.
For more complex shapes you can specify distances for both the horizontal and vertical components. You can also target just one corner using individual properties.
p {border-top-left-radius: 80px 30px; border-bottom-left-radius: 20px 10px;}
Magna pars studiorum, prodita quaerimus.
Padding
The padding property allows you to specify how much space is shown between the content of an element and the border of the element. This can be specified in px, ems or percentages.
p {padding: 10px;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
Like with the border property you can specify just padding-top, padding-right, padding-bottom and padding-left. You can also list all 4 values in the padding property.
Margin
The margin property allows you to specify the gap between elements. This can be specified in px, ems or percentages.
p {margin: 15px 0px 35px 0px;}
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
Morbi fringilla convallis sapien, id pulvinar odio volutpat. Pellentesque habitant morbi tristique senectus et netus.
Like with the border and padding properties you can specify just margin-top, margin-right, margin-bottom and margin-left. You can also list all 4 values in the margin property.
Overflowing content
Sometimes the content of a box is larger than the box itself. The overflow property tells the browser to what to do in this event.
The hidden property simply hides and content that doesn't fit in the box.
p {overflow: hidden;}
The scroll property adds a scrollbar so users can scroll to see the extra content.
p {overflow: hidden;}
Paullum deliquit, ponderibus modulisque suis ratio utitur. Tu quoque, Brute, fili mi, nihil timor populi, nihil! Mercedem aut nummos unde unde extricat, amaras. Cras mattis iudicium purus sit amet fermentum. Quae vero auctorem tractata ab fiducia dicuntur. Cum ceteris in veneratione tui montes, nascetur mus.
Alignment
In CSS, several properties can be used to align elements horizontally.
-
Block elements can be center-aligned by setting the left and right margin properties to auto.
p {margin-left: auto; margin-right: auto; width: 70%; background-color: #C3746D;}
Gallia est omnis divisa in partes tres, quarum. Ambitioni dedisse scripsisse iudicaretur.
-
Another way of aligning elements is to use the float property.
p {float: right; width: 300px; background-color: #b0e0e6;}
Gallia est omnis divisa in partes tres, quarum. Ambitioni dedisse scripsisse iudicaretur.