Frontend Engineering, Volume II
CSS: Example 2a—Try Border Styles
© 2013, Martin Rinehart
<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
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.
Add styles for the
border_divs class. Typing would be good. You want to know these styles.
First, style the
And then style the individual borders.
border-style rule for each span.
View the Results
Your result should look like this:
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
# # #