22 replies [Last post]
c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

I did do a search but for some reason I am not finding what I am trying to figure out.

If I wish to quote a paragraph of text, how do I do this with css and how to style it? Any links to information would be greatly appreciated.

Thanks in advance.

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

How to quote text with css?

sorry i'm a bit confused. do you want to quote the text in your css file or your html one? are you asking how to do it in your html file and then style it with css??

larmyia

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

larmyia wrote:
sorry i'm a bit confused. do you want to quote the text in your css file or your html one? are you asking how to do it in your html file and then style it with css??

larmyia

Yes, text in the html file needs to be quoted and styled, sorry, apologize for the confusing post, mind is in a million different areas trying to find an answer to this one.

I am finding pull quotes, which don't seem to be what I want, the other is blockquote.

I have some text that is quoted with a link to the site, this is what I need styled, as welll as how do I do this in the xhtml? (I use xhtml strict)

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

How to quote text with css?

I think what you want is

<blockquote>
<p>here is a long quotation here is a long quotation</p>
</blockquote>

then in your css style it like you would <p> or <h1>

blockquote {color: red;}

oh, and put your link in the quote like you would normally within a xhtml page.

does that help??

larmyia

btw that blockquote is for a long quote. for a short one use <q> as in

<q>here is a short quotation here is a short quotation</q>

this will need to be completely styled as the browser won't do anything with it (unlike blockquote which will create white space on both sides of the text).

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 34 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

How to quote text with css?

Modern browsers properly add quotation marks around the content within the <q>...</q> tags. IE doesn't. See a problem?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

Ok, thanks, I wasn't sure if it was blockquote that I needed to use.

Now, when you quote text, should it be in italic? Or will the block quote automatically take care of it?

Here is one of the quotes that I need to quote
"Chronic pain is widely believed to represent disease itself. It can be made much worse by environmental and psychological factors. Chronic pain persists over a longer period of time than acute pain and is resistant to most medical treatments. It can-and often does-cause severe problems for patients.
The above is quoted from:
http://www.medicinenet.com/chronic_pain/article.htm"
Is this the proper way to do this?

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to quote text with css?

Just to confuse things further there is the cite tag to be considered as well in there somewhere on occasion Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

Hugo wrote:
Just to confuse things further there is the cite tag to be considered as well in there somewhere on occasion Smile

Hugo.

Yes, I did run into this.

Oh man, you have me sooo confused now hugo ;>)

edit:
Ok, so is the cite actually more accurate for me to use for this?

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to quote text with css?

Your confused ! I live in a permanent state of confusion Smile

Larmyia has shown the correct way to use the blockquote, it's appropriate for the amount of text your quoting; <q> is really for inline nested quotes yours is a single quoted paragraph.

The W3C would say you marked it up like this:

   
<blockquote cite="http://www.medicinenet.com/chronic_pain/article.htm">
<p>   
"Chronic pain is widely believed to represent disease itself. It can be made much worse by environmental and psychological factors. Chronic pain persists over a longer period of time than acute pain and is resistant to most medical treatments. It can-and often does-cause severe problems for patients".   
<cite>The above is quoted from:   
<a href="http://www.medicinenet.com/chronic_pain/article.htm">
http://www.medicinenet.com/chronic_pain/article.htm</a></cite>
</p>   
</blockquote>   


The W3C adds the cite as an attribute to the opening blockquote tag

I have added cite tags around your "the above is quoted from" as this is a citation and will be styled in italic by most UA I think , and
which may or may not need it's own <p> tags or <br> if one wanted it on it's own line.

The blockquote itself does not need to be italic, it's not a given that quotes should be italics, but this is a difficult area with many opinions and methods, it's the arcane world of typography.

It's a shame about the <q> tag as the specs say that UA should render the tag with the appropriate quotation marks as defined by the lang= attribute and that authors should not include these marks themselves; but as Gary says IE ignores the required formatting altogether and sadly Firefox does not get it right either by placing double quotes on nested quote tags instead of single quotes .

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

How to quote text with css?

so it'd be something like:

<blockquote><p>"Chronic pain is widely believed to represent disease itself. It can be made much worse by environmental and psychological factors. Chronic pain persists over a longer period of time than acute pain and is resistant to most medical treatments. It can-and often does-cause severe problems for patients. 
The above is taken from:
<cite><a href="http://www.medicinenet.com/chronic_pain/article.htm">medicinenet.com</a></cite>"</p></blockquote>

???

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

How to quote text with css?

Hugo wrote:

I have added cite tags around your "the above is quoted from" as this is a citation and will be styled in italic by most UA I think , and
which may or may not need it's own <p> tags or <br> if one wanted it on it's own line.

do you think that the cite should start from "the above..."? hrm. I thought it was the text/person your are actually citing...

larmyia

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to quote text with css?

Er , your probably right I'm the last person to hold fourth on typography and conventions of print really; although I have always had an interest in the subject I find that it's a minefield for differing ideas and conventions both through the ages and across continents, the use of italic type being one of those confusing areas.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

Ok this is how I did it, as I tried the cite, but it didn't show the url? Not sure if it was something I did (maybe in the state of confusion?) Laughing out loud

Quote:
<h3>Chronic Pain</h3>
<p>Quoted taken from:
<a href="http://www.medicinenet.com/chronic_pain/article.htm">Medicinenet</a></p>
<blockquote><p>
"Chronic pain is widely believed to represent disease itself. It can be made much worse by environmental and psychological factors. Chronic pain persists over a longer period of time than acute pain and is resistant to most medical treatments. It can-and often does-cause severe problems for patients."
</p></blockquote>

Oh, and in my styles I did create the blockquote to show up as italics. It was my understanding that quotes should be in italics to set them off as a different part of the text? But then when it comes to grammitical correction, that isn't my strong point.

And in homesite I ran a validation, and it seemed to validate, but then I haven't loaded it up to validate the url yet, so it could fail?, with the quotations within?

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

How to quote text with css?

c1sissy, it worked and validated when I used the one I posted above.

where did you actually put the <cite> tags??

larmyia

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

I uhmmm, didn't use the cite tag. I just did the href. :roll:

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

How to quote text with css?

oh, I thought you said it didn't show the url....?

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

When I used the cite, I couldn't get it to put up the url for me.

Ok, here is the test page for now
http://fmsforum.debsplace.org/revamptemplate3c.html

Any critiques of the css would be more then welcome.

I have to get some adsense in here now to see how this holds up.

btw, thanks for the help everyone. I have yet to have to place in a quote, other then trying out a pull quote? type of thing, and I wasn't too satisfied with that one.

btw I have two interesting tools that you guys/gals might be interested in.
http://www.iconico.com/colorpic/index.aspx
and
http://www.iconico.com/caliper/index.aspx

I use the color pic when I have a photo and I wish to match the colors in the web page as close as possible. The other tool, the caliper has come in handy when divs don't seem to be cooperating, I can measure them, and things around them to see if they are measuring up to what I have placed in my code. Its also great for photos and other things. There is a shareware and also a freeware version of the caliper.

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

How to quote text with css?

I'd personally put the source after the quote and align it right (that's the way I do it usually when laying out printed material).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

Hmm, after the quote? I had it that way first, but wasn't so sure that it looked ok that way.

btw,thanks for the imput, I appreciate it greatly.

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to quote text with css?

It's more common to cite the source or author on the bottom right; it is not so cluttered allowing the quoted text to flow without interruption.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

c1sissy
c1sissy's picture
Offline
Regular
nj
Last seen: 9 years 9 weeks ago
nj
Timezone: GMT-4
Joined: 2003-06-15
Posts: 37
Points: 0

How to quote text with css?

Thanks Hugo, so I just move the source to the right?

off to do so.

Any clues as to why my adsense links aren't working on the left column? I emailed google, just waiting for their reply.

c1sissy

^i^

The only stupid question is... the one that is never asked!!

http//directory.css-styling.com
http//fms-forum.com

briski
briski's picture
Offline
Elder
London
Last seen: 7 years 22 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

How to quote text with css?

There is a nice bit about quotes and cites to be found here, probably a bit more detail than is needed but it's a nice reference.

http://www.456bereastreet.com/archive/200411/quotations_and_citations_quoting_text/

Alas it's all a thorny issue thanks to IE I fear.

larmyia
Offline
Elder
London
Last seen: 11 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

How to quote text with css?

interesting article briski. I was looking for something like that yesterday.

larmyia