Applying Different Styles To Alternate Text ?

[vivekian]

Hi,

Have a FAQ page , where have many sets of questions and answers. The
questions need to be a different colour / style and the answers
different. Was wondering is there a easy way to do this as compared to
enclosing each question and answer within divs ? Perhaps , through
JavaScript.

Thanks in advance ..

P.S. this might be a multipost.. :(

[Beauregard T. Shagnasty]

vivekian wrote:

Have a FAQ page , where have many sets of questions and answers. The
questions need to be a different colour / style and the answers
different. Was wondering is there a easy way to do this as compared
to enclosing each question and answer within divs ? Perhaps , through
JavaScript.

Use CSS. What if the visitor has JavaScript disabled or not available?

<h1>My FAQ>
<h2>Question 1</h2>
<p>Answer for question 1</p>

<h2>Question2 </h2>
<p>You get the idea...</p>

CSS:

body { font-family: sans-serif; }
h2 { color: red; font-family: serif; }
p { color: black; }

--
-bts
-Warning: I brake for lawn deer

[Jim Moe]

vivekian wrote:

>
Have a FAQ page , where have many sets of questions and answers. The
questions need to be a different colour / style and the answers
different.

A FAQ can be considered a definition list (name/value pairs). Use CSS to
style <dtand <ddto taste.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Jukka K. Korpela]

Jim Moe <jm************ ***@sohnen-moe.comscripsit :

A FAQ can be considered a definition list (name/value pairs).

A dog can be considered a horse, but it ain't no horse. (Besides, it's not
even name/value pairs. A question is not a name.)

Use CSS to style <dtand <ddto taste.

In addition to being illogical (semantically wrong) markup, using <dlwins
nothing. It's _more difficult_ to style than simple logical markup such as
<h2for questions. (If you wish to style an answer as a unit, then you had
better make it a classed <div>, since it need not consist of a single
paragraph, and an answer can contain many different elements in succession.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jim Moe]

Jukka K. Korpela wrote:

>

> A FAQ can be considered a definition list (name/value pairs).

A dog can be considered a horse, but it ain't no horse. (Besides, it's not
even name/value pairs. A question is not a name.)

>Use CSS to style <dtand <ddto taste.

In addition to being illogical (semantically wrong) markup, using <dlwins
nothing. It's _more difficult_ to style than simple logical markup such as

Saying it is illogical does not make it so.
Name/value, term/definition, question/answer. How are these semantically
different? What is illogical about it?

<h2for questions. (If you wish to style an answer as a unit, then you had
better make it a classed <div>, since it need not consist of a single
paragraph, and an answer can contain many different elements in succession.)

<ddand <divare both flow elements. Either way <p>s, <ul>s, etc., are
required for the content.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[David Trimboli]

"Jim Moe" <jm************ ***@sohnen-moe.comwrote in message
news:hL******** *************** *******@giganew s.com...

<ddand <divare both flow elements. Either way <p>s, <ul>s,
etc., are
required for the content.

<!ELEMENT DIV - - (%flow;)* --><!ELEMENT DD - O (%flow;)* --><!ENTITY
% flow "%block; | %inline;"><!ENT ITY % inline "#PCDATA | %fontstyle; |
%phrase; | %special; | %formctrl;">So DIV and DD can both take content
without further markup (#PCDATA).David Stardate 6542.6

[David Trimboli]

"Jim Moe" <jm************ ***@sohnen-moe.comwrote in message
news:hL******** *************** *******@giganew s.com...

<ddand <divare both flow elements. Either way <p>s, <ul>s,
etc., are
required for the content.

Sorry. Let me try that again.

<!ELEMENT DIV - - (%flow;)* -->

<!ELEMENT DD - O (%flow;)* -->

<!ENTITY % flow "%block; | %inline;">

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; |
%formctrl;">
So DIV and DD can both take content without further markup (#PCDATA).

David
Stardate 6542.6

[Jim Moe]

David Trimboli wrote:

> <ddand <divare both flow elements. Either way <p>s, <ul>s,
etc., are required for the content.

Sorry. Let me try that again.

<!ELEMENT DIV - - (%flow;)* -->
<!ELEMENT DD - O (%flow;)* -->
[...]
So DIV and DD can both take content without further markup (#PCDATA).

True.
But that was not my point. Jukka claimed using a <dlwas illogical,
semantically incorrect, and more work than using a combination of <hxand
<divbecause of the layout requirements that answers to FAQs may need. I
do not see that the level of difficulty is any different.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[David Trimboli]

"Jim Moe" <jm************ ***@sohnen-moe.comwrote in message
news:Fe******** *************** *******@giganew s.com...

David Trimboli wrote:

>> <ddand <divare both flow elements. Either way <p>s, <ul>s,
etc., are required for the content.

Sorry. Let me try that again.

<!ELEMENT DIV - - (%flow;)* -->
<!ELEMENT DD - O (%flow;)* -->
[...]
So DIV and DD can both take content without further markup
(#PCDATA).

True.
But that was not my point. Jukka claimed using a <dlwas
illogical,
semantically incorrect, and more work than using a combination of
<hxand
<divbecause of the layout requirements that answers to FAQs may
need. I
do not see that the level of difficulty is any different.

I don't know about level of difficulty, but questions and answers
together do not make a definition list. The answer is not the
definition of the question. This is why DL is semantically incorrect.

It seems to me the most meaningful way to do this is:

<div class="faq">
<h1>What is the answer to my question?</h1>
<p>The answer is no.</p>
<h1>Are you a quack?</h1>
<p>The answer is yes.</p>
<p>I am a duck.</p>
</div>

Now you can style the questions and answers as you like.

div.faq h1 {color: red; background-color: white; font-weight: bold;}
div.faq p {color: black; background-color: white; font-weight:
normal;}

Notice that my markup is no more complex than a definition list would
be.

David
Stardate 6545.2

[Jim Moe]

David Trimboli wrote:

> But that was not my point. Jukka claimed using a <dlwas
illogical,
semantically incorrect, and more work than using a combination of
<hxand <divbecause of the layout requirements that answers to FAQs may
need. I do not see that the level of difficulty is any different.

I don't know about level of difficulty, but questions and answers
together do not make a definition list. The answer is not the
definition of the question. This is why DL is semantically incorrect.

That is taking a <dlliterally, in its most narrow sense. Even the spec
[1] has this to add: "Another application of DL, for example, is for
marking up dialogues, with each DT naming a speaker, and each DD
containing his or her words." Which is a question/answer example!
This brings me back to one of my questions: Name/value,
term/description, question/answer. How are these semantically different
and incorrect for definition list? From the spec [1]: "Definition lists
vary only slightly from other types of lists in that list items consist of
two parts: a term and a description." Two parts, hmm.

It seems to me the most meaningful way to do this is:

<div class="faq">
<h1>What is the answer to my question?</h1>
<p>The answer is no.</p>
<h1>Are you a quack?</h1>
<p>The answer is yes.</p>
<p>I am a duck.</p>
</div>

Or:
<dl class="faq">
<dt>Are you a quack?</dt>
<dd>
<p>The answer is yes.</p>
<p>I am a duck. Quack!</p>
</dd>
</dl>
If a definition term is not a question, then how is a heading a
question? "A heading element briefly describes the topic of the section it
introduces."[2]

>
Notice that my markup is no more complex than a definition list would
be.

My point exactly.

________
[1] <http://www.w3.org/TR/html4/struct/lists.html#edef-DL>
[2] <http://www.w3.org/TR/html4/struct/global.html#ede f-H1>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)