15 replies [Last post]
clubamigos
Offline
Enthusiast
Last seen: 8 years 46 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

I would like to style a word in italics but do not know the css how to do this:

<p>Club Amigos!</p>
<p>( Amigos: spanish for friends )</p

I would like to wording: "Amigos - spanish for friends" to be in italics.

Any help would be appreciated.

I know it is: p {font-style: italic; }

But its implementing into the css and html l am unsure as to how to do.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 8 years 17 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Italic font

CSS
.italic {font-style:italic}

HTML

<p>Club Amigos!</p>
<p class="italic">(Amigos - Spanish for friends)</p>

clubamigos
Offline
Enthusiast
Last seen: 8 years 46 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

Italic font

Thats great thanks.

Anonymous
Anonymous's picture
Guru

Italic font

Wouldn't using <em> be more semantic?

em {font-style:italics}

<p>Club Amigos!</p> 
<p><em>(Amigos - Spanish for friends)</em></p>

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 8 years 17 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Italic font

Dunno... :shrug:

But semantically speaking, em is typically rendered as having a 'font-style' property with an 'italic' value. So the rest would seem to be superfluous.

Pedantically speaking, I don't think a font-style of italics is going to get anyone, anywhere, anyhow. Wink

Accessibility-wise, I avoid using <em> for anything other than shouting at my listeners, but
pick out the posts that most closely fit your own point of view

Anonymous
Anonymous's picture
Guru

Italic font

Lorraine wrote:
Pedantically speaking, I don't think a font-style of italics is going to get anyone, anywhere, anyhow. Wink
Whoops. :oops:

clubamigos
Offline
Enthusiast
Last seen: 8 years 46 weeks ago
Joined: 2006-01-26
Posts: 56
Points: 0

Italic font

Lorraine wrote:
CSS
.italic {font-style:italic}

HTML

<p>Club Amigos!</p>
<p class="italic">(Amigos - Spanish for friends)</p>

How do l put the italics on the same line as the word Club Amigos?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 8 years 17 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Italic font

Aha - infinitely variable specifications, I see. Just one more then it's back to the text-books for you amigo. Laughing out loud

CSS
span {font-style:italic}
HTML
<p>Club Amigos! <span>(Amigos - Spanish for friends)</span></p>
Ugly, but so is the idea, I regret to say. Crying

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Italic font

<p>Club Amigos!</p>
<p class="italic">(Amigos - Spanish for friends)</p>

clubamigos wrote:
How do l put the italics on the same line as the word Club Amigos?

Put them in the same paragraph. Use <em></em> for the italics and style it for "font-style: italic;" just to be sure, or use a <span></span> element with a class: <span class="italic"></span>.

... but I could be wrong, of course.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Italic font

You could always use <dfn>

<p>Club Amigos! (<dfn>Amigos - spanish for friends</dfn>)</p>

Anonymous
Anonymous's picture
Guru

Italic font

Chris..S wrote:
You could always use <dfn>

<p>Club Amigos! (<dfn>Amigos - spanish for friends</dfn>)</p>
Hmm. Now that's more semantic than anything else, ain't it? Smile

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 8 years 17 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Italic font

:-k or is it a translation rather than a definition... just trolling Smile

Anonymous
Anonymous's picture
Guru

Italic font

Lorraine wrote:
:-k or is it a translation rather than a definition... just trolling Smile
I was going to say that...but is there a <translation> tag? Tongue

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Italic font

<dfn lang="es">

Laughing out loud

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 8 years 17 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Italic font

eso es muy listo, Sr S
But it could (only could, mind you) persuade a screen-reader to pronounce "Spanish for friends" in a Spanish accent. Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 41 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9273
Points: 3279

Italic font

My own approach would follow the convention of foreign words being italicized, and from Joe Clark's Building Accessible Websites, appendix B,

Quote:
Under the Web Content Accessibility Guidelines, you are required to specify changes in the “natural” or human language used in documents. You do this by adding the lang="languagecode" attribute to virtually any tag (like <p></p>, <span></span>, <cite></cite>, or <hx></hx>. Also, in order to specify a change in language, you must already have declared the default, base, or original language, which you do by adding lang="languagecode" to the <body> or (preferably) <html> tags, like so: …


 
.foreign { 
    font-style: italic; 
    cursor: help; 
    border-bottom: 1px dotted #ccc; 
    } 
========= 
<html lang="en"> 
… 
<p>Club <span class="foreign"  
              lang="es"  
              title="Spanish for 'friends'">   
   Amigos!</span></p>

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.