PDA

View Full Version : CSS Style Sheets

alexb
10-22-2002, 05:33 AM
Hello,

I've got a small problem. I'm designing a new website for a charity and I thought I'd have a go at doing it with a stylesheet.

Problem is I can't get the H1 tag to work. H2 and H3 work perfectly. I'm sure someone out there can help me. I think it could be a missing keystroke or an extra one somewhere. If anyone could help that would be great!!! The code is:


H1 { font-size: large; color:red}

I've even tried taking the text colour command out of my main page.

Any help would be appreciated!

Alex
HZR
10-22-2002, 09:27 AM
I can see nothing wrong with that. What's not working?
alexb
10-22-2002, 10:51 AM
ok....not sure if I can do this- but this is my stylesheet link:

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

and this is my stylesheet.......

<HEAD>
<TITLE>Moebius Syndrome Stylesheet</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color:white}
H2 { font-size: small; color:yellow}
P { font: bold 12pt Arial, sams-serif; color:white}
</STYLE>
</HEAD>


actually I've never been able to get my h1 headings to change colour- even when i copied a stylesheet from a tutorial!!!
melvis
10-22-2002, 11:26 AM
Try:


H1 { font-size: x-large; color:white}
H2 { font-size: small; color:yellow}
P { font: bold 12pt Arial, sams-serif; color:white}

Without the HEAD, TITLE, and STYLE tags. Save as *.css file
DCElliott
10-22-2002, 03:39 PM
I'm not sure why your code wouldn't work. Sans was spelled wrong but that shouldn't affect anything. Also, normally you close all styles with a semi-colon, even at the end.

Try this on for size:

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

<html>
<HEAD>
<TITLE>Moebius Syndrome Stylesheet</TITLE>
<STYLE TYPE="text/css">
BODY {
background:#116666;
color:white;
font: normal medium Verdana, Geneva, Arial, Helvetica, sans-serif;
}
H1, H2, H3, H4, H5 {
border-left: 1em solid #66aaaa;
border-bottom:.1em solid #66aaaa;
padding-left: .5em;
font-family: "Times New Roman", Times, serif;
color: #FFFFCC;
}
/*A special present, no added charge*/
A.button
{ display:inline; width:auto; height: auto;
text-align: center;
text-decoration: none;
color: #3163CE;
background: #ffcc33;
font : bold 10pt courier;
vertical-align : middle;
padding : 2px;
margin: 3px 0.5% 3px 0;
border-top: 2px solid #ffff99;
border-left: 2px solid #ffff99;
border-right: 2px solid #cc9933;
border-bottom: 2px solid #cc9933;
}
A.button:hover, A.button:active
{ border-top: 2px solid #cc9933;
border-left: 2px solid #cc9933;
border-right: 2px solid #ffff99;
border-bottom: 2px solid #ffff99;
}
</STYLE>
</HEAD>
<body>
<h1>Level 1</h1>
<a href="http://developers.evrsoft.com/forum/showthread.php?s=&threadid=442"
target="_top" class="button">Forum</a>
<h2>Level 2</h2>
<a href="http://www.ciaccess.com/moebius/"
target="_top" class="button">Moebius Syndrome Foundation</a>
<P>This is a paragraph.
<P>And this is another.
</body>
</html>

Note the graphic like elements that are created entirely with CSS, including the button mouseover effects. Note that I set global font properties in the BODY style. I left the normal fontsize hierarchy of H tags alone, but specified a serif font for contrast. The body, H border and H text colors were chosen to work together. The P tag will inherit from the BODY properties.

DE
HZR
10-24-2002, 04:00 AM
A closing semi-colon at the end is not necessary though, but I think I get your point.
torrent
10-24-2002, 04:03 PM
I assume you are using IE:

Tools -> Internet Options -> Accessibility

make sure nothing is checked!