...

View Full Version : Font changes



billvasko
03-02-2009, 02:37 AM
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!

Excavator
03-02-2009, 03:00 AM
CSS handles those changes. Like this:
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.

Excavator
03-02-2009, 03:10 AM
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/

billvasko
03-02-2009, 03:38 AM
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.

Excavator
03-02-2009, 03:55 AM
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

BoldUlysses
03-02-2009, 03:56 AM
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 (http://phrogz.net/css/WhyTablesAreBadForLayout.html)) 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:


<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:


.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.

billvasko
03-02-2009, 04:23 AM
thanks msuffern, that makes sense.....i think :)

billvasko
03-02-2009, 04:36 AM
Awesome msuffern!!! Worked great and I learned a little more about the whole CSS system. It's taking time, but I'll get there......



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum