How do I create a styleClass to use this CSS? - css

Question

How do create a styleClass for the following CSS? I want it only to be used in one particular section of the form - the tabbed menu - and not affect anything else. If I leave it as is, everything on the form is affected by it.
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ff9c2a;
}

Answer 1

You need to add a class to your link, and reference that in your CSS.
With the markup:
My Link
And with the CSS:
a.myClass:link,a.myClass:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a.myClass:hover,a.myClass:active
{
background-color:#ff9c2a;
}

Answer 2

You can set a class in html like this:
hello world
And then you can limit the styles to this class in css like this:
a.someclass:link, a.someclass:visited {
...
}
a.someclass:hover, a.someclass:active {
...
}

Answer 3

You'll need to add a class or ID to do so.
For you tab you can use an ID like this:
<div id="specialTab">
Lorem Ipsum
</div>
and change your CSS like this:
#specialTab a:link, #specialTab a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#specialTab a:hover, #specialTab a:active
{
background-color:#ff9c2a;
}

Answer 4

There are two ways.
1) Give each element a class ("tab" in this case):
a.tab:link, a.tab:visited { ... }
2) Use a container group. Say your tab menu has id "tabMenu":
#tabMenu a:link, #tabMenu a:visited { ... }

Answer 5

I would put the menu in a div with the id 'menu'
Then just
#menu a:link, #menu a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover,#menu a:active
{
background-color:#ff9c2a;
}

Answer 6

If you like to style just a section in a form part you can give this section an Id like here:
<form>
<fieldset>
<ul>
<li id="style-me"> </li>
<li> </li>
</ul>
<fieldset>
</form>
#style-me a:link, #style-me a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ff9c2a;
}

Answer 7

To apply styles on specific parts of your html you must use selectors:
First add div or other tag with unique id set around elements you need to change.
<div id="zone_name">
link
<span>text</span>
</div>
In style add id selector and tag name
#zone_name a {
/*style attributes for a tag in zone_name*/
}
#zone_name span {
/*style attributes for span tag in zone_name*/
}

Answer 8

With specificity, either assign a class or use the class of closest parent to style your <a> tags. e.g.
.tabbed-menu a:link, .tabbed-menu a:visited {
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.tabbed-menu a:hover, .tabbed-menu a:active {
background-color:#ff9c2a;
}
Where .tabbed-menu would be the class used by your menu.