Website Construction for Visual Artists

CSS Box Properties

Now we get to the really fun controls in CSS design!

Box properties are a great way to use CSS to create visual structuring and decoration -- jobs that designers used to have to rely on clumsy HTML tricks to do (with tables, in particular). Any element of your webpage can have box properties, which include:

• a border
• a background color
• padding between the border and content
• a margin between the border and other elements
• a particular size to the containing box

Really, "box properties" just means a small stack of CSS rules that gives pieces of your content the ability to be isolated and visually distinct -- whether we're talking about tiny pieces of text, or entire page columns with text+images.

For example:

h1 {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    background-color: #ff9900;
    margin: 0px;
    padding: 20px;
  }

If I have a blank HTML document with the following script

<h1>hello</h1>

I'll get this:



Right now, the orange box hugs close to its containing block (my approximation of a "page") because it is a block-level element and the margin is set to "0". Let's try this:

h1 {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    background-color: #ff9900;
    margin: 20px;
    padding: 20px;
  }

Now I'll get:



Let's go ahead and set a width and height for this <h1> box:

h1 {
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    background-color: #ff9900;
    margin: 20px;
    padding: 20px;
    width: 50%;
    height: 125px;
  }

Note that width:50% means 50% of the containing block (which I created with a <div> tag), not 50% of the whole page. Resize your browser window to see how this works.

Let's make more changes to this <h1> box:

h1 {
    border-width: 5px;
    border-style: solid;
    border-color: #ff0000;
    background-color: #ff99ff;
    margin: 10px;
    margin-left: 50px;
    padding: 20px;
    padding-top: 5px;
    width: 50%;
    height: 125px;
  }

Notice how margin-left:50px pushes the <h1> box further away from the left side of its containing block. All other margins (top, bottom, right) are unspecified, so they are subject to margin:10px.

Similarly, padding-top:5px; makes the <h1> box hug closer to the top.

It would be better to apply these box-properties to a <div> tag if I was giving this pink box to multiple pieces of content (like the <h1> header, plus additional text). For example:

div.pinkbox {
    border-width: 1px;
    border-style: solid;
    border-color: #ff0000;
    background-color: #ff99ff;
    margin: 10px;
    padding: 20px;
  }

Here's the HTML:



Here's what it renders:



If I nested the unenclosed sentences in their own <div class="pinkbox"> </div> tags, I could get this:




Btw -- there is a shorthand way to write scripting for borders in CSS. Instead of the following:

border-width: 1px;
border-style: solid;
border-color: #000000;

you could write a single declaration like this:

border: 1px solid #000000;

A thin black border is something I use often enough, so the optional shorthand method is quite handy.



Box-properties make the most sense when used with CSS-positioning (which I won't go into in this tutorial). This combo negates tables, and allows the designer to make deeper structural changes to the entire site by editing the one single external stylesheet.


Next:   CSS backgrounds           Top