CSS Tips and Tricks

Just remember to use filters like using spices in cooking. A small amount can make the dish but too much will spoil the meal.
Brent VanFossen, nature photographer

To showcase the different techniques, tips, and tricks we’re using for these and our many CSS experiments, many of our examples feature the style codes inline, or inside the HTML tag as if this was the only tag within your website being modified like this. It is preferable to remove this style or presentation code and set it up in a style tag or linked stylesheet using divisions and classes. We only use this technique of inline styling in our own pages when a unique effect is needed. For more information on linking CSS style sheets, visit our introduction page to our style sheet design and layout.

If you are new to CSS, the following are more articles we’ve written to help you learn more about how CSS works in web page design:

• CSS – The Things You Need To Know
• Understanding CSS Selectors and Attributes
• CSS Unleashed – Experiments Putting It All Together
• CSS Book Recommendations
• CSS Unleashed – Experiments Putting It All Together
• CSS Experiments – How They Were Done and More
• CSS Unleashed – Experiments with CSS Designs

CSS Simple Text-to-Boxes Fun

Before we get to the more serious fun, like our CSS Experiments, let’s look at some simple ways you can jazz up your design without a lot of special bells and whistles. One of the easiest things to do to highlight some content is to give it a background color. This can be done within the text.

This is normal text and this is highlighted text and we are back to normal.

<p>This is normal text and <span style=”background:yellow”>this is highlighted text</span> and we are back to normal.</p>

While not a filter, the background declaration can create some interesting effects with text. We can improve this by adding some space on either side of this is highlighted text with a padding declaration.

<p>We can even improve this by adding some space on either side of <span style=”background:yellow; padding-left:10px; padding-right:10px“>this is highlighted text</span> with a padding declaration.</p>

This can also be done by giving a background color to any container box such as this paragraph:

This is a simple paragraph of content set with a background color. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want, as seen in our many CSS Experiments and design element examples.

<p style=”display:block; width:50%; padding:5px; border:none; background:#99CCCC; color:#000066″>This is a simple paragraph of content set with a background color. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want.</p>

Going back to the highlighted text created by adding a background span, we can add a border to the span’s style so the highlighted text features a box effect.

…the span’s style so the <span style=”background:yellow; border:1px solid blue; padding-left:10px; padding-right:10px”>highlighted text</span> features a box effect.</p>

Let’s use the same technique on the paragraph:

This is a simple division with a background color and a border. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want.

<p style=”display:block; width:50%; padding:10px; border:1px solid blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a border. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want.</p>

We’ve moved from highlighting text with a background effect to creating boxes. Did you make the transition without trouble? Understanding that everything in CSS and HTML is “in a box” – held in check by containers – we have a sense of the possibilities. Let’s do some more CSS experiments with one of those boxes.

To introduce you to the concept of containers and divisions, let’s simply replace the paragraph tag with a division tag and change the border from a thin solid line to a double line.

This is a simple division with a background color and a double line border.

<div style=”display:block; width:50%; padding:5px; border:8px double blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>double line</b> border.</div>

A border effect you see on many blogs uses dots to line its border. These are no different from the ones we’ve just been playing with, though we changed the background color to a light blue so the border is more evident.

This is a simple division as shown before but this time featuring a thin 1px dotted line border.

<div style=”display:block; width:50%; padding:5px; border:1px dotted blue; background:#CCCCFF; color:#000066″>This is a simple division as shown before but this time featuring a thin 1px <b>dotted line</b> border.</div>

Let’s keep going with some of our container experiments.

This is the same division with a thicker (3px) dotted line border.

<div style=”display:block; width:50%; padding:5px; border:3px dotted blue; background:#CCCCFF; color:#000066″>This is the same division with a thicker (3px) <b>dotted line</b> border.</div>

This is also the same division with a thicker (5px) dotted line border.

<div style=”display:block; width:50%; padding:5px; border:5px dotted blue; background:#CCCCFF; color:#000066″>This is also the same division with a thicker (5px) <b>dotted line</b> border.</div>

The dotted line and the following dashed lines are simple to create and their look can change based upon the width of the border. In the next examples, we’ve used a dashed line with different widths and changed the background color to show the effect dark blue text has on different colored backgrounds.

This division features a soft light blue background color (#ccffff) and a thin (1px) dashed line border.

<div style=”display:block; width:50%; padding:5px; border:1px dashed blue; background:#CCFFFF; color:#000066″>This division features a soft light blue background color (#ccffff) and a thin (1px) <b>dashed line</b> border.</div>

This division features a soft light yellow background color (#FFFF99) and a medium (3px) dashed line border.

<div style=”display:block; width:50%; padding:5px; border:3px dashed blue; background:#FFFF99; color:#000066″>This division features a soft light yellow background color (#FFFF99) and a medium (3px) <b>dashed line</b> border.</div>

This division features a soft light green background color (#ccff99) and a thicker (5px) dashed line border.

<div style=”display:block; width:50%; padding:5px; border:5px dashed blue; background:#CCFF99; color:#000066″>This division features a soft light green background color (#ccff99) and a thicker (5px) <b>dashed line</b> border.</div>

There are currently thousands of colors and 10 different border styles you can choose from:

• none
• hidden
• outset
• inset
• groove
• ridge
• solid
• double
• dotted
• dashed

The border styles “none” and “hidden” aren’t visually pleasing but they have their purposes. We’re going to continue to concentrate on the visually pleasing choices. We’ve seen a thin solid and played with dotted and dashed, so let’s see what else we can come up with.

Just as dotted and dashed are related in style, groove and ridge are related.

This is a simple division with a background color and a ridge line border.

<div style=”display:block; width:50%; padding:5px; border:8px ridge blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>ridge line</b> border.</div>

This is a simple division with a background color and a groove line border.

<div style=”display:block; width:50%; padding:5px; border:8px groove blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>groove line</b> border.</div>

They can also be used in combination for a different effect.

This is a simple division with a background color and a groove line and ridge line using different colored borders.

<div style=”display:block; width:50%; padding:10px; border-left:10px groove #66CCFF; border-right:10px ridge blue; border-bottom:10px groove #66CCFF; border-top:10px ridge blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>groove line</b> and <b>ridge line</b> using different colored borders.</div>

Solid borders can also be interesting, if you play with complementary or contrasting colors with the background. Play with the width for more accent, too, as you move from these examples to your own CSS experiments.

This is a simple division with a contrasting background color and a 20px thick purple border.

<div style=”display:block; width:50%; padding:5px; border:20px solid #9900CC; background:#99CCCC; color:#000066″>This is a simple division with a contrasting background color and a <b>20px thick purple</b> border.</div>

 

This is a simple division with a complementary background color and a 40px thick dark blue border.

<div style=”display:block; width:50%; padding:5px; border:40px solid #6666CC; background:#99CCCC; color:#000066″>This is a simple division with a complementary background color and a <b>40px thick dark blue</b> border.</div>

Here is another CSS experiments technique that takes advantange of the background color like we tried in the beginning. It uses a paragraph inside of a container box and both the container and the paragraph have a background color. The padding declaration creates a “margin” around the paragraph allowing the background color of the parent container to be visible, appearing to look like a border.

This is the parent container with a colored border and background color.

 

This is the paragraph container that will sit inside of the parent container with no border and a background color.

Now, let’s put the two together:

The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible.

<div style=”width:50%px; border:10px solid navy; background:blue; padding:10px“>
<p style=”background:lightblue“>The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible.</p>
</div>

Now, let’s take this another step forward and add a border to the paragraph tag and create a “deeper” border effect.

The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible. Then we added a border of medium blue around the paragraph to add depth.

<div style=”width:50%px; border:10px solid navy; background:blue; padding:10px”> <p style=” border:10px #3399FF solid; background:lightblue”>The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible. Then we added a border of medium blue around the paragraph to add depth.</p></div>

There are two more border styles to play with: inset and outset.

This is a simple division with a background color and an inset line border.

<div style=”display:block; width:50%; padding:5px; border:10px inset blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and an <b>inset line</b> border.</div>

This is a simple division with a background color and an outset line border.

<div style=”display:block; width:50%; padding:5px; border:10px outset blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and an <b>outset line</b> border.</div>

CSS Containers and Borders – Links and Resources

• JQJacobs’ Cascading Style Sheets – Explanation
• Overview of Cascading Style Sheets
• Putting on the Style – an Introduction to the Box Model
• W3.org’s CSS-2 Box Model
• W3.org – CSS-2 Visual Formating Model

CSS Border Effects

• W3 Schools – CSS Borders
• CSS Graphics by Borders – Examples of art created using border effects *****
• CSS Border Style Values ***
• Code_Punk’s Advanced CSS Lesson 2: Borders
• 80Four’s CSS Borders
• Tizag’s CSS Borders
• Mandarian Design’s CSS Boxes ***
• Stu Nicholls’ CSS Colored Borders – Understanding Browser Interpretations
• So, You Want Info On… CSS and Borders, Huh?
• HTMLSource: CSS and Borders