trouble with first-letter style

[cb153]

I am having a problem using a first-letter style. I want to display the style only for paragraphs in the main content text,
but for some reason it is also changing the text links in the navigation column (and the first link at the bottom links). How should I fix this?

Here is some of my html and all of my css:


<div id="hdr" align="center">
<img src="../images/joes_header.JPG" align="middle" alt="joesheader" title="joesheader"/>
</div>

<div id="bodyblock" align="right">
<div id="nav" align="center">
<img src="../images/berry01_red.gif" width="22" height="20" alt="strawberry" title="strawberry"/>
<p class="speciallink"><a href="../html/home.html" target="_self">Home</a></p>
<img src="../images/berry01_red.gif" align="top" width="22" height="20" alt="strawberry" title="strawberry"/>
<p class="speciallink"><a href="../html/produce.html" target="_self">Produce</a></p>
<img src="../images/berry01_red.gif" align="top" width="22" height="20" alt="strawberry" title="strawberry"/>
<p class="speciallink"><a href="../html/history.html" target="_self">History</a></p>
<img src="../images/valid-xhtml10.gif" align="bottom" width="88" height="31" alt="validxhtml" title="validxhtml"/>

</div>

<div id="cont" >
<h1 align="center"> <b>Joe's Fruit Shop</b></h1>

<STYLE TYPE="text/css">
P:first-letter {font-face: Verdana; font-style: italic; font-size:15pt;}
</STYLE>

<p><b>At Joe's we are dedicated to selling the freshest, finest fruit, vegetables and cut flowers.
</b>
<img src="../images/fruit01.jpg" align="right" width="111" height="78" alt="fruit01" title="fruit01"/>
</p>




body{ background-color: #66FF99;}

p { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003333; font-size: 12pt;}
h1{ font-family: Verdana, Arial, Helvetica, sans-serif; color: #003333; font-size: 12pt;}
h3{ font-family: Verdana, Arial, Helvetica, sans-serif; color: #003333; font-size: 12pt;}

.speciallink {
font-family: verdana, arial, helvetica, sans-serif;
color: #003333;
}


.speciallink A:link {
color: #FF0000;
background: #006600;
text-decoration: none;
}

.speciallink A:visited {
color: #006600;
text-decoration: underline;
}

.speciallink A:hover {
color: #FFFFFF;
background: #006600;
text-decoration: none;
}

#hdr {
width:750px;
height:60px;
}

#bodyblock {
position:relative;
width:750px;
}

#nav {
float:left;
width:130px;
}

#cont {
width:600px;
text-align:left;
}

[alt131]

Welcome to WebmasterWorld cb153 ;) ,

The issue is specificity: The selector

 p:first-letter 

tells the browser to apply the style to the first letter of every single <p>ara it can find.

However, if I understand your HTML, you only want to apply the :first-letter style to <p>aras in div#cont. Do that by increasing the specificity of the selector. (Only apply the style to specific <p>'s.)

For example, <p>'s that are a descendent of an element with the id #cont:

#cont p:first-letter {styles here...}

For even more specificity, only apply the style to <p>'s that are a descendent of a <div>ision that has an id of #cont. (Longer to describe than write ;) )

div#cont p:first-letter {styles here...}

That would select:

<div id="cont" >
<p><b>At Joe's we are ...<b></p>
</div>

But not:

<div id="nav">
<p><a href="../html/home.html" target="_self">Home</a></p>
</div>

You didn't ask, but understanding specificity (and other ways of using selectors) can help reduce the amount of css and html. On the provided code, you could remove the <b>, and use a descendent selector to specifically target the <p>'s inside div#cont:
#cont p {font-weight:bold}

Hx are "bold" by default, so you could remove the <b> from the h1 text, but if the bold needs to be declared, you could reduce the existing css by doing this:

p, h1, h3 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003333; font-size: 12pt;} <-- "grouping" selectors
#cont h1, #cont p {font-weight:bold} <--descendent selectors
#cont p:first-letter { styles...} <--increasing specificity

The links in div#nav could be styled using the same technique - which avoids having to create a class then code it in for every individual <p> as well.

The forum library has a CSS Crash Course [webmasterworld.com] with more information and lots more examples.

[cb153]

Thanks for that.