Databases
StackOverflow2013
Postsdbo
POhow to modify the colour of a hyperlink using CSS?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to modify the colour of a hyperlink using CSS?
    text
    copied!<pre><code> &lt;!DOCTYPE "XHTML 1.0 Transitional"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;index.html&lt;/title&gt; &lt;!--this code is used link the CSS file with this HTML file --&gt; &lt;link href="TheCSSfile2.css" rel="stylesheet" type="text/css"/&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="SearchBar"&gt; &lt;!--this code is used to add a search bar --&gt; &lt;input type="text" value="search"/&gt; &lt;!--the closing dive for the SearchBar tag --&gt; &lt;/div&gt; &lt;div id="headerOne"&gt; &lt;h1&gt;HTML Template 4 &lt;/h1&gt; &lt;!--the closing dive for the headerOne tag --&gt; &lt;/div&gt; &lt;!--this is used to insert a banner image on the site page --&gt; &lt;div id="image"&gt; &lt;img src="images/CityScape_001.jpg" name="banner" width="760" height="245" alt="imageOne"/&gt; &lt;/div&gt; &lt;div id="hyperlink"&gt; &lt;!--#used to do nothing as its linked (navigates) to the page its on and be able to modify it --&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;Link to this page&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;br/&gt;&lt;/li&gt; &lt;span id="secondlink"&gt;&lt;li&gt; &lt;a href="#"&gt;Link to second page&lt;/a&gt;&lt;/li&gt;&lt;/span&gt; &lt;li&gt;&lt;br/&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Link to third page&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--the closing dive for the hyperlink tag --&gt; &lt;div id="content"&gt; &lt;h2&gt;Floated Divs &lt;/h2&gt; &lt;p&gt; Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more &lt;span id="colour"&gt;obscure Latin words, consectetur&lt;/span&gt;, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" &lt;span id="secondone"&gt;(The Extremes of Good and Evil)&lt;/span&gt; by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. &lt;/p&gt; &lt;p&gt; The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. &lt;/p&gt; &lt;!--the closing dive for the content tag--&gt; &lt;p&gt; &lt;!--this is the W3C validator code for the CSS --&gt; &lt;a href="http://jigsaw.w3.org/css-validator/check/referer"&gt; &lt;img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /&gt; &lt;/a&gt; &lt;/p&gt; &lt;/div&gt; &lt;!--the closing div for the wrapper tag --&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>this is the css code I used:</p> <pre><code> @charset "utf-8"; /* CSS Document */ /* The wrapper tag is applied to the intier page. this code below is used to change: the colour of the text to white and the spacing width of the content layout. The height and the width pixel shows the total size of the page. in this case, the height of the page is 600px and the width is 1024px. The margins are automatically are assigned as the page develops in the design. */ #wrapper{ width:1024px; height:600px; margin-left: auto; margin-right: auto; } /* This is used to position the search box to the right side of the page. */ #SearchBar{ float:right; } /* this code below is used to change the background colour of the site. */ body{ background-color: #2693FF; } /* this code below is used to modify the first header at the top of the page. The header is called 'HTML Template 4'. */ #headerOne{ font-size:32px; font:Arial; font-weight:bold; color:#FFF; } /* The float command is used to move the image to the right of the page. The height and the width is used to explain where the image should be displayed. The pixel for the height and the pixel for the width is calculated by minusing the height and width pixel in the wrapper tag, which is used to define the height and the width of the entier page. */ #image{ height: 250px; width: 750px; float: right; } /* this is used to position the hyperlink to the left of the banner image. This is calculated by minusing the maximum page size (width and height) by the width and height of the banner image. */ #hyperlink{ float: left; width: 270px; height: 590px; } /* The code below for the unordered list hyperlink unordered list (ul) */ #hyperlink ul{ list-style:none; } #secondlink ul li a:hover{ text-decoration:underline; } /* this code is is used to modify the color of the ink to white, font to arial, no next decoration and font size 16px*/ #hyperlink a:link{ color:#FFF; text-decoration:none; font-size:16px; font:Arial; color:#FFF; } /* changing the colour of the first text. This is created using the span tag */ #colour{ color:red; } /* changing the colour of the second text. This is created using the span tag */ #secondone{ color:red; } /* the paragraph's colour is changed to white. This applies to all the paragraph in the page because the code does not specify the paragraph in a perticular div tag to be modified. */ p{ color: white; } /*the h2 title in the content div is written seperately because to modify specifically the title within the page. the title's colour is changed to white. */ #content h2{ color: white; } </code></pre> <p>I want to know how to make the second link called 'link to the second page' underline when I hover over it?</p> <p>Also how do I make the first letter of the third link capitalize. The third link is called 'link to third page'. finally why does the link's colour (which is coded to be white) change to blue when I preview it on the browser. But on Dreamweaver on design view, it seems fine. and if possible, how can I fix this.</p> <p>the #secondlink is what I used to make the second hyperlink underline when hovered over.</p> <p>here is the updated version of the code (16:55 pm) </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload