# External Style Sheet Help



## Asylum (May 24, 2012)

I need to change the background color of a hyper link in an External Style Sheet.

Does anyone know the code for that or do I have to use in-line on my html page?


----------



## GSG-9 (May 24, 2012)

We need more info.
Show me the head of the document in a PM, I need to know if you have included the css already.
Alternatively if you want to change the color of every hyperlink add this to your head:


```
<style type="text/css">
a {color:#123456;}
</style>
```


----------



## FordGT90Concept (May 24, 2012)

Linking stylesheets (should always be in the HTML HEAD tag):
http://www.w3schools.com/css/css_howto.asp

```
<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css" />
 </head>
```

Modifying anchor pseudo-class:
http://www.w3schools.com/css/css_pseudo_classes.asp

```
a:link {color:#FF0000;}      /* unvisited link */
 a:visited {color:#00FF00;}  /* visited link */
 a:hover {color:#FF00FF;}  /* mouse over link */
 a:active {color:#0000FF;}  /* selected link */
```


----------



## Asylum (May 24, 2012)

I tried it like this (style sheet)
body { background-color: #ffffff;
		color: #000099; 
     font-family: Arial, Helvetica, sans-serif; }

h1 { color:#ff0000;
     font-family:"Times New Roman"; }

#hyperlink  {background-color: #cccccc; }

This is the web page im building for class.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Back to the Future</title>
<meta charset="utf-8">
<link rel="stylesheet" href="format1.css">
</head>
<body>
<h1>Back to the Future</h1>
<p>The film tells the story of Marty McFly, a teenager who is accidentally sent back in time from 1985 to 1955.<br> He meets his future-parents in high school and accidentally attracts his future mother's romantic interest.<br> Marty must repair the damage to history by causing his parents-to-be to fall in love,<br> and with the help of scientist Dr. Emmett "Doc" Brown, he must find a way to return to 1985.</p>
<ul>
	<li>Michael J. Fox</li>
	<li>Christopher Lloyd</li>
	<li>Crispin Glover</li>
	<li>Lea Thompson</li>
	<li>Thomas F. Wilson</li>
</ul>

<a href="http://www.imdb.com/title/tt0088763/">Back to the Future, IMDB</a>
<br>
<br>
<a href="mailto:kelvin@holland.net">kelvin@holland.net</a>

</body>
</html>


----------



## GSG-9 (May 24, 2012)

In that case my code will work great to just get it done, FordGT's code is more granular if you want specifics.


----------



## Asylum (May 24, 2012)

GSG-9 said:


> In that case my code will work great to just get it done, FordGT's code is more granular if you want specifics.




I put the code in but it still doesnt work.

Could it be my IE8?

body { background-color: #ffffff;
		color: #000099; 
     font-family: Arial, Helvetica, sans-serif; }

h1 { color:#ff0000;
     font-family:"Times New Roman"; }

<style type="text/css">
a {color:#cccccc;}
</style>


----------



## GSG-9 (May 24, 2012)

> <style type="text/css">
> a {color:#cccccc;}
> </style>



That part MUST go in the head of the document.

<html>
<head>
<title>asdf</title>
<style type="text/css">
a {color:#cccccc;}
</style>
</head>
<body>
Content Here
</body>
</html>


----------



## Asylum (May 24, 2012)

GSG-9 said:


> That part MUST go in the head of the document.



Oh..so thats in-line then on my html page/


----------



## GSG-9 (May 24, 2012)

Asylum said:


> Oh..so thats in-line then on my html page/



It is not _inline_ since it is in the head of the document. but yes it is in the html. If you want to include a new document it is simply <link rel="stylesheet" type="text/css" href="path/here/nameofdoc.css" />
If that did not work in the past, you just have the path wrong to the css file.


----------



## Asylum (May 24, 2012)

GSG-9 said:


> It is not _inline_ since it is in the head of the document. but yes it is in the html. If you want to include a new document it is simply <link rel="stylesheet" type="text/css" href="path/here/nameofdoc.css" />
> If that did not work in the past, you just have the path wrong to the css file.



It works in the html doc.

So i would have to make a new style sheet and link it to my html page just to get  the link background color to work?


----------



## GSG-9 (May 24, 2012)

Asylum said:


> It works in the html doc.
> 
> So i would have to make a new style sheet and link it to my html page just to get it the link background color to work/



Yup, if you or your instructor does not want it in document.


----------



## Asylum (May 24, 2012)

Well aint that some crap


----------



## OnePostWonder (May 24, 2012)

Something that really helps me when learning web-coding is to take a well built website such as this and view the page source.


----------



## GSG-9 (May 24, 2012)

OnePostWonder said:


> Something that really helps me when learning web-coding is to take a well built website such as this and view the page source.



Take it apart in Chrome DevTools, or if you want to keep track of changes use an extension like CSS Inject. OnePostWonder is right, it helps build an understanding of whats going on.


----------



## GSG-9 (May 24, 2012)

This is a theoretical directory, you can do it where ever you want.
Suppose
Html file:
C:\Website\index.html
CSS file:
C:\Website\css\css.css
then in the head you would want:
<link rel="stylesheet" type="text/css" href="/css/css.css" />


----------



## FordGT90Concept (May 24, 2012)

...replying late but make sure your link rel="stylesheet" has the type="text/css".  Browsers may behave badly if they don't know what the MIME type is.




GSG-9 said:


> Yup, if you or your instructor does not want it in document.


If the CSS content is used on more than one page, it should always be linked.  Browsers cache CSS files so it saves on bandwidth/loading times.


----------



## Asylum (May 24, 2012)

Will this code work in my external style sheet/

a:link {color:#cccccc;}   

I have to make 2 external style sheets with different colors so GSG-9 tip wont work for this in the html doc.


----------



## FordGT90Concept (May 24, 2012)

Yeah, that should work.  It would make it appear a light gray.


----------



## GSG-9 (May 24, 2012)

Asylum said:


> Will this code work in my external style sheet/
> a:link {color:#cccccc;}


Yeah, change the hex number as needed, you can find the color you want in paint or any program.



Asylum said:


> I have to make 2 external style sheets with different colors so GSG-9 tip wont work for this in the html doc.


I think you mean you need two different rules

so you could give one of your anchor tags a class of anchor1.
Html link:
<A HREF="linkhere.html" class="anchor1">Link text</A> 

CSS:
a.anchor1 {color:123456;}
a {color:234567;}

Does that help?


----------



## FordGT90Concept (May 24, 2012)

Classes are fantastic.

a = HTML tag = <a></a>
.anchor1 = class =  <a class="anchor1"></a>
#anchor1 = id =  <a id="anchor1"></a>

ID applies to only one element.  Class applies to any with the same class.  HTML tag applies to all with that tag (basically sets default).  ID overrides class.  Class overrides HTML tag.


----------



## Asylum (May 26, 2012)

This is how I did it for the other website I created.

Put this code in your external style sheet.

#footer { background-color: #ccaa66;
          color: #000000;
		  font-size: .60em;
		  font-style: italic;
		  text-align: center; }

Then link it on your html page in a <div></div> tag.

<div id="footer"> footer content here </div>


----------

