Menu
Hi everyone, I have a query regarding in having the 1st letter of the paragraph 2pt’s larger. I have got the CSS code below and it works fine, however, I have changed my layout and I am using a 2 column 3 row layout. Help to this tutorial I managed to get it working ([url]http://www.htmlgoodies.com/beyond/css/article.php/3642151)
But now since I have several <div> ID’s I want to select only my centre content area to apply this rule to. I have managed to get it working before when I had the page organised in a table format but since i’ve migrated to pure css and no tables then this text seems to not work and when it does it makes all the letters/words bigger. I’m only after making the 1st letter of the paragraph 2pt’s larger for appearance.
I have tried by removing my <p> tags where I have the text and replacing it all with <div> tag but i’m not sure if this should apply to text or only to structure the layout content. I have an external css file controlliong all the styles.
This is the code I have used in my CSS for the first letter to have formatting applied:
[COLOR=DarkGreen][B]
p:first-letter {
font-size:14pt;
font-style: italic;
float:left
}
now in regards to my normal code for the page:
[COLOR=Navy][B]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Joe’s Fruit Shop – Joe’s History</title>
<link href=”../joe_style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<div align=”center”><img src=”../images/joes_header.jpg” alt=”Joe’s Fruit Store” width=”482″ height=”42″/></div>
</div>
<div id=”content”>
<div id=”content-left”>
<p><img src=”../images/berry01_red.gif” alt=”Fruit” width=”22″ height=”20″/></p>
<p><a href=”
<p><img src=”../images/berry01_red.gif” alt=”Fruit” width=”22″ height=”20″/></p>
<p><a href=”
<p><img src=”../images/berry01_red.gif” alt=”Fruit” width=”22″ height=”20″/></p>
<p><a href=”
</div>
<div id=”content-main”>
<h2>Joe’s History</h2>
<p>Joe’s Fruit and Vegetables started out as a traditional store selling fruit and vegetables, along with other commodity items such as milk, soft drinks, sweets etc. Joe&rsquo;s has been in business for 27 years and has a reputation for the quality of their goods.</p>
<p>The proprietor, Joe Bashir, has discovered that there are many people who, through work schedules and home lifestyles, don’t have the opportunity to shop in person.</p>
<p>For convenience, they did fruit and vegetable shopping at supermarkets, but were not happy with the quality of the produce from the supermarkets. Joe wants to tempt these customers back by taking his store to them, in their homes.</p>
<hr />
<p> </p>
</div>
</div>
<div id=”footer”>
<div>
| <a href=”http://users.chariot.net.au/~ajanusz/html/copyright.html”>Copyright</a> | <a href=”http://users.chariot.net.au/~ajanusz/html/privacy.html”>Privacy</a> | <a href=”mailto:[email protected]?subject=Joe%27s%20Website%20Query”> Web Administrator</a> |
</div>
</div>
<div id=”bottom”></div>
</div>
</body>
</html>[/COLOR][/B]
Can anyone take a look at it and let me know if I should remove all the <p> tags and replace them with the <div> tag?
This is my css for the layout:
[B][COLOR=Blue]body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
background-color: #FFFFFF;
color: #006600
}
h2 {
color: #006600;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16pt;
}
#wrapper {
width:900px;
margin:0px auto;
text-align: left;
border:1px solid #bbb;
padding:10px;
background-color:#CDFFCC;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:130px;
text-align: center;
}
#content-main {
margin-left:10px;
width:716px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
}
#bottom {
clear:both;
text-align:right;
}
a:link {
color: #006600;
text-decoration: underline;
}
a:visited {
color: #33CC00;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
}
a:active {
color: #FF0000;
text-decoration: none;
}
[/COLOR][/B]
Does anyone know how to actually write the css code differently so it only applies to my [COLOR=Red]#content-main