|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
||||
|
||||
|
I have CSS for handeling links.
Code:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF;
text-decoration: none;
; font-style: normal
}
My problem is that at some few places I want to alter the link text to be at bit smaler. How could I acomplish this? ![]() |
|
#2
|
||||
|
||||
|
Create another style in the stylesheert.
i.e. a.classname {font-size: 10px;} then when you create the link use the class attribute. i.e. <a class="classname" href="linkpage.asp">Link Text</a> Hope that helps.
__________________
Never sign your code....it leaves you liable! |
|
#3
|
||||
|
||||
|
That was the first thing I tried.
But wont work. I've allso tried to make a new style with a new set of link styles within... But still doesn't work. Code:
.submenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #0000FF;
text-decoration: none;
; font-style: normal
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #0000FF;
text-decoration: none;
; font-style: normal
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FF0000;
text-decoration: underline;
; font-style: normal
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal; color: #0000FF;
text-decoration: underline;
}
}
Any Ideas? ![]() |
|
#4
|
||||
|
||||
|
I use that all the time!! That was ripped out of a CSS that I'm using at the moment!
Try putting the general a.link a.hover etc at the bottom of the CSS and the custom classes at the top. After all CSS can be picky about ordering and comments. |
|
#5
|
|||
|
|||
|
Noodles way should work
![]() <html> <head> <style> a:link { color: blue; font-size: 10px; text-decoration: underline } a:active { color: blue; font-size: 10px; text-decoration: underline } a:visited { color: blue; font-size: 10px; text-decoration: underline } a:hover { color: green; font-size: 10px; text-decoration: none } a.menu:link { color: red; font-size: 14px; font-weight: bold; text-decoration: underline } a.menu:active { color: red; font-size: 14px; font-weight: bold; text-decoration: underline } a.menu:visited { color: red; font-size: 14px; font-weight: bold; text-decoration: underline } a.menu:hover { color: green; font-size: 14px; font-weight: bold; text-decoration: none } </style> </head> <body> <p><a href="#" class="menu">Menu Link 1</a><br> <a href="#" class="menu">Menu Link 2</a></p> <p><a href="#">Normal Link 1</a><br> <a href="#">Normal Link 2</a></p> </body> </html> |
|
#6
|
||||
|
||||
|
Got it working now... thanks. I allso had a typo error, wich I didn't see before...
![]() |
![]() |
| Viewing: Dev Shed Forums > Web Design > CSS Help > Overwriting a CSS style once. |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|