Need HTML refresher in CSS

   / Need HTML refresher in CSS #1  
PineRidge

PineRidge

Super Member
Joined
Oct 8, 2003
Messages
7,348
Location
Northeast, Ohio
Tractor
TC-40D SS New Holland
Need to enlist all you HTML Grus :)

I'm re-designing our home page to get better rankings within the various search engines.

I am aware that the majority of search engines give a boost in relevancy to words placed within the <H1> tags. They associate the <H1> tag to specify page or topic headings.

Problem is that the words are just to large to suit my taste.

So, would like to use a cascading style sheet (CSS) to specify to the browser to display whatever font size I need for the <H1> tag. Make sense?

So I inserted the following code on our home page:
<link href="http://www.pineridge7.com/firststyle.css" rel="stylesheet" type="text/css">

Then I made a new page called firststyle.css and loaded it in our web (root directory) with the following code:
h1 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099;}

I assumed (there's that word again folks) that it would make the <H1> heading and display it as a 14 point font size, but there is no change that I can see in IE. Why?

If you would like to view the source code please go here:
www.pineridge7.com

As always, thanks for your input guys!
 
   / Need HTML refresher in CSS #2  
Mike,

I ran your code through an online css validator at http://validator.w3.org/ and it passed.

I then looked at your page referenced above and did a "view source". The first line it showed was the <body> tag. There was no <head> section, which is where the link to the css file needs to be. Did I miss something?
 
   / Need HTML refresher in CSS
  • Thread Starter
#3  
Frank don't think that's it. I changed the tag but it's still not working. Funny in in Front Page view it appears to have reduced the print, but when published it still looks full size.
 
   / Need HTML refresher in CSS #4  
Mike,
I took a look at your page and it appears there is a problem with the title or header, whatever it's called.
 
   / Need HTML refresher in CSS #5  
Here is some samle code from my website:

<html>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" href="stylesheet-print.css" media="print" />
<link rel="Shortcut Icon" type="image/ico" href="images/icons/favicon.ico">
<head>
<title>All in the Picture - Weddings</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

​
Please note that the stylesheet.css file is in the same directory as the file calling the css file.

Here is s the CSS file. "stylesheet.css"

body { font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #333;
}

p {
font-size: 16px;
font-family: Georgia, "Times New Roman", Times, serif;
}

h3, h4 {
color: 000080;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
}

h1 {
color: #000080;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
}

h2 {color: #000080;}

h6 {font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: 000080;
}

a {color: #000080;
text-decoration: none;
font-weight: bold;
}
a:hover {color: #000080;
text-decoration: underline;
font-weight: bold;
}


li, td { font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #333;
}

.sectiontitle {
font-family: Arial, Helvetica, sans-serif;
color:#333;
font-size:small;
font-weight:normal;
padding:9px;
margin-bottom:8px;
background:#eee;
text-transform:none;
}

.blogbody { font-family: helvetica, arial, sans-serif;
font-size: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #333;
}
.advertisement {
background-color: #FF0000;
padding: 9px;
font-family: Arial;
font-weight: normal;
color: #FFFFFF;
}
.advertisement2 {
background-color: #FFFFCC;
padding: 9px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #333333;
font-variant: small-caps;
font-style: italic;
font-size: 24px;
text-align: center;
}
.referral {
padding: 7px;
}
h5 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
font-style: normal;
color: #000080;
}
hr {
height:2px;
background-color: #000080;
width: 700px;
background-position: center;
}
.pdf {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
background-color: #CCCCCC;
text-decoration: none;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}

​
I hope that will lead you in the right direction.

Derek
 
   / Need HTML refresher in CSS
  • Thread Starter
#6  
Inspector507 said:
Mike,
I took a look at your page and it appears there is a problem with the title or header, whatever it's called.
Click to expand...

After your comment I made a test page using Front Page click here
After uploading it everything worked. So I started comparing the tags between the two pages. You guys were right I had the tags messed up a bit. I also had the:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

stripped out of the page.
All appears to be working correctly now, thanks for your help guys!
 
   / Need HTML refresher in CSS #7  
CSS is a great tool. I use it for all of my client's sites now (I do web design and programming on the side). When they get a wild hair and want to change how the site looks, I simply change a couple of lines of code and viola! Everything looks different. Saves tons of time.
 
   / Need HTML refresher in CSS #8  
PineRidge said:
I am aware that the majority of search engines give a boost in relevancy to words placed within the <H1> tags. They associate the <H1> tag to specify page or topic headings.
Click to expand...

I don't believe that's the case. That may just be one of hundreds of methods used.
 
   / Need HTML refresher in CSS
  • Thread Starter
#9  
Gatorboy said:
I don't believe that's the case. That may just be one of hundreds of methods used.
Click to expand...

Gaterboy it may or may not be the case, I'm really not the expert on this subject by any means. But when I read something in print I normally don't have a reason to challenge it. Good thing for all my past teachers!
 
You must log in or register to reply here.
 

Footer Links 1

Top