• 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.

Changing font size and type within a class using CSS

4

46andtool

Member
Im sure this is very simple but I need help, I started making a webpage and Im still a complete noob. I googled for the answer and I am trying what was suggested on multiple sites but for some reason its not working. What I am trying to do is change the font size and type within a div class for a set of links. Now I also want these links to have a class so that I can add further links in the body of the page if need be who dont share the same font properties as the main links. Confused yet?

Here is my code so far: HTML


Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Vibrant Arizona Pool Cleaning Service</title>
<style>
	@import url('vibrant_az.css')
</style>
</head>

<body>
<div id="navigation">
<a href="www.anandtech.com" class="main_link">Contact Us</a>
<a href="www.tomshardware.com" class="main_link">services</a>
</div>
<image src="Arizona-Desert1.jpg">
<div id="main">

<h1>content goes in here</h1>


</div> 



</body>

</html>

And CSS:

Code: 
	a:link {color:#B3A598;}  
	a:visited {color:#00FF00;}
	a:hover {color:#FF00FF;}
	a:active {color:#0000FF;} 
	
	a:link {text-decoration:none;}
	a:visited {text-decoration:none;}
	a:hover {text-decoration:none;}
	a:active {text-decoration:none;}

body {
	background-color: #6F5F50;
	
 	

	}


#main {
	background-color: #342A28;
	width: 800px;
	margin: 0 auto;
	font: 14px Helvetica, sans-serif;

	}

#navigation {

	background-color: #342A28;
	
	}

navigation.main_link {

	font: 14px Helvetica, sans-serif;

	}

Thanks guys!
 
1) Don't use underscores in class names or IDs, use dashes instead (https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names)

2) Avoid CSS import (https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport)

3) Stay DRY (don't repeat yourself). The following CSS rules:
Code: 
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
Can be rewritten as:
Code: 
a:link, a:visited, a:hover, a:active {text-decoration:none;}
 
Last edited:
ejjpi said:
1) Don't use underscores in class names or IDs, use dashes instead (https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names)

2) Avoid CSS import (https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport)

3) Stay DRY (don't repeat yourself). The following CSS rules:
Code: 
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
Can be rewritten as:
Code: 
a:link, a:visited, a:hover, a:active {text-decoration:none;}
Click to expand...

Your help is invaluable and will save me time down the road. thanks!
 
how would I go about adding a class to a link, would it just be

<a href="www.anandtech.com" class="mainlink">Contact Us</a>

like that?
 
you have to specify the url protocol in the href and I would use a dash to separate words in the class name to improve readabilty:

Code: 
<a href="http://www.anandtech.com" class="main-link">Contact Us</a>
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top