SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot shim's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change Individual Words

    i'm using an xhtml1 page.

    i would like to use css to change individual words. they will be for the logo. i have looked on the main w3 site for this, but must admit, i'm a bit confused. i want to change, for example:

    greatSite do.you.like

    yes, 'great' and 'Site' should have no space between them.

    'great' should have these properties:
    font: century gothic
    font-size: 30pt

    'Site' should have these properties:
    font: lucida handwriting
    font size: 30pt
    font: bold
    font color: #ff0000

    'do.you.like' should have these properties:
    font: ocr a extended
    font size:20pt


    any help would be appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Try This:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .great {
    	font-family: "Century Gothic";
    	font-size: 30pt;
    	text-decoration: line-through;
    }
    .site {
    	font-family: "Lucida Handwriting";
    	font-size: 30pt;
    	font-weight: bold;
    	color: ff0000;
    }
    .doyoulike {
    	font-family: "OCR A Extended";
    	font-size: 20pt;
    }
    -->
    </style>
    </head>
    
    <body>
    <span class="great">great</span><span class="site">Site</span> <span class="doyoulike">do.you.like</span><br />
    </body>
    </html>
    Also you should really specify alternative fonts as well, just in case users don't have these fonts installed.

    Also avoid using points for sizing your text as it is a fixed size and won't adapt to screen size etc. Use em's or % would be better.

    Hope this helps

    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Whoops!
    There was an error in there, try this.

    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .great {
    	font-family: "Century Gothic";
    	font-size: 30pt;
    }
    .site {
    	font-family: "Lucida Handwriting";
    	font-size: 30pt;
    	font-weight: bold;
    	color: #FF0000;
    }
    
    .doyoulike {
    	font-family: "OCR A Extended";
    	font-size: 20pt;
    }
    
    -->
    </style>
    </head>
    
    <body>
    <span class="great">great</span><span class="site">Site</span> <span class="doyoulike">do.you.like</span><br />
    </body>
    </html>
    Should work this time (with any luck).

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    And if you want a space between site and do.you.like replace the appropriate part of the css to this:

    Code:
    .doyoulike {
    	font-family: "OCR A Extended";
    	font-size: 20pt;
    	margin-left: 25px;
    }
    Hope this helps.

    Paul

  5. #5
    SitePoint Zealot shim's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, it does help. thank you so much!


Bookmarks

Posting Permissions

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