• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

CSS gurus help me sort out this class stuff!

M

Maverick2002

Diamond Member
Ok, I'm trying to add a few style classes. Now I know that for every new class on a page the code is <span class="class-name">stuff that you want to be affected</span>. So far, I'm trying to get two classes to work. This is what they look like:


<STYLE type="text/css"><!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {background: #F4F4F4; text-decoration: underline overline;}



.class2 A:link {text-decoration: color: red;}
.class2 A:visited {text-decoration: color: red;}
.class2 A:hover {text-decoration: underline overline; color: #F4F4F4}
--></STYLE>

These are just examples. I'm having problems. For starters, is it possible to make the first class (the one without a name) to be the default (that is, used on all pages except where <span class="class2">stuff</span> is specified)?

Also, for the second class (or for any class in general) how do I make the default link colors a certain color? Because the pages seem to default to the usual blue regular, purple visited, etc. I tried to bypass this (specifying a color for each link in the HTML) but then the hover color doesn't work. Am I asking for the impossible? Help!
 
ok, first off, you mean CSS, not CCS 😉

now, onto your questions;
this....
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {background: #F4F4F4; text-decoration: underline overline;}
Click to expand...

will affect EVERY link, because you've made the class for every link by not specifiying a class name. So yes it is kinda "default"

2nd, i think your syntax is wrong in the 2nd group
.class2 A:link {text-decoration: color: red;}
.class2 A:visited {text-decoration: color: red;}
.class2 A:hover {text-decoration: underline overline; color: #F4F4F4}
Click to expand...

should look like this;

A.class2:link

to make the link have a different colour by default add "color: #FF0000;" (no quotes) into A:link {text-decoration: none;}

eg.

A:link {text-decoration: none; color: #FF0000;}

also, if u want, you can just put the class name directly into the link
<a href="http://www.anandtech.com" class="class2">Anandtech</a>

Here's an example of an old CSS sheet of mine


body {
position: absolute; left: 0px; top: 0px; visibility: visible; z-index: 1;
background-color: rgb(255,255,255); background: url(images/bg.gif); width: 100%;
scrollbar-face-color: rgb(255,255,204); scrollbar-shadow-color: rgb(225,225,225); scrollbar-highlight-color: rgb(225,225,225);
scrollbar-3dlight-color: rgb(225,225,225); scrollbar-darkshadow-color: rgb(225,225,225); scrollbar-track-color: rgb(150,150,150);
scrollbar-arrow-color: rgb(140,140,255)}
}

/* Header Styles */
h1.titleinfo {
position: absolute; left: 5px; top: 10px; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bold; font-style: italic; color: rgb(30,30,30);
}
h1.section {
position: relative; visibility: visible; z-index: 5; text-align: center;
font-family: Helvetica, Courier, serif; font-size: 0.8em;
font-weight: bold; color: rgb(140,140,255); background-color: rgb(225,225,225);
}
h1.feature {
position: relative; visibility: visible; z-index: 5; text-align: center;
font-family: Helvetica, Courier, serif; font-size: 1.15em;
font-weight: bold; color: rgb(97,97,51); background-color: rgb(225,225,225);
}
/* End Header Styles */

/* DIV Styles */
div.title {
position: absolute; left: 0px; top: 0px; width: 100%; height: 60px; visibility: visible; z-index: 2;
background-color: rgb(255,255,204); border-width: thin; border-color: rgb(225,225,225); border-style: groove;
}
div.section {
position: absolute; left: 3px; top: 70px; width: 23%; overflow: auto; visibility: visible; z-index: 2;
background-color: rgb(255,255,204); border-width: thin; border-color: rgb(225,225,225); border-style: groove;
}
div.banner {
position: absolute; left: 23%; top: 100px; width: 468; height: 55; visibility: visible; z-index: 2; text-align: center;
background-color: rgb(255,255,204); border-width: thin; border-color: rgb(225,225,225); border-style: groove;
}
div.nav {
position: absolute; left: 25%; top: 70px; width: 75%; height: 25px; visibility: visible; z-index: 2; text-align: left;
background-color: rgb(255,255,204); border-width: thin; border-color: rgb(225,225,225); border-style: groove; vertical-align: text-bottom;
}
div.feature {
position: absolute; left: 25%; top: 175px; width: 75%; overflow: scroll; visibility: visible; z-index: 2; text-align: center;
background-color: rgb(255,255,204); border-width: thin; border-color: rgb(225,225,225); border-style: groove;
}
div.content {
position: absolute; left: 25%; top: 100px; width: 75%; height: 210; overflow: scroll; visibility: visible; z-index: 2;
background-color: rgb(255,255,204); border-width: thin; border-color: rgb(225,225,225); border-style: groove;
}
div.copylink {
font-family: Helvetica, Courier, serif; font-size: 0.75em; text-align: center;
position: absolute; left: 20%; top: 88%; width: 60%; visibility: visible; z-index: 2; overflow: auto;
background-color: rgb(255,255,204); border-width: thin; border-color: rgb(225,225,225); border-style: groove;
}
div.spacer {
font-family: Helvetica, Courier, serif; font-size: 0.1em;
position: absolute; left: 20%; top: 98%; width: 60%; visibility: visible; z-index: 0;
}
/* End DIV Styles */

/* Link Styles */
a.titlename {
text-decoration: none; color: rgb(0,0,0);
position: absolute; right: 10px; top: 30px; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1.25em; font-weight: bold; font-style: italic;
}
a.titlelogo {
position: absolute; right: 25px; top: 0px; visibility: visible; z-index: 3;
font-family: Helvetica, Courier, serif; font-size: 3em;
font-weight: bold; font-style: italic; color: rgb(225,225,225);
}

a.titleinfo:link {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bold; color: rgb(90,90,90);
}
a.titleinfo:visited {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bold; color: rgb(90,90,90);
}
a.titleinfo:hover {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em; text-decoration: none;
font-weight: bold; color: rgb(140,140,255); background-color: rgb(225,225,225);
}
a.titleinfo:active {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bold; color: rgb(97,97,51);
}

a.section:link {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 0.8em;
font-weight: bold; color: rgb(97,97,51);
}
a.section:visited {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 0.8em;
font-weight: bold; color: rgb(0,0,0);
}
a.section:hover {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 0.8em;
font-weight: bold; color: rgb(140,140,255); text-decoration: none;
}
a.section:active {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 0.8em;
font-weight: bold; color: rgb(225,225,225);
}

a.feature:link {
position: relative; visibility: visible; z-index: 5; letter-spacing: 0.25em;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bolder; color: rgb(97,97,51);
}
a.feature:visited {
position: relative; visibility: visible; z-index: 5; letter-spacing: 0.25em;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bolder; color: rgb(0,0,0);
}
a.feature:hover {
position: relative; visibility: visible; z-index: 5; letter-spacing: 0.25em;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bolder; color: rgb(140,140,255);
}
a.feature:active {
position: relative; visibility: visible; z-index: 5; letter-spacing: 0.25em;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bolder; color: rgb(225,225,225);
}

a.copylink:link {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bold; color: rgb(90,90,90);
}
a.copylink:visited {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bold; color: rgb(90,90,90);
}
a.copylink:hover {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em; text-decoration: none;
font-weight: bold; color: rgb(140,140,255); background-color: rgb(225,225,225);
}
a.copylink:active {
position: relative; visibility: visible; z-index: 5;
font-family: Helvetica, Courier, serif; font-size: 1em;
font-weight: bold; color: rgb(97,97,51);
}
/* End Link Styles */

/* List Styles */
ul.section {
position: relative; left: -20px; top: -10px; visibility: visible; z-index: 5; list-style-type: circle;
font-family: Helvetica, Courier, serif; font size: 1em; color: rgb (0,0,0)
}

ul.content {
position: relative; left: 0px; top: 10px; visibility: visible; z-index: 5; list-style-type: circle;
font-family: Helvetica, Courier, serif; font size: 1em; color: rgb (0,0,0)
}
/* End List Styles */


Hope this helps
 
You can also use CSS styles in P tags, form tags, whatever. So you can do:

-- stylesheet.css ---

.text {
color: #ffffff;
font-style: Tahoma Bold;
}

<p class="text">

text goes here




or even:


<input type="text" name="textstring" style="border: 1px inset; border-color: #CECECE;">

 
Actually .class2 A:link works but A.class2:line doesn't.

Anyway, if in the "default" style I've specified a background color for the link hover, do I have to specify one in the other classes? Because it seems like if I don't it gets carried over from the default class.
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top