Blockquote: Proper way to apply style

Forum Moderators: not2easy

Message Too Old, No Replies

Blockquote: Proper way to apply style

when having multiple occurrences with different attributes

myrrh

12:43 am on Sep 24, 2012 (gmt 0)

I want to use the blockquote tag in multiple locations on a site. Not all occurrences will have the same attributes - i.e. on one page the width may be 600px on another it may be 400px.

How much of the styling should be on the stylesheet and how much should be on the HTML document?

For instance, I thought about doing this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<blockquote style="width: 400px;">

...but then what if later I decide I want to change other attributes (background color, border, etc.) - should I just continue with additional declarations in-line?

rainborick

12:55 am on Sep 24, 2012 (gmt 0)

Generally, you should avoid inline styles as much as possible and rely on your stylesheet to apply style settings. Use an 'id' attribute to allow settings that are unique to a particular instance of your <blockquote> element, and 'class' for those that will be shared by several different instances. But by handling everything in your stylesheet, if nothing else, it has the advantage of keeping all of your settings in one place even when the changes affect several different pages. When you have some inline styles and some in the stylesheet, it's easy to make mistakes.

myrrh

2:25 am on Sep 24, 2012 (gmt 0)

Thanks, that makes sense.

Perhaps there is a more appropriate element I should be using than a blockquote.

What I want to achieve is a "box" for the purpose of making a block of text stand out from the surrounding body text. The box would have a border and a background that is a different color than the background on the rest of the page.

So, is a blockquote appropriate or should I be using something else?

phranque

2:47 am on Sep 24, 2012 (gmt 0)

you should use the <blockquote> element for it's intended semantic purpose.

http://www.w3.org/TR/html-markup/blockquote.html [w3.org]:

The blockquote element represents a section that is quoted from another source.

for what you are describing i would use a <p> element if it's a paragraph or a <div> element if you need a more generic container.

and i would definitely use external styles as described by rainborik.

kemcar

6:07 am on Sep 24, 2012 (gmt 0)

I too suggest that you use your style sheet settings to add style to your work rather than using inline styles as by doing this you lessen the risk of making mistakes.