Previous Message
Next Message

Style Element within Body Tag

Sent by Sandy McMurray on 9 September 2003 20:08


> I was trying to indicate which page the user was on by targeting the
> relevant link on each page using css in an include. I should be OK to 
> put
> the css code in an external css file.

Steven,

You can't use <style> tags in the body of a page, but you *can* use CSS 
in the body, by modifying other tags.

For example, instead of this:

	<html>
	<head>
		<title>Example #1</title>
		<style>
			p { font-size:100%;color:#000000; }
			h1 { font-size:150%; color:#000099; }
		</style>
	</head>

	<body>
		<h1>Big heading, dark blue.</h1>
		<p>Regular paragraph, 100% text size, black text.</p>
	</body>
	</html>


You could do this:

	<html>
	<head>
		<title>Example #2</title>
	</head>

	<body>
		<h1 style="font-size:150%;color:#000099;">Big heading, dark blue.</h1>
		<p style="font-size:100%;color:#000000;">Regular paragraph, 100% text 
size, black text.</p>
		<p style="font-size:90%;color:#006600;">Regular paragraph, smaller 
text size, dark green.</p>
	</body>
	</html>


Note also that if your goal is to have a style for the current page in 
a menu, you can set up a specific CSS class for that exact purpose:

	<html>
	<head>
		<title>Example #3</title>
		<style>
			.activelink a:link, .activelink a:visited, .activelink a:hover { 
color:red; text-decoration:none; }
		</style>
	</head>

	<body>
		<a href="home.html">home page</a>
		<a href="example1.html">example #1</a>
		<a href="example2.html">example #2</a>
		<a class="activelink" href="">This page</a>
	</body>
	</html>

Take this one step further, and you can make a cool menu using CSS, as 
Al Sparber has done here:
http://www.projectseven.com/tutorials/css_menus/list_01/

I adapted this technique for the site I just finished, to make a simple 
text menu for each page:
http://www.dorschedit.ca/

- - -

SMc
--
Sandy McMurray, Editor
Technology in Plain Language
http://www.TechStuff.ca/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: