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:

Code:

<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

HTML:

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

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

HTML:

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>

System Name	KILLER
Processor	Intel Core i7 4790K
Motherboard	MSI Z87 G45 Gaming
Cooling	Water Cooling
Memory	2x8GB Gskill 2400mhz
Video Card(s)	EVGA GTX 980
Storage	SSD Samsung 500GB
Display(s)	24" Asus 144hz
Case	Cooler Master HAF
Audio Device(s)	X-Fi Platinum
Power Supply	Antec 1200 Watt Modular
Software	Windows 10 64 Bit
Benchmark Scores	3DMark Vantage 51342

System Name	Livingston
Processor	i7-4960HQ
Motherboard	macbook prp retina
Cooling	Alphacool NexXxoS Monsta (240mm x 120mm x 80mm)
Memory	16Gb
Video Card(s)	Zotac Arctic Storm Nvidia 980ti
Display(s)	1x Acer XB270HU, 1x Catleap, 1x Oculus
Benchmark Scores	http://www.3dmark.com/fs/770087

System Name	BY-2021
Processor	AMD Ryzen 7 5800X (65w eco profile)
Motherboard	MSI B550 Gaming Plus
Cooling	Scythe Mugen (rev 5)
Memory	2 x Kingston HyperX DDR4-3200 32 GiB
Video Card(s)	AMD Radeon RX 7900 XT
Storage	Samsung 980 Pro, Seagate Exos X20 TB 7200 RPM
Display(s)	Nixeus NX-EDG274K (3840x2160@144 DP) + Samsung SyncMaster 906BW (1440x900@60 HDMI-DVI)
Case	Coolermaster HAF 932 w/ USB 3.0 5.25" bay + USB 3.2 (A+C) 3.5" bay
Audio Device(s)	Realtek ALC1150, Micca OriGen+
Power Supply	Enermax Platimax 850w
Mouse	Nixeus REVEL-X
Keyboard	Tesoro Excalibur
Software	Windows 10 Home 64-bit
Benchmark Scores	Faster than the tortoise; slower than the hare.

System Name	KILLER
Processor	Intel Core i7 4790K
Motherboard	MSI Z87 G45 Gaming
Cooling	Water Cooling
Memory	2x8GB Gskill 2400mhz
Video Card(s)	EVGA GTX 980
Storage	SSD Samsung 500GB
Display(s)	24" Asus 144hz
Case	Cooler Master HAF
Audio Device(s)	X-Fi Platinum
Power Supply	Antec 1200 Watt Modular
Software	Windows 10 64 Bit
Benchmark Scores	3DMark Vantage 51342

System Name	Livingston
Processor	i7-4960HQ
Motherboard	macbook prp retina
Cooling	Alphacool NexXxoS Monsta (240mm x 120mm x 80mm)
Memory	16Gb
Video Card(s)	Zotac Arctic Storm Nvidia 980ti
Display(s)	1x Acer XB270HU, 1x Catleap, 1x Oculus
Benchmark Scores	http://www.3dmark.com/fs/770087

External Style Sheet Help

Asylum

GSG-9

FordGT90Concept

"I go fast!1!11!1!"

Asylum

GSG-9

Asylum

GSG-9

Asylum

GSG-9

Asylum

GSG-9

Asylum

OnePostWonder

GSG-9

GSG-9

FordGT90Concept

"I go fast!1!11!1!"

Asylum

FordGT90Concept

"I go fast!1!11!1!"

GSG-9

FordGT90Concept

"I go fast!1!11!1!"

Asylum

System Name	PC
Processor	i5 2500k
Motherboard	P8Z68-V PRO/GEN3
Cooling	Fans
Memory	DDR3-1600 (8GB)
Video Card(s)	Sapphire Nitro+ RX 580
Storage	HD103SJ
Display(s)	XG2402
Case	Xigmatek Midgard II
Power Supply	PC Power & Cooling Silencer 750W