CSS Basics

Today we're going to continue our adventure about the box model. We covered the box model and the margin property but we still need to cover padding and border properties!

If we recall that margin > border > padding > content... Margins are always invisible, Borders can be any color we'd like them to be, and padding will be the same color as the background-color of the element.

Border Property

The border property defines the border around an element. Using this border property we can have a border around anything we'd like. We can have the following properties:

1. border-top
• border-top-color
• border-top-style
• border-top-width
2. border-right
• border-right-color
• border-right-style
• border-right-width
3. border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
4. border-left
• border-left-color
• border-left-style
• border-left-width
5. border – all-inclusive

Consider the following code:

p.top-border {
     border-top-color:#ff9300;
     border-top-style:solid;
     border-top-width:1px;
}

So this would only apply to p elements with the class attribute of "top-border", we know that much! This particular element would have a top border of #ff9300 (Atomicpages orange!), a border-style of solid (there are no breaks or spaces), and a border width of 1px since we want it to be thin.

This is how it would look like if we tried this. The more we type the longer the border becomes. It almost appears as if the text above is really being underlined but this is the border-top property.

For every border property there exists a short-hand way of adding styles to our borders. We can very well type border-top-width, border-top-style, border-top-color every instance we want to use this. We know exactly what the border is doing without having to guess or anything. This can take time, however. We can shorten the example above by doing the following:

p.border-ex {border-top:width style color;} /*Syntax*/
p.top-border {border-top:1px solid #ff9300;}

This is far more efficient and a much faster way of adding border styles to our elements! It is more confusing and might take some time to get used to. If you're comfortable using the long-hand method then stick to what you're comfortable with. If you prefer short-hand methods then use those, bear in mind that the short-hand method does exist and it readily available.

border-width

The first value/property we should define in our border should be the width of our border. There are built in values that we can use or we can define our own. Here are the values we can have:

1. thin — approx. 1px
2. medium — default value
3. thick
4. px, em, pt, etc

This is a thin border, This is a medium border, This is a thick border,

This is a border with 15px as the value..

Why we would want a border with 15px is beyond me, but for the sake of this example it is fine.

border-style

There are a lot of styles for borders, here are the styles you can have:

That is a lot of styles indeed! We won't go over every single style in this tutorial. I will, however, add a downloadable that will contain these styles! Note: the 3D style borders, it depends all on the color you pick. Some colors will look nice and some color will not look nice at all!

border-color

The border color property works the same as the background-color property. You can choose any color you would like your border to be. You may use built in colors (e.g. reg, green, blue), HTML Color Codes, or RGB Values to use your colors.

border-color:red; /*Color value*/
border-color:#ff9300; /*Hex Value*/
border-color:rgb(51, 255, 0); /*Decimal Value*/

All-Inclusive

The all-inclusive border property works the same as most other all-inclusive properties. It saves time but makes the code a little more confusing. The syntax you should use is like the following:

border:width style color;
border:1px solid #ff9300;

If you want to see these examples in action then click on the green download button below!

border.zip
Size: 3.25 KB

So the Basics of CSS saga continues! In this basics tutorial, we're going to talk about the very interesting box model!

The Box Model

All HTML elements can be considered to have an invisible box around them (assuming you have no borders or padding). Consider the following:

<p style="background-color:green; color:#fff;">Some text here</p>
<p style="color:#fff;">Some more text here</p>

Let's try it! This is some text and this is some more text.

So where's this box?! Well... This HTML element is actually surrounded by margins, borders, padding, and the actual content. This box model is illustrated by the background we created. We can see the "box" around the content portion of the box.

As we can see by this picture, we have our margins, borders, padding, and content. That is what every HTML element is surrounded by. Most browsers, by default, will automatically keep the margins, borders, and padding of content at zero..

body, html {
     margin:0;
     border:0;
     padding:0;
}

So those three properties are values are essentially understood by some browsers. Now, to clarify for every browser, you should include these first and foremost in your CSS document — before everything else.

What is what?

1. Margins — can be thought as an always invisible area around the border.
2. Border — can be different styles, colors, and thicknesses and it is the area that surrounds the padding.
3. Padding — is the area around the content and it is relative to the background color of the box. So if your box is set to blue then the padding will also be blue.
4. Content — the content is well, content. Text, images, links, lists, all of that good stuff!

Great! Now we know all about this box model but what use is it? Well in order to correctly set the size of an element you actually need to be aware of this box model.

Height and Width

So why is it so crucial to be aware of this box model? Well, when you define the height it width of an element you're only defining the height and/or width of the content of the box model. So if you decide you want to add margins and some padding to an HTML element you can calculate the real width and real height.
Consider the following:

selector {
     width:500px;
     height:250px;
     padding:20px;
     margin:25px;
     border:5px solid #470b0b;
}

So let's calculate the real width and real height!

Width

500px (width) + 40px (left and right padding) + 50px (left and right margin) +
10px (left and right borders) = 600px total width

Height

250px (height) + 40px (top and bottom padding) + 50px (top and bottom margin) +
10px (top and bottom border) = 350px total height.

So why does this matter in the end? It's good to know the exact height and width of an element because if your webpage or a particular area within a webpage is dependent on being a certain height then you'll want/need to know the exact height of other elements to make sure your web page is exactly how you intend. Sometimes elements can overlap, move in extreme places, and other assorted nasty things when you don't know this real width and real height.