Hi,
I've just started to learn CSS. When I do the following:
<style type="text/css">
a{
background-color: lightblue;
border-style: double;
color: darkblue;
border-color: #550055
border-size: 10px;
}
font.but{
font-family: impact;
font-size: 36px;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.bbc.co.uk"><font class="but">BBC</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.co.uk"><font class="but">Google</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.co.uk"><font class="but">Yahoo</font></a>
</body>
The border size doesn't change, and its colour is blue. But if I miss out the border size, the colour is purple, as it should be.
Also is there a decleration just to change the font colour?
Thanks,
NeilYou're missing a semicolon (
at the end of "border-color: #550055" - that could fix your problem!
Also is there a decleration just to change the font colour?
You already have "color: darkblue;". Doesn't that change the font colour?Hi, thanks for the help, it worked! I didn't know CSS was so strict on these things. Anyway, color: darkblue changes the colour of the border aswell, I wondered if you could change the font colour on its own.
Thanks,
NeilOriginally posted by neil9999
Anyway, color: darkblue changes the colour of the border aswell, I wondered if you could change the font colour on its own.
Are you sure? Even after you added that missing semicolon?
Another thing: get rid of the <font></font> tags! Now that you're using CSS, you don't need them anymore! Put class="but" in the <a> tag instead.
In the CSS you posted first, there are some more errors. Lightblue and darkblue are not valid colour names - use the hexadecimal values instead (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_colornames.asp">http://www.w3schools.com/css/css_colornames.asp</a><!-- m -->). There is no such thing as border-size. I guess what you're looking for is border-width (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_border.asp">http://www.w3schools.com/css/css_border.asp</a><!-- m -->).
Lastly, you have "font-family: impact;". Not everybody has the font Impact on their computers, so you should always (quoting W3C) "offer a generic family as a last alternative", like so: font-family: impact, verdana, arial, sans-serif;Originally posted by J.Karlsson
Another thing: get rid of the <font></font> tags! Now that you're using CSS, you don't need them anymore! Put class="but" in the <a> tag instead.
In the CSS you posted first, there are some more errors. Lightblue and darkblue are not valid colour names - use the hexadecimal values instead (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_colornames.asp">http://www.w3schools.com/css/css_colornames.asp</a><!-- m -->). There is no such thing as border-size. I guess what you're looking for is border-width (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_border.asp">http://www.w3schools.com/css/css_border.asp</a><!-- m -->).
Lastly, you have "font-family: impact;". Not everybody has the font Impact on their computers, so you should always (quoting W3C) "offer a generic family as a last alternative", like so: font-family: impact, verdana, arial, sans-serif;
Lightblue and Darkblue seem to alter the colour correctly. Also if they don't have the font 'Impact' won't it just display their default font?
Thanks again for your help,
NeilAlso with this code:
<style type="text/css">
a{
padding: 2px 5px 5px 5px;
background-color: lightblue;
border-style: solid;
border-width: 8px;
border-color:#550055 #770077 #550055 #770077
}
font.but{
font-family: impact;
font-size: 27px;
}
a:link{color: darkblue}
a:visited{color: darkblue}
a:hover {
color: lightblue;
background-color: darkblue;
border-color:#770077 #550055 #770077 #550055
}
a:active{color: #0000FF}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.bbc.co.uk"><font class="but">BBC</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.co.uk"><font class="but">Google</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.co.uk"><font class="but">Yahoo</font></a>
</body>
How come the top padding doesn't display in Netscape 7.1?
Thanks,
Neilanchor is an inline element and as such does not fully support "block" styles.Originally posted by Fang
anchor is an inline element and as such does not fully support "block" styles.
What do you mean by an 'inline element' and 'block styles'?
Thanks,
Neilinline: elements will follow the flow of the document without a (line) break. i.e. A and SPAN
block:elements will break before and after the element. i.e. DIV and P
invisible: not seen in the document. i.e. style and link
A short explaination (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3">http://www.w3.org/TR/REC-html40/struct/ ... ml#h-7.5.3</a><!-- m -->)
A longer explaination (<!-- m --><a class="postlink" href="http://www.ahuka.com/htmllevel1/blocklevel.html">http://www.ahuka.com/htmllevel1/blocklevel.html</a><!-- m -->)
It is very important to know the tags and their types; a block is not permitted within an inline tag.Thanks for that. I've changed the <font> tags to <span> tags, and put the border and background on them. I've also tried converting the hover function to the <span> tag, but without much sucess. Here's my code:
<style type="text/css">
span.but{
font-family: impact;
font-size: 27px;
padding: 2px 5px 5px 5px;
background-color: lightblue;
border-style: solid;
border-width: 8px;
border-color:#550055 #770077 #550055 #770077
/*move bit in red here, and remove 'a:'*/
}
a:link{color: darkblue}
a:visited{color: darkblue}
a:hover {
color: lightblue;
background-color: darkblue;
border-color:#770077 #550055 #770077 #550055
}
a:active{color: #0000FF}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.bbc.co.uk"><span class="but">BBC</span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.co.uk"><span class="but">Google</span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.co.uk"><span class="but">Yahoo</span></a>
</body>
Thanks again,
Neil
I've just started to learn CSS. When I do the following:
<style type="text/css">
a{
background-color: lightblue;
border-style: double;
color: darkblue;
border-color: #550055
border-size: 10px;
}
font.but{
font-family: impact;
font-size: 36px;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.bbc.co.uk"><font class="but">BBC</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.co.uk"><font class="but">Google</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.co.uk"><font class="but">Yahoo</font></a>
</body>
The border size doesn't change, and its colour is blue. But if I miss out the border size, the colour is purple, as it should be.
Also is there a decleration just to change the font colour?
Thanks,
NeilYou're missing a semicolon (
at the end of "border-color: #550055" - that could fix your problem!Also is there a decleration just to change the font colour?
You already have "color: darkblue;". Doesn't that change the font colour?Hi, thanks for the help, it worked! I didn't know CSS was so strict on these things. Anyway, color: darkblue changes the colour of the border aswell, I wondered if you could change the font colour on its own.
Thanks,
NeilOriginally posted by neil9999
Anyway, color: darkblue changes the colour of the border aswell, I wondered if you could change the font colour on its own.
Are you sure? Even after you added that missing semicolon?
Another thing: get rid of the <font></font> tags! Now that you're using CSS, you don't need them anymore! Put class="but" in the <a> tag instead.
In the CSS you posted first, there are some more errors. Lightblue and darkblue are not valid colour names - use the hexadecimal values instead (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_colornames.asp">http://www.w3schools.com/css/css_colornames.asp</a><!-- m -->). There is no such thing as border-size. I guess what you're looking for is border-width (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_border.asp">http://www.w3schools.com/css/css_border.asp</a><!-- m -->).
Lastly, you have "font-family: impact;". Not everybody has the font Impact on their computers, so you should always (quoting W3C) "offer a generic family as a last alternative", like so: font-family: impact, verdana, arial, sans-serif;Originally posted by J.Karlsson
Another thing: get rid of the <font></font> tags! Now that you're using CSS, you don't need them anymore! Put class="but" in the <a> tag instead.
In the CSS you posted first, there are some more errors. Lightblue and darkblue are not valid colour names - use the hexadecimal values instead (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_colornames.asp">http://www.w3schools.com/css/css_colornames.asp</a><!-- m -->). There is no such thing as border-size. I guess what you're looking for is border-width (see <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_border.asp">http://www.w3schools.com/css/css_border.asp</a><!-- m -->).
Lastly, you have "font-family: impact;". Not everybody has the font Impact on their computers, so you should always (quoting W3C) "offer a generic family as a last alternative", like so: font-family: impact, verdana, arial, sans-serif;
Lightblue and Darkblue seem to alter the colour correctly. Also if they don't have the font 'Impact' won't it just display their default font?
Thanks again for your help,
NeilAlso with this code:
<style type="text/css">
a{
padding: 2px 5px 5px 5px;
background-color: lightblue;
border-style: solid;
border-width: 8px;
border-color:#550055 #770077 #550055 #770077
}
font.but{
font-family: impact;
font-size: 27px;
}
a:link{color: darkblue}
a:visited{color: darkblue}
a:hover {
color: lightblue;
background-color: darkblue;
border-color:#770077 #550055 #770077 #550055
}
a:active{color: #0000FF}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.bbc.co.uk"><font class="but">BBC</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.co.uk"><font class="but">Google</font></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.co.uk"><font class="but">Yahoo</font></a>
</body>
How come the top padding doesn't display in Netscape 7.1?
Thanks,
Neilanchor is an inline element and as such does not fully support "block" styles.Originally posted by Fang
anchor is an inline element and as such does not fully support "block" styles.
What do you mean by an 'inline element' and 'block styles'?
Thanks,
Neilinline: elements will follow the flow of the document without a (line) break. i.e. A and SPAN
block:elements will break before and after the element. i.e. DIV and P
invisible: not seen in the document. i.e. style and link
A short explaination (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3">http://www.w3.org/TR/REC-html40/struct/ ... ml#h-7.5.3</a><!-- m -->)
A longer explaination (<!-- m --><a class="postlink" href="http://www.ahuka.com/htmllevel1/blocklevel.html">http://www.ahuka.com/htmllevel1/blocklevel.html</a><!-- m -->)
It is very important to know the tags and their types; a block is not permitted within an inline tag.Thanks for that. I've changed the <font> tags to <span> tags, and put the border and background on them. I've also tried converting the hover function to the <span> tag, but without much sucess. Here's my code:
<style type="text/css">
span.but{
font-family: impact;
font-size: 27px;
padding: 2px 5px 5px 5px;
background-color: lightblue;
border-style: solid;
border-width: 8px;
border-color:#550055 #770077 #550055 #770077
/*move bit in red here, and remove 'a:'*/
}
a:link{color: darkblue}
a:visited{color: darkblue}
a:hover {
color: lightblue;
background-color: darkblue;
border-color:#770077 #550055 #770077 #550055
}
a:active{color: #0000FF}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.bbc.co.uk"><span class="but">BBC</span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.co.uk"><span class="but">Google</span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.yahoo.co.uk"><span class="but">Yahoo</span></a>
</body>
Thanks again,
Neil