Frontend Engineering, Volume II

CSS: Example 2a—Try Border Styles

© 2013, Martin Rinehart

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

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.

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 divs

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

Style the spans

First, style the try class.

And then style the individual borders.

Add a border-style rule for each span.

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.




Feedback: MartinRinehart at gmail dot com

# # #