I have a bunch of Web pages that I’m poised to publish and many of them have quotes. Problem is, the quoted sections don’t look any different than the rest of the text. Is there a way in HTML or CSS to make some paragraphs look better than the text around them?
There are so many options using HTML 5 and CSS to format and improve the appearance of quotes on your Web page – or even within a blog post – that we could go on for hours with different tweaks and fancy tricks. But even at its most basic, there’s an old-school HTML tag intended specifically for quotes that might just improve things all by itself. That’s the <BLOCKQUOTE> tag and even if it ends up looking the same, identifying the passages and quotes you want to have be more visually interesting with this tag sets you up for subsequent improvements.
The real win with CSS, or Cascading Style Sheets, however, is that once you have your HTML all coded properly, you can have a block of CSS at the very top of your page that will then apply to every quote on that page. Heck, you can save the CSS to its own file, include that at the top of every page, and have a single change apply to every quote on every page of your site. That’s how the pro Web developers can be so efficient in updating sites with dozens, hundreds, even thousands of Web pages.
USING <BLOCKQUOTE> WITH WEB CONTENT
Let’s start at the beginning. I have a brief passage from 20,000 Leagues Under the Sea by Jules Verne to work with, and I’ve separated out each paragraph with <P> and </P> to denote that they are all paragraphs. Here’s how that looks without any fancy formatting applied:
Pretty basic stuff. Let’s turn those <P> tags into <BLOCKQUOTE> tags and see how things change:
You can see my formatting is rather old-school HTML, with everything in lowercase. So the lines in question are </p><blockquote> before the quote and </blockquote><p> afterwards.
What does turning the paragraph into a blockquote do? Not much, by default:
The only obvious change is that the paragraph is now indented. The key, however, is that the paragraph that includes the quote we’re working on is now in a different container so we can change it without affecting every other paragraph of content.
ADDING BASIC CSS TO AN HTML TAG
The most straightforward way to add CSS styling to an HTML container is to add the “style=” attribute. With some rudimentary CSS, here’s what we now have:
I’ve specified a font size increase, and a new font family for this quote, “cursive”. These are all defined in the CSS specification, of course, and are all in the form style – colon -value – semicolon, as you can see demonstrated above. What do these changes do to our quote? Here’s the result:
That’s definitely a big change! You can specify a font name if you prefer, but the most portable approach is to just specify a class of font and let the user’s browser figure out what face to apply based on their preferences and what’s available.
Let’s add some color!
Since the <BLOCKQUOTE> is its own container (block of information) anything we apply to it will only affect that block, not any of those around it. In the above, I’ve added a background color of #ffffcc (that’s red-green-blue, with FF being white and 00 being black, so this is all red + all green + most blue, if you’re curious). To ensure that the background color isn’t too close to the edges of the letters themselves, I’ve pushed out the container by adding a 15 pixel padding too. Those are specified thusly:
background-color: #ffffcc; padding: 15px;
as shown above. The result:
That style attribute is getting a bit busy, so let’s move all of the CSS to the top of the page in its own <STYLE> block!
CENTRALIZING CSS WITH A STYLE BLOCK
You can specify classes, as many developers do, but you can also apply specific formatting to standard HTML tags too. Here’s how I’ve redefined BLOCKQUOTE with all the new CSS attributes:
Notice that I’ve stripped all the CSS formatting out of the actual BLOCKQUOTE so it’s back to being regular ole’ HTML. I’ve copied everything over, but changed the background color slightly:
At this point, your options are limitless. Whatever you can specify in CSS, you can now apply to your BLOCKQUOTE container. Here are a few additional tweaks I’ll add just to show you what can be easily done:
I’ve centered the text (with “text-align:center;”) and applied a radius to the border of the container, which will round off the corners of the background color. It looks pretty cool:
That’s a big change from the initial HTML formatting, isn’t it? You can go quite a bit further too, if you want, including even having background images with the content superimposed. It’s all just CSS at this point, so go to it!
Pro Tip: I’ve been writing about HTML and CSS for years. I even wrote some books on the subject! I have a lot of tutorials on the subject, so please check out my CSS & HTML help areas while you’re here.
