Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • YouTube Videos
  • Top Categories
  • Subscribe via Email
  • Ask A Question
  • Meet Dave
  • Home
  • HTML & Web Page Design
  • Can CSS Make the Quoted Passages on my Web Pages Look Great?

Can CSS Make the Quoted Passages on my Web Pages Look Great?

June 6, 2022 / Dave Taylor / HTML & Web Page Design / No Comments

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:

html css formatting tricks quotes blockquote - basic html

Pretty basic stuff. Let’s turn those <P> tags into <BLOCKQUOTE> tags and see how things change:

html css formatting tricks quotes blockquote - html 1

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:

html css formatting tricks quotes blockquote - quote indents

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:

html css formatting tricks quotes blockquote - basic inline css style

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:

html css formatting tricks quotes blockquote - font change via css

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!

html css formatting tricks quotes blockquote - add background color css

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:

html css formatting tricks quotes blockquote - background color added css

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:

html css formatting tricks quotes blockquote - css block

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:

html css formatting tricks quotes blockquote - css block new background color

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:

html css formatting tricks quotes blockquote - fancy css

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:

html css formatting tricks quotes blockquote - css blockquote demo block

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.

About the Author: Dave Taylor has been involved with the online world since the early days of the Internet. Author of over 20 technical books, he runs the popular AskDaveTaylor.com tech help site. You can also find his gadget reviews on YouTube and chat with him on Twitter as @DaveTaylor.

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!
css blocks, css quotes, css tricks, fancy quotes css, html and css

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

  • How Can I Get Pinch to Zoom Working on my MacBook Air?
  • How to Save Phone Battery Life with Adaptive Connectivity?
  • Join the Microsoft Edge Beta Program, Get AI-Powered Bing!
  • Guide to Keeping All Your Mac Software Up-To-Date
  • How Can I Send My Friend a Voice Message via iMessage?

On Our YouTube Channel

EKSA E1000WT 2.4Ghz Wireless Gaming Headset -- DEMO & REVIEW

Mophie PowerStation XL 20W USB-C Charger -- REVIEW

Categories

  • AdSense, AdWords, and PPC Help (106)
  • Amazon, eBay, and Online Shopping Help (164)
  • Android Help (230)
  • Apple iPad Help (149)
  • Apple Watch Help (53)
  • Articles, Tutorials, and Reviews (346)
  • Auto Tech Help (17)
  • Business Advice (200)
  • ChromeOS Help (34)
  • Computer & Internet Basics (783)
  • d) None of the Above (166)
  • Facebook Help (384)
  • Google, Chrome & Gmail Help (188)
  • HTML & Web Page Design (247)
  • Instagram Help (49)
  • iPhone & iOS Help (627)
  • iPod & MP3 Player Help (173)
  • Kindle & Nook Help (99)
  • LinkedIn Help (88)
  • Linux Help (174)
  • Linux Shell Script Programming (90)
  • Mac & MacOS Help (916)
  • Most Popular (16)
  • Outlook & Office 365 Help (34)
  • PayPal Help (68)
  • Pinterest Help (54)
  • Reddit Help (19)
  • SEO & Marketing (82)
  • Spam, Scams & Security (97)
  • Trade Show News & Updates (23)
  • Twitter Help (222)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows PC Help (953)
  • Wordpress Help (206)
  • Writing and Publishing (72)
  • YouTube Help (47)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (62)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2023 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy