Define 3 types CSS style in one page

[cguan_77]

hi, would it be possible to define different type of css style in one body of html.. or declare different css styles in one page....

for example:
line 1 would define css style 1
line 2 another css declaration
line 3 another css declaration

any ideas is greatly appreciated... or is it the one i' m trying to accomplish is not possible? :) thanks

[Zaq]

I'm not too sure whether you're talking about levels of CSS (CSS1, CSS2, etc) or actual styles (which seems unlikely to me). Anyway, you asked for ideas, so these might help...

http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax
http://en.wikipedia.org/wiki/CSS_filter
http://en.wikipedia.org/wiki/Conditional_Comments

[cguan_77]

hi zaq, thanks for the reply...

what i want is something like this:

this code below if i used it, it's applicable to the whole page..

what i want is to declare different type of text css style in one page..

how to achieve it... thanks.. any ideas guys?

<style type="text/css">

a{text-align:center;display:block;  text-decoration:none; font-size:13px; width:9em; color:#8d4f10; font-family: "Verdana", sans-serif;}

a:link, a:visited {background: #efb57c; border:4px outset #efb57c;}
a:focus, a:hover {background:#DAA670; border:2px outset #DAA670; color: black;}
a:active {background: #BB8E60;}
</style>

[richie513]

Hi there Cguan, First of all, Yes I am thinking that you can do this, and it will work. However, if you want to use these styles for all links on your whole website (every page), I would be putting these styles into an external style sheet then link that style sheet to every page in your website. However if it is just the one page you want these styles to be on, then yes this should work. I am not 100% confident, but from what I have studied so far with CSS, this can be done. Just one more note, If you are wanting to use different styles with different links on the one page, then you would need to embed those style's directly into your link code something like this: <a href="somepage" style="somestyle">page/link name here</a>. I hope this helps you with your question.

Regards
richie513

[cguan_77]

hi richie513, thanks for the reply.. you are wanting to use different styles with different links on the one page, then you would need to embed those style's directly into your link code something like this: <a href="somepage" style="somestyle">page/link name here</a>. I hope this helps you with your question. that's what i exactly want to do want to use different style in one page.. so you said i need to code like this:

<a href="somepage" style="somestyle">page/link name here</a>

so in my css declaration it should be like this or how to declare? or how to call different type of css style? thank you.. :)

<style type="somestyle">
'code goes here
</style>

<style type="anotherstyle">
'code goes here
</style>

[richie513]

Ok to use different styles on the page, you need to embed that style to the element you want styled. so the code you would use as an example would be like this:

This example would be for a link

<a href="exampleLink" style="example style">The name of your link here</a>

This example would be for a heading:

<h1 style="examplestyle">Embedding Styles</h1>

So this is how you embed styles directly to the elements you want styled differently on the one page.

There are a few ways you can embed styles, it depends on the coders guidelines, another way to do this which i think would be better for what you want, is to take a look at this example:

http://www.eskimo.com/~bloo/indexdot/css/examples/cssembedded.htm

I think this example would help you out very much, let me know how you go.

Regards
richie513

[almostbob]

selector.class:psuedoclass { property: value }

a { text-decoration: none; border: 1px solid #000000; margin:5px; padding:5px; }
a:hover { background-color: #66cdaa; text-decoration: none; } 
a:focus { background-color: #66cdaa; text-decoration: none; } 
a:active { background-color: #66cdaa; text-decoration: none; } 
a.red { text-decoration: none; color:#ff0000; }
a.red:hover { background-color: #00ffff; text-decoration: none; } 
a.red:focus { background-color: #00ffff; text-decoration: none; } 
a.red:active { background-color: #00ffff; text-decoration: none; } 
a.blue { text-decoration: none; color:#0000ff; }
a.blue:hover { background-color: #ffff00; text-decoration: none; } 
a.blue:focus { background-color: #ffff00;  text-decoration: none; } 
a.blue:active { background-color: #ffff00;  text-decoration: none; } 
a.green { text-decoration: none; color:#00ff00; }
a.green:hover { background-color: #ff00ff; text-decoration: none; } 
a.green:focus { background-color: #ff00ff; text-decoration: none; } 
a.green:active { background-color: #ff00ff; text-decoration: none; }
a.yellow { text-decoration: none; color:#ffff00; }
a.yellow:hover { background-color: #0000ff; text-decoration: none; } 
a.yellow:focus { background-color: #0000ff; text-decoration: none; } 
a.yellow:active { background-color: #0000ff; text-decoration: none; }

<a href='#'>plain</a>
<a class='red' href='#'>red</a>
<a class='green' href='#'>green</a>
<a class='blue' href='#'>blue</a>
<a class='yellow' href='#'>yellow</a>

Trivial example, but yes it is easy to do

[cguan_77]

thanks guys, for all the help...i'll post the code when i'm done with it.. :)

[cguan_77]

thanks richie513, thanks bob... :)

[richie513]

Glad to help:)