www.webdeveloper.com
Results 1 to 4 of 4

Thread: Apply formatting to first letter of paragraph

  1. #1
    Join Date
    Nov 2006
    Posts
    9

    Question Apply formatting to first letter of paragraph

    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 (http://www.htmlgoodies.com/beyond/cs...e.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:

    p:first-letter {
    font-size:14pt;
    font-style: italic;
    float:left
    }



    now in regards to my normal code for the page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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="http://users.chariot.net.au/~ajanusz/index.html">Home</a></p>
    <p><img src="../images/berry01_red.gif" alt="Fruit" width="22" height="20"/></p>
    <p><a href="http://users.chariot.net.au/~ajanusz/html/produce.html">Produce</a></p>
    <p><img src="../images/berry01_red.gif" alt="Fruit" width="22" height="20"/></p>
    <p><a href="http://users.chariot.net.au/~ajanusz/html/history.html">History</a></p>
    </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&amp;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&rsquo;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>&nbsp;</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:info@joes.com.au?subject=Joe%27s%20Website%20Query"> Web Administrator</a> |
    </div>
    </div>

    <div id="bottom"></div>

    </div>


    </body>
    </html>




    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:

    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;
    }


    Does anyone know how to actually write the css code differently so it only applies to my #content-main layer and only to the first letter on the page?

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Ah, you have much to learn about the mysteries of CSS... this will help you.

    I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.

    I recommend that you read this as well: Writing Efficient CSS
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  3. #3
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    #content-main p:first-letter {
    font-size: 14pt;
    font-style: italic;
    }

    Cheers
    Graeme

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    If Centauri's doesn't work for you, you might try this: http://css.maxdesign.com.au/floatuto...torial0701.htm
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles