Original Code

The CSS listed below is a slight variation of the CSS I used for the quote box in this layout. As you can see the CSS that controls even a small part of the design can become quite lengthy. When you add in the rest of the typography and structure and the CSS can look overwhelming.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background-color: #300;
border: solid 1px #333;
-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
}

Break It Down

• CSS for the text color color: #ffc;
• CSS for the font-size: font-size: 3em;
• CSS for the font-family: font-family: Baskerville, Garamond, Palatino, Georgia, serif;
• CSS for the font-weight: font-weight: bold;
• CSS for aligning text: text-align: center;
• CSS for the text-shadow: text-shadow: 2px 2px 2px #000;
• CSS for the background color for the paragraph: background-color: #300;
• CSS for the border around the paragraph: border: solid 1px #333;
• CSS for the text shadow: text-shadow: 2px 2px 2px #000;
• CSS for the shadow around the paragraph box:
  -moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
• CSS for making rounded edges around the paragraph box
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
• Code for the padding between the text and the edge of the box padding: 5px

Only Use the CCS You Really Need

Taking Out the CSS3

If you need to design a site that looks the same in all browsers you need to take out the CSS3 which is not yet universally supported most notably by Internet Explorer. Below is the CSS without the CSS3. While CSS3 has some wonderful uses the fact it exists does not mean one always needs to use it. Look at your design and decide whether it really does need a drop shadow for the box, a shadow for the text, and rounded corners. Having made quote boxes before in some case the CSS3 helps. In other cases a drop shadow can easily be eliminated without sacrificing clarity and for some designs sharper edges look better than round ones.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
background-color: #300;
border: solid 1px #333;
padding: 5px;
}

Reevaluate the Necessities

• Does the font need to be bold or is the font you are using thick enough that you can remove font-weight: bold
• Should the text be aligned to the center? Sometimes in narrow columns left aligned text is better and, thus, you can leave out text-align: center.
• If all you want is a drop quote you do not need background-color: #300; or border: solid 1px #333;
• For the box shadow in the original code, rgba was used in order to adjust opacity. If you prefer hex and are not adjusting opacity then use hex.

In Conclusion: Other Methods to Handle CSS

Often the best design or the best design for an element is complicated and takes a substantial amount of CSS to accomplish. There are a lot of websites and it pays (often literally) to stand out. However, especially when you are starting out vast amounts of CSS can be intimidating. Comments in the CSS file help and the more experience you have the more you can easily find the specific CSS you needed. Clearly laid out CSS also helps. However, even with these additional tricks for both the design itself and your own sanity in dealing with the CSS it is a good idea to break down the CSS you have and only use what you actually need.