...

View Full Version : How does applying custom CSS class to a tag work



Vijay Venkat
01-26-2005, 11:04 AM
Hi
This is about using a custom class for <a> tags and getting it working.

The custom class definition is
----------------------------
CustomLink:link {font-family:Arial;font-size:12pt;color:#664400}
CustomLink:active {font-family:Arial;font-size:10pt;color:#ff8802}
CustomLink:visited {font-family:Arial;font-size:10pt;color:#996633}

I am setting CSS propety for <a> tag to the class mentioned above. The name of the class is CustomLink. When i set this class to 'CustomLink' on <a>
like : <a href="http://www.google.com" class="CustomLink">Google</a>
This works fine. I don't understand the concept as to how it works.

Does 'CustomLink' get Aliased to 'a' when used with in <a> tag. I thought decalartion as one given below should work rather the the 'CustomLink' definition.

A:link {font-family:Arial;font-size:12pt;color:#664400}
A:active {font-family:Arial;font-size:10pt;color:#ff8802}
A:visited {font-family:Arial;font-size:10pt;color:#996633}

What is the rule and how is it expected to work. Can anyone let me know how it basically works or point me to approriate link which talks about this kind of setting.

I am totally new to CSS and i am in learning phase.

Thanks,
Vijay Venkataraman
-----------------------------------------------------------------------------------------------------
Knowing the concept is the right way to learn than trying to get a quick answer for the question in hand.
-----------------------------------------------------------------------------------------------------

_Aerospace_Eng_
01-26-2005, 11:14 AM
setting a class to the link and then using a:link or a:hover or w/e after will define only elements with that class, while the other way a:link or a:hover or similar will define all elements matching that so for example i can have a paragraph tag and define the css for ALL paragraph tags (except for ones that have classes or ids or names) like this

p {width:300px;height:200px;color:#000099;}
or i can do something like this with the html being

<p class="mytext">text here</p>
and then defining it in css like this

.mytext p {width:300px;height:200px;color:#000099;}
only the paragraphs with class "mytext" will be formatted the way i defined them in the css, for more on css go to http://www.w3schools.com

ronaldb66
01-26-2005, 11:56 AM
The issue at hand is all about selectors. The general format of a style rule is:

selector {properties}
The selector determines to which elements the properties are applied, and can be a combination of a number of elementary selectors and combinators.

A thorough tutorial on selectors can be found at Maxdesign: Selectutorial (http://css.maxdesign.com.au/selectutorial/index.htm); start straight away with the first topic (under "Rules") to learn about the various selectors.

Vijay Venkat
01-26-2005, 01:50 PM
Hi

_Aerospace_Eng_ : What i understand is that if i had set the styles on link as
A:link {someStyle}
A:visited {someStyle}
This would have globally affected all links in the pages.

While using the 'CustomLink' would affect the links selectively where ever i am using them.

Hope my understanding is correct.

_Aerospace_Eng_ and ronaldb66 : Thanks for the clarification and the links. I will give a look at them.

Have a good day.

Thanks,
Vijay Venkataraman

_Aerospace_Eng_
01-26-2005, 08:11 PM
yep thats what i was saying

chilipie
01-26-2005, 09:17 PM
.mytext p {width:300px;height:200px;color:#000099;}

Wouldn't that be:

p.mytext {width:300px;height:200px;color:#000099;}
:confused:

]|V|[agnus
01-27-2005, 05:19 AM
Yes, it would.

".mytext p" would target all paragraphs within any element of the class "mytext".



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum