PDA

View Full Version : css insert problem



IanMarlowe
07-05-2005, 12:09 PM
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</body>
</head>

that is the code I used to insert my .css stylesheet. what is wrong with it? :confused: I enter and everything is default. The background is white, and the text is black.

please help me someone. This is a stupid problem... I'm already embaresses. :o

THX ALOT!!! :D

jscheuer1
07-05-2005, 12:21 PM
Generally we write it:

<link rel="stylesheet" href="pages.css" type="text/css">but I don't think the order matters, it might. The real questions are:

1) Is the stylesheet file in the same directory as the page?
2) Is it a valid stylesheet?
3) Is the name of the stylesheet file spelled correctly (capitalization counts)?

IanMarlowe
07-05-2005, 12:23 PM
<style type="text/css">
<span style="cursor:default">
body {background-color: black}
h1 {color: 339900}
h2 {color: 339900}
p {color: 339900; font-family: courier; font-size: 100%}
a:link {color: 006699}
a:visited {color: 006699white}
a:hover {color: 339900; background-color: 339900; font-weight: 900}
a:active {color: 006699}
p.dotted {border-style: dotted} //<p class="name of style">...</p>
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</span><br />
</style>

is it ok?

jscheuer1
07-05-2005, 12:35 PM
No, those < 's and >'s don't belong. For many browsers the # sign must precede a hex color value. Comments begin /* and end */. Try this:



body {background-color: black}
h1 {color: #339900}
h2 {color: #339900}
p {color: #339900; font-family: courier; font-size: 100%}
a:link {color: #006699}
a:visited {color: #006699}
/*this is a valid css comment*/
/*you need to choose a background color that is different
than the color for the hover pseudoclass or it will disappear
onmouseover*/
a:hover {color: #339900; background-color: #339900; font-weight: 900}
a:active {color: #006699}
/*not sure if all the rest of these will do anything or not*/
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}

IanMarlowe
07-05-2005, 12:42 PM
/*not sure if all the rest of these will do anything or not*/
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}

It doesn't, it's just so if i choose to make a certain kind of border, i don't have to add a whole lot of extra code.

IanMarlowe
07-05-2005, 12:45 PM
<style type="text/css">
<span style="cursor:default">
body {background-color: black}
h1 {color: 339900}
h2 {color: 339900}
p {color: 339900; font-family: courier; font-size: 100%}
a:link {color: 006699}
a:visited {color: 006699}
a:hover {color: 339900; background-color: 006699; font-weight: 900}
a:active {color: 006699}
p.dotted {border-style: dotted} /*<p class="name of style">...</p>*/
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</span><br />
</style>


better?

IanMarlowe
07-05-2005, 12:47 PM
It says the file is a: Cascading Style Sheet Document is that ok? or is there something wrong?

I made it using notepad...

jscheuer1
07-05-2005, 01:05 PM
You shouldn't have any html in there. Did you try my version? Anyways, if it works in all the browsers you want it to work in, that will tell you if it is, if not valid, at least serviceable.

Twey
07-05-2005, 01:16 PM
You guys are missing something obvious.
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</body>
</head>

And you don't have to do that p.dotted bit. You can use the "style" attribute to apply styles inline.

<p style="border-style:dotted;">Text</p>

And if you're using a doctype that supports self-closing tags, you should close that link tag:

<link href="styles.css" rel="stylesheet" type="text/css" />