SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2000
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all im tryin to do is create a few small things.
    i want the title of each of my news posts to be a certain color, font, and size.
    i want the subtitle (like date & time of news post) to be another size and font
    and i want the text paragraphs to be another size.

    i dont want to change the font of the entire site (i like my links and nav bar to be different)
    what route would you recommend i use?
    external style sheet?
    style classes?

    im new to it all and getting frustrated =(

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    An external Style Sheet would seem to be your best bet.

    Create a file called styles.css with the following contents (adjust values to preference):

    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    .newstitle {
    color: #0000FF;
    font-family: Verdana, Arial, sans-serif;
    font-size: 20px;
    }

    .newssubtitle {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    }

    .newsbody {
    font-size: 14px;
    }
    [/code]

    That's your stylesheet. Link it to your HTML files by adding the following to their headers (between &lt;HEAD&gt; and &lt;/HEAD&gt; ):

    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;LINK REL=STYLESHEET HREF="styles.css"&gt;
    [/code]

    Adjust the HREF attribute as you would any other link if styles.css isn't in the same directory as the HTML file.

    Finally, assign the classes defined in your CSS file to the sections of your news posts. For example:

    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    &lt;H2 CLASS="newstitle"&gt;News Title&lt;/H2&gt;
    &lt;P CLASS="newssubtitle"&gt;Date and time...&lt;/P&gt;

    &lt;P CLASS="newsbody"&gt;The body of your news post here...&lt;/P&gt;
    [/code]

    That should get you started. Post back if you have any trouble!


    ------------------
    -Kevin Yank.
    http://www.SitePoint.com/
    Helping Small Business Grow Online!

  3. #3
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is how you'd handle it with links, just put this in your .css file

    A.menu:link {text-decoration: none; color: orange; font-size: 18pt; font-family: Pepita MT;}
    A.menu:visited {text-decoration: none; color: orange;font-size: 18pt; font-family: Pepita MT;}
    A.menu:active {text-decoration: none; color: orange;font-size: 18pt; font-family: Pepita MT;}
    A.menu:hover {text-decoration: none; color: white; font-size: 18pt; font-family: Pepita MT;}

    Then your link code would be:

    &lt;a class = "menu" href = ".....&gt;

    Basically with css you can define almost any tag with a style, and then add classes to that tag. And by linking to it instead of including it in the header (which you could do if you surround it by style tags) you can have all your pages link to it so that if you decide to change 1 thing you dont have to change it on every page (like SSI).

    Chris


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
  •