4 replies [Last post]
elenano
elenano's picture
Offline
newbie
Marina, CA
Last seen: 9 years 9 weeks ago
Marina, CA
Timezone: GMT-8
Joined: 2012-11-08
Posts: 2
Points: 4

I know there is an element for styling the first letter and the first line of something. Is there a way to write a class that styles the first word? I'm converting my 300+-page website from tables to CSS and I have a couple of important pages with Q&A format and others where I give a "what:" and then a "why" explaining the "what."

Those, in the past, were individually styled in different typeface and color: Q: and A:, and What: and Why:

Can I replicate that with a class?

I'm using Dreamweaver CS5.5 mostly.

Randy Schuyler

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

Not a question about classes

Not a question about classes as such but more about choosing the best markup structure, perhaps a dl construct with the dt element holding the question and the dd the answer.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hugo's got the right of it

If you've been using table layouts for very long, you've likely forgotten much of your html. It happens. Most table based coders must stop and relearn semantic, well structured html. It's due to the fact that no non-trivial table layout can be either semantic or well structured.

As you found, there is no ::first-word pseudo element. You will need to segregate the first word yourself, e.g..

<dl>
  <dt><span>What</span> is a unicorn?</dt>
  <dd>It's not what you think.</dd>
  …
  …
</dl>
=================
dt > span:first-child {…} 
The dl element is slightly more appropriate for a(n) (FA)Q&A than in html4 since html5 has re-purposed it. It's now a "description" rather than a "definition" list. Smile

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.

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

It's so great HTML5 can

It's so great HTML5 can re-purpose things so easily as clearly 'definition' was absurd so now it's:

'DL' => 'Description List';
'DT' => 'Description Term';
'DD' => 'Description Description';

hmmm Puzzled

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

natalia2012
natalia2012's picture
Offline
newbie
Mumbai
Last seen: 9 years 8 weeks ago
Mumbai
Timezone: GMT+5.5
Joined: 2012-11-29
Posts: 1
Points: 1

CSS stylesheet

you can replicate to an extent with html. but eventually css gives a good complete look than html.

Natalia
All 6 spam links removed - account suspended.