Quick html question

Miscellaneous Forums/General Discussion/Quick html question

Question 1:
I'm using CSS styles throughout my site, however, I have one particular font type at a particular size etc that I use for different titles - and I want to have them as different colours depending on the page. Rather than create a different style for each one of these, I want to also use the <font colour="whatever"> tag. Which works fine. BUT: can I also make it have a different 'hover' colour? At the moment, with the font colour tag, it completely disables any hover attributes in the CSS style.

Question 2:
Can I 'name' a colour in the CSS sheet and use that throughout the site, either in text chunks or backdrop colours etc? I would like to do this so that, if I so wanted, I could just change the colour value once in order to change the entire site.

Cheers...

Sledge

Regarding q1, I would resort to inline css rather than a FONT tag (not least because they're a thing of the past).

Perturbatio

I would avoid using the font tag altogether it's deprecated (and it's EVIL, it eats small children you know...)

page1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-uk" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<meta name="author" content="" />
	<meta name="Copyright" content="" />

	<meta name="description" content="" />
	<meta name="keywords" content="" />  
	<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="switch.css">
</head>

<body id="page1">
<h1>Page 1</h1>
<a href="page2.html">Page 2</a>
</body>
</html>

page2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-uk" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<meta name="author" content="" />
	<meta name="Copyright" content="" />

	<meta name="description" content="" />
	<meta name="keywords" content="" />  
	<title>Page 2</title>
<link rel="stylesheet" type="text/css" href="switch.css" />
</head>

<body id="page2">
<h1>Page 2</h1>
<a href="page1.html">Page 1</a>

</body>
</html>

switch.css

body#page1 h1 {
	color: red;
}

body#page2 h1 {
	color: green;
}

as regards naming a colour, no you can't, but a better way is to create a class (i.e.

.green {
color:green;
}

<body>
This is <strong class="green">Green Text</strong>, this isn't.
</body>

mrtricks

Okay, cheers...

mrtricks

Right, I understand what deprecated means now...!

Then, a further question towards the same end:
Can I create a class in a CSS style sheet which is, say, Arial Bold 16 point, but then use it several times in a page, each time being a different colour? Or do I literally have to create a different class for every single one? The reason I ask is, it seems wasteful to create a whole new class if I only want it for one word of text...

fredborg

You can do this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<p class="myfont green">this is some text bla bla bla</p>
<p class="myfont blue">this is some more text but in a different color</p>
</body>
</html>

And use this test.css:

.myfont{
	font-size: 20px;
}

.green{
	color: #00FF00;
}

.blue{
	color: #0000FF;
}

Rob Farley

Further to this discussion...

I would strongly advise not calling classes things like Green or Blue, I appreicate these were used purely for demonstration purposes, however, in your website avoid referring to colours by names, call the, things like mainheader, subheader, newsitem etc etc. Make the class names ambiguous.

This way if you ever change the colours of your site radically then you won't get a class called 'green' that is infact red text etc.

Perturbatio

Another point, if you care about accessibility, don't specify fixed point or pixel sizes for fonts, use relative units like em's

i.e.

body {
font-size: 0.9em; /*set base font size*/
}

h1 {
font-size: 1.5em;
}

p strong {
font-size: 1.1em;
}

Rob Farley

you have to be careful with EMs though as they inheiret from what they're wrapped in so if you have nested divs you might end up with tiny text or massive text depending on what your ems are doing...

ie if you have a <div class="news"> with a <div class="news"> within it and the class news has an em of .9 you will get the font size decreased by .9 in the first div and the .9 smaller in the nested div. Which can lead to serious pains in the arse!

mrtricks

#10

OK, another question: can you have the equivalent of an #include? i.e. I have a page which goes (e.g.):

Blah blah
Waffle
Blah blah
~include "inserted-code.html"
Blah blah
Etc

Rob Farley

#11

You can't with html, that's where you need to start using php

mrtricks

#12

Okey-dokey, cheers...

Sledge

#13

Well you *could* use an iframe but then you'd be stuck with a(n ill-favoured) transitional rather than strict standard. On how to define font sizes, you can alter text size in Firefox regardless of which unit is used (or so it seems) so as long as your visitors are sensible accessibility should be fine.

mrtricks

#14

iframe is exactly what I was after, thanks!