• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

External Style Sheet Help

Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#1
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?
 
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#2
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

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
21,059 (6.22/day)
Likes
10,186
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#3
Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#4
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>
 
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#5
In that case my code will work great to just get it done, FordGT's code is more granular if you want specifics.
 
Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#6
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>
 
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#7
<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>
 
Last edited:
Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#8
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#9
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.
 
Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#10
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?
 
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#11
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.
 
Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#12
Well aint that some crap
 
Joined
Dec 27, 2008
Messages
587 (0.18/day)
Likes
104
System Name New / Breakin' the Lol
Processor i5 2500k / Athlon64 X2 4200+ (65W)
Motherboard P8Z68-V PRO/GEN3 / Asus M2N4-SLI
Cooling / Air (1 x 250mm, 2 x 120mm, 1 x 90mm)
Memory DDR3-1600 (8GB) / Crucial Ballistix Tracer PC2-6400 (2gb)
Video Card(s) / Visiontek 4870
Storage HD103SJ /
Display(s) Viewsonic 22" VX2240W
Case Xigmatek Midgard II / Thermaltake VA8003SWA
Power Supply PC Power & Cooling Silencer 750W
#13
Something that really helps me when learning web-coding is to take a well built website such as this and view the page source.
 
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#14
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.
 
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#15
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

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
21,059 (6.22/day)
Likes
10,186
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#16
...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.


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.
 
Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#17
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

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
21,059 (6.22/day)
Likes
10,186
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#18
Yeah, that should work. It would make it appear a light gray.
 
Joined
Feb 8, 2005
Messages
1,675 (0.35/day)
Likes
149
Location
Minneapolis, Mn
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
#19
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.

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

"I go fast!1!11!1!"
Joined
Oct 13, 2008
Messages
21,059 (6.22/day)
Likes
10,186
Location
IA, USA
System Name BY-2015
Processor Intel Core i7-6700K (4 x 4.00 GHz) w/ HT and Turbo on
Motherboard MSI Z170A GAMING M7
Cooling Scythe Kotetsu
Memory 2 x Kingston HyperX DDR4-2133 8 GiB
Video Card(s) PowerColor PCS+ 390 8 GiB DVI + HDMI
Storage Crucial MX300 275 GB, Seagate 6 TB 7200 RPM
Display(s) Samsung SyncMaster T240 24" LCD (1920x1200 HDMI) + Samsung SyncMaster 906BW 19" LCD (1440x900 DVI)
Case Coolermaster HAF 932 w/ USB 3.0 5.25" bay
Audio Device(s) Realtek Onboard, Micca OriGen+
Power Supply Enermax Platimax 850w
Mouse SteelSeries Sensei RAW
Keyboard Tesoro Excalibur
Software Windows 10 Pro 64-bit
Benchmark Scores Faster than the tortoise; slower than the hare.
#20
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.
 
Joined
Jul 18, 2008
Messages
2,866 (0.83/day)
Likes
697
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4770K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x4GB Gskill 2400mhz
Video Card(s) EVGA GTX 780TI
Storage SSD Kingston 240GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 7 64 Bit
Benchmark Scores 3DMark Vantage 51342
#21
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>