external style sheet

bobby9101 · #1 (**permalink**) 07-19-2005, 04:16 PM

I am sorry to keep botherin everyone. but his shouldnot be a problem but it is.
here is my homepage code (really basic. so far)

Code:

<head>
<title>Seo services and website promotion</title>
<link href="mainstylesheet.css" rel="stylesheet" type="text/css">  
</head>
<body>
<a href="http://ranktips.com">
[img]logo.jpg[/img]</a>
<table summary="free SEO services" height="90%" bgcolor="#FFFFFF" cellpadding="15" cellspacing="0" style="border: solid 5px darkblue;" align=center width=80%>
<tr>
<td>
<h1>Directory</h1>
<hr color="darkblue" size="4">
<h1>Directory List</h1>



Submitting to Directories is a crucial part of Search Engine Optimization. Here is a High-Quality list of Directories. All of these directories have been checked and are SEO friendly.</p> 
<hr color="darkblue" size="4">
<h1>Articles</h1>


Read up on SEO on the articles page. Read various SEO articles. If you need the basics check out SEO 101 in the articles page.</p>
<hr color="darkblue" size="4">
<h1>Forum</h1>


Visit a High-Quality Forum. Talk about Domain Names, Search Engine Marketing,  Selling Domains, Buying Domains, Advertising, Free Domain Giveaways, a Directory and much more...</p>
</td>
</tr>
</table>

here is my style shhet code

Code:

<style type="text/css">
p {color: blue }
a {color: black}
h1 {text-align: center}
</style>

the problem is everything works except for the red paragraphs. th keep turning up black???

ChrisRC · #2 (**permalink**) 07-19-2005, 05:31 PM

I can think of a number of things to mention based on the code you posted, but as far as your question... what red paragraphs?

If you mean the blue paragraphs, try removing the <style> tags from your external stylesheet. A an external stylesheet should be css only, not html. the opening tag is disrupting the p selector.

Some other notes you may or may not be interested in, but they could save you trouble later:
You need a doctype declaration
There should only be one h1 on a page
Although it's well supported, hr's don't have a color attribute. Use your stylesheet for that.
I don't understand why this is a table. Regardless, tables don't have a height attribute. Even if they did - and you can set a height in css - I don't understand what you want your table height to be 90% of.

bobby9101 · #3 (**permalink**) 07-19-2005, 06:35 PM

thank you. it was very helpful. i got the

color fixed

how could i do that without a table?
how do i use css for the hr?
and how do i type up a doc dec.

MuNKyonline · #4 (**permalink**) 07-20-2005, 10:11 AM

You can set the height of a table using pixels. The viewable screen is about 420 pixels high. You could use "height="600px" for example.

css for the hr:

hr {color: #990000;} <-- would make it red.

For the doc type put this at the top of the code:

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

ChrisRC · #5 (**permalink**) 07-20-2005, 10:11 AM

Quote:

Originally Posted by bobby9101

how could i do that without a table?

Since you only have 1 cell, it's simple. Delete all of your table code, wrap the stuff you want centered in a <div id="freeseoservices"> and add a line to your .css file defining the properties for that div:
#freeseoservices {background-color:#fff;border:solid 5px #00008B;margin:0 auto;width:80%;padding:15px;}

Quote:

how do i use css for the hr?

remove the property settings you have in your html and add the following line to your css file:
hr {background-color: #00008B; height:4px;}

Quote:

and how do i type up a doc dec.

That depends on what standard you're coding to. There's a list from the W3C website. 4.1 strict should be fine so you can just enter, as the very first line in your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

bobby9101 · #6 (**permalink**) 07-20-2005, 12:05 PM

thank you. everything worked.
there is a slight problem with the hr though
it has a small gray border around it

MuNKyonline · #7 (**permalink**) 07-20-2005, 12:30 PM

I think that's because you used 'background-color'
- ChrisRC's idea (looks good!)

Instead try just 'color' in the css if you dont want the grey border.

I think that's right anyway =S

ChrisRC · #8 (**permalink**) 07-20-2005, 03:55 PM

Quote:

Originally Posted by bobby9101

thank you. everything worked.
there is a slight problem with the hr though
it has a small gray border around it

Add to the hr css line "border:none;"

Older versions of IE did use the color property but I just checked IE6 on my machine and background-color works. Firefox/Mozilla have always used background-color.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode