Frontend Engineering, Volume II

CSS: Example 2a—Try Border Styles

We added <span>-based boxes to the examples page we made for Chapter 1. You want to try each of these border styles:

solid
double
dotted
dashed
inset
outset
ridge
groove
none

Add Elements to the Markup

Use the .HTML page from example 01e (last chapter) or create a new HTML page from your template.

Add the following divs (copy, nothing to learn from typing these) to your page.

<div class='borders' style='top: 40px;'>
    <span id='try_solid'  class='try'> Solid  </span>
    <span id='try_double' class='try'> Double </span>
    <span id='try_dotted' class='try'> Dotted </span>
    <span id='try_dashed' class='try'> Dashed </span>
</div>

<div class='borders' style='top: 60px;'>
    <span id='try_inset'  class='try'> Inset  </span>
    <span id='try_outset' class='try'> Outset </span>
    <span id='try_ridge'  class='try'> Ridge  </span>
    <span id='try_groove' class='try'> Groove </span>
</div>

<div class='borders' style='top: 80px;'>
    <span id='try_none'   class='try'> None   </span>
</div>

Note that we have both classes and IDs for the spans. We'll use the class for the common styles, the IDs for the unique styles. We also style the divs.

Add Styles to the Embedded Style Sheet

We'll need two classes. One for the divs and another for the spans. We add this in alphabetical order in the existing classes.

Style the `div`s

Add styles for the border_divs class. Typing would be good. You want to know these styles.

    .border_divs {
        background-color: white;
        display: block;
        left: 50px;
        position: relative;
    }

Style the `span`s

First, style the try class.

    .try {
        background-color: #e0c8c0;
        border-color: #909080;
        display: inline-block;
        margin-right: 20px;
        padding: 10px;
        position: relative;
        width: 60px;
    }

And then style the individual borders.

Add a border-style rule for each span.

    #try_solid  { border-style: solid;  }
    #try_double { border-style: double; }
    #try_dotted { border-style: dotted; }
    #try_dashed { border-style: dashed; }
    #try_inset  { border-style: inset;  }
    #try_outset { border-style: outset; }
    #try_ridge  { border-style: ridge;  }
    #try_groove { border-style: groove; }
    #try_none   { border-style: none;   }

View the Results

Your result should look like this:

Sample of nine different border styles around span elements.

Why display: inline-block? The <span> is an inline-level element. It would default to display:inline. What would happen if you used display:block? That's a good question. We're saving it for the quiz. Here's a hint:

You can use CSS comments to test various property values without doing much typing.

display:inline/*-block*/;

display:/*inline-*/block;

display:static/*inline-block*/;

Feedback: MartinRinehart at gmail dot com

# # #