Comments (3)

By Leora Wenger, December 3, 2009 11:40 am

If you like to play with colors, padding and borders, it’s easy to get boxes like these:

I use these boxes when I need to highlight some links or make a header stand out. One just has to get a hang of what the code should be, then one can tweak it for one’s own needs. You can use these at the top of a post or as a box to highlight links.

Learning the Code

Let’s take a look at the code for that top box. You will notice two div tags, one wrapped inside the other:

The above is done with inline code. A better approach is to separate the HTML from the CSS – so it’s easier for you to see what is going on. You can then use the CSS code over and over again. And you will also discover that the two boxes have similar HTML markup:

In the second box, the yellow with red borders, I inserted a <ul> tag with <li> links in the middle:

The CSS Code

Here is the CSS code for the blue box, which you should save to your stylesheet (if you use WordPress, it’s styles.css):

The code for the red and yellow box with links is only a slight variation of the blue box. You will need to add some code for the ul and li tags:

If you want both box versions in your stylesheet, name the classes for one of them something other than myinner and myouter.

Note: if you want this to work in your WordPress theme’s styles.css, you may have to put the post classes before the .myinner and .myouter to get this to work. This is what worked in my styles.css:

Curves: The Next Challenge

If you want to add curves, read some of these wonderful posts:

• CSS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients
• 5 Methods for CSS Curvy Corners
• 12 Really Useful CSS3 Tips And Techniques

Need More Basic? Intro to CSS Links

• CSS Tutorial
• Starting with HTML + CSS

Popularity: 12% [?]