Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Font changes

  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Font changes

    Here is the site I am referring to: http://www.fastpitchelite.com/d1schools.htm


    Basically, I copied and pasted the html code from another site and added it to my .htm file. I made no changes to CSS. I want to change the font within the boxes in the following 3 ways--without changing the font within the box red headers:

    1-Eliminate the underline
    2-Make the gray a darker shade
    3-Make the font turn red in hover

    Do I make changes in the html or the CSS? Any help is greatly appreciated!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    CSS handles those changes. Like this:
    Code:
    body {
    background: #000000 url(images/main-bg.gif) repeat-x;
    color: #eeeeee;
    	font-family: arial, arial;
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    }
    * html body {
    }
    
    img {
    	border: 0px;
    }
    
    a:link { 
    	color: #333; /*darker gray*/
    	font-size: 11px;
    	font-weight: bold;
    	text-decoration: none; /*no underline*/
    }
    	
    a:visited { 
    	color: #9D9D9B;
    	font-size: 11px;
    	font-weight: bold;
    	text-decoration: none;	
    }
    	
    a:hover, a:active { 
    	color: #f00; /*red hover*/
    	font-size: 11px;
    	font-weight: bold;
    	text-decoration: none;
    }
    That is some very basic styling though. Maybe you should have a look at a tutorial that shows some link and/or text styling? Have a look at w3schools.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Here you go bilvasko, these look like pretty good tuts -
    http://www.elated.com/articles/styling-links-with-css/
    http://www.w3schools.com/Css/css_text.asp

    And I used the Inspect option on firebug to find what was styling those links. Firebug is a pretty cool FireFox add on - http://getfirebug.com/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Excavator, i understand the coding part. What I have difficulty with is pinpointing where to make the changes. For example, in my scenario above, I want to change some specific font, not changes to the entire site.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    That's where id's and classes come in, so you can give a link an id or a class and style it seperately from the rest of the links.
    Have a look at this one... http://www.echoecho.com/csslinks.htm
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    billvasko,

    To reference a specific element or series of elements in an HTML page with CSS, you can give them classes (can be used multiple times) or ids (can be used once per page). In your case, since the elements (HTML tables) which contain your links are used multiple times on the page, we'll give them a class and reference that class in the CSS, giving the font the desired properties. First let's add the class to the markup:

    Code:
    <table class="link_table" border='0' cellspacing='0' cellpadding='4px'>
    	<tr><td><a href='http://www.ualbanysports.com/SportSelect.dbml?DB_OEM_ID=15800&KEY=&SPID=8002&SPSID=70309' target=_blank>Albany</td></tr>
    	<tr><td><a href='http://www.bubearcats.com/sports/soft/index.html' target=_blank>Binghamton</td></tr>
    	<tr><td><a href='http://goterriers.cstv.com/sports/w-softbl/bost-w-softbl-body.html' target=_blank>Boston University</td></tr>
    	<tr><td><a href='http://www.hartfordhawks.com/SportSelect.dbml?DB_OEM_ID=12400&KEY=&SPID=5382&SPSID=52154' target=_blank>Hartford</td></tr>
    	<tr><td><a href='http://goblackbears.collegesports.com/sports/w-softbl/main-w-softbl-body.html' target=_blank>Maine</td></tr>
    	<tr><td><a href='http://www.umbcretrievers.com/sports/softball/' target=_blank>Maryland-Baltimore County</td></tr>
    	<tr><td><a href='http://goseawolves.fansonly.com/sports/w-softbl/ston-w-softbl-body.html' target=_blank>Stony Brook</td></tr>
    	<tr><td><a href='http://www.uvmathletics.com/' target=_blank>Vermont</td></tr>
    </table>
    (formatted for clarity)

    Next we'll reference that class in the CSS:

    Code:
    .link_table a:link { 
    	color: #333; /*darker gray*/
    	text-decoration: none; /*no underline*/
    }
    	
    .link_table a:hover, .link_table a:active { 
    	color: #f00; /*red hover*/
    }
    Note the "." before the name in the CSS that signifies we're referring to a class. If it were an id we'd use a "#" like this: #link_table.

    Give that a shot.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    billvasko (03-02-2009)

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    thanks msuffern, that makes sense.....i think

  • #8
    New Coder
    Join Date
    Aug 2007
    Posts
    73
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Awesome msuffern!!! Worked great and I learned a little more about the whole CSS system. It's taking time, but I'll get there......


  •  

    Posting Permissions

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