How do I style hyperlinks separately, using CSS? - html

Question

I want to style different hyperlinks in different ways. Right now, I have a button that is a hyperlink, and I want to add a text that should act like a hyperlink too. How do I do this without styling both hyperlinks together. I want each hyperlink to have different colors, positioning etc.
CSS
.example2 {
text-decoration: none;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CC4A31;
color: #444;
border-radius: 9px;
position: absolute;
top: 16px;
left: 38px;
height: 50px;
width: 145px;
webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
vertical-align: middle;
text-align: center;
line-height: 50px;
}
.example {
color: black;
}
HTML
<div class="example2">
GameTrade
</div>
<div class="example">
Sign in
</div>
Now how do I add another hyperlink, that is styled separately?

Answer 1

What you call styles, is, in case you don't know also called CSS, which stands for Cascade Style Sheets, this type of language allows you among other things to specify an hierarchy between rules.
Having said this, in CSS you can have 3 basic types of style rules, the ones that target the TAG of elements, the ones that target the class of elements (<a class="foo">my link</a>) and the ones that target elements by ID (<a id="btnSubmit">submit</a>), I obviously hide much information here with the intent to make it simple for you to understand.
So to achieve your end, you can create a rule that targets elements with TAG <a>, and in rule you specify the properties that are generic to all links.
This gives you what you already have, now to target different links you have two options or you give then diferente IDs and you target each separately, or you add one class to the class attribute so you can distinguish between both.
Here is an example:
HTML
<a class="link-trade1" href="">GameTrade 1</a><br/>
<a class="link-trade2" href="">GameTrade 2</a>
CSS
a {
text-decoration: none;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CC4A31;
color: #444;
border-radius: 9px;
webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
vertical-align: middle;
text-align: center;
}
.link-trade1{
position: absolute;
top: 16px;
left: 38px;
height: 50px;
line-height: 50px;
width: 145px;
}
.link-trade2{
position: absolute;
top: 16px; /* other y position for the link 2 */
left: 38px; /* other x position for the link 2 */
height: 50px;
line-height: 50px;
width: 145px;
}
You can switch the class name for IDs if you don't intent to reuse the rules targeting that specific classes.
Anyway there is a very good book you can read, if you are new to CSS and HTML, by Freeman.
Happy Coding.
Update
The updated question is a good example, just watch this:
/* this rule targets all hyperlinks inside, elements (div in your case) with attribute class="example" */
.example a{
...
}
/* this rule targets all hyperlinks inside, elements with attribute class="example2" */
.example2 a{
...
}
So as you can see, remember the hierarchy I was talking about? Is because of this, in the example just above you first target specific div's the ones with example class or example2 class and then you specify which elements to style inside them. You can build more elaborated rules!

Answer 2

Using your HTML
<div class="example2">
GameTrade
</div>
<div class="example">
Sign in
</div>
I'm guessing the styling isn't working because there is CSS overriding yours. Try this CSS:
.example2 a {
color: #444;
}
.example a {
color: black;
}
If that doesn't work try adding !important tags.