How to Change Active Link Color Using Css

Links should clearly be identifiable as links to readers.
Refrain from implementing colored links that may impede user ability to distinguish links from regular text, or color links for purely aesthetic reasons. See the guides to editing articles for accessibility at contrast and navbox colors.

In Wikipedia, the color of a link shows the status of the corresponding target page. The default colors (in the Vector skin) have the following meanings: See also Wikipedia:Manual of Style/Accessibility/Colors.

Link style	Type	Color
blue link	link to a Wikipedia page that currently exists	#0645AD = rgb(6,69,173)
dark blue link	link to a Wikipedia page that exists and that you have visited	#0B0080 = rgb(11,0,128)
red link	link to a page that does not currently exist within Wikipedia	#BA0000 = rgb(186,0,0)
light brown link	link to a Wikipedia page that does not exist, but that you have visited	#A55858 = rgb(165,88,88)
brown link	link to a very short article within Wikipedia, but only if the user has set a preference option to format "stub" links in this way	#772233 = rgb(119,34,51)
light blue link 1 light blue link 2	link to a page at another wiki, usually another Wikimedia project or an external link Note that the light blue color is used whether or not the page actually exists at the target wiki. For example, there is an article about George Washington Carver here on the English Wikipedia, while there is no article of the same name on the Japanese Wikipedia; but they do have an article about the same man under a different title.	#3366BB = rgb(51,102,187)
purple link	link to a page on another site that has been visited	#663366 = rgb(102,51,102)

Note that the colors in the boxes may appear darker than text of the same color; also, larger or bold text will tend to look darker. Furthermore, the actual color seen by a user will vary slightly according to their operating system, desktop settings, and browser, as well as their monitor and (for low-end LCDs) viewing angle. Logged-in users can also change the colors they see by selecting a different skin or using custom CSS.

Custom colors

Normal text

For normal text, the {{color}} template with two parameters can be used; name of color or hex code of color and text. However, prose text intended for readers should never be manually colored. (MOS:PROSECOLOR)

{{color|orange|Hello, world!}} → Hello, world!

{{color|#00F000|Hello, world!}} → Hello, world!

Links

Refrain from implementing colored links that may impede user ability to distinguish links from regular text, or color links for purely aesthetic reasons. (MOS:COLOR)

Styling individual links on a page

You can set the color of an individual link or set of links on a page (rather than a global change to the style of all links on Wikipedia) as follows. Setting styles in this way will apply to everyone who views those particular links or that particular page, not just you. However, links intended for readers should never be manually colored.(MOS:LINKCOLOR)

The {{Colored link}} template takes two parameters to function : the color of the link, the article being linked to, and an optional third parameter for alternative text to display as a piped link.

{{colored link|orange|Canada}} → Canada

{{colored link|#00F000|Page name to link|Alternative text}} → Alternative text

Or

You can turn links a different color like so:

Or, if you desire existence checking, you can try:

Markup

*[[example|{{#ifexist: example|<span style="color:Orange;">This page exists.</span>|This page does not exist.}}]] *[[exampl|{{#ifexist: exampl|<span style="color:green;">This page exists.</span>|This page does not exist.}}]]

Renders as

This page exists.
This page does not exist.

External links

A similar styled span can be added within an external link:

Markup	*[http://example.com <span style="color:green;">Example external link</span>]
Renders as	Example external link

Styling all links just for you

You can also customize link colors by editing the CSS at your skin subpage. This is a change which will apply to all links throughout the site, but will only be visible to you.

The standard link selectors are:

a:link — defines the style for normal unvisited links
a:visited — defines the style for visited links
a:active — defines the style for active links; links become active once you click on them
a:hover — defines the style for hovered links; links hover when the mouse moves over it

Colors are defined by hexadecimal characters: see web colors.

                        /* standard link colors */            .            mw-body-content            a            :            link            {            color            :            #0000FF            ;            }            /* normal unvisited links */            .            mw-body-content            a            :            link            :            visited            {            color            :            #0B0080            ;            }            /* visited links */            .            mw-body-content            a            :            link            :            active            {            color            :            #FF0000            ;            }            /* active links */            .            mw-body-content            a            :            link            .            new            {            color            :            #FF0000            ;            }            /* new links */            .            mw-body-content            a            :            link            .            extiw            {            color            :            #3366BB            ;            }            /* interwiki links */            .            mw-body-content            a            :            link            .            external            {            color            :            #3366BB            ;            }            /* external links */            .            mw-body-content            a            :            link            .            stub            {            color            :            #772233            ;            }            /* hovered links */            .            mw-body-content            a            :            link            {            color            :            #FF0000            }            .            mw-body-content            a            :            visited            {            color            :            #00FF00            }            .            mw-body-content            a            :            hover            {            color            :            #FF00FF            }            .            mw-body-content            a            :            active            {            color            :            #0000FF            }

Notes:

a:hover must come after a:link and a:visited
a:active must come after a:hover
you need to have ".mw-body-content" in front of the standard link definition, because otherwise the default definition on this website will still take precedence over what you have defined.

Redirect

Show redirects as green links:

                        .            mw-body-content            a            .            mw-redirect            {            color            :            #308050            }            .            mw-body-content            a            .            mw-redirect            :            visited            {            color            :            #3070A0            }

External

Show external links as green links:

                        .            mw-body-content            a            .            external            {            color            :            #008000            }            .            mw-body-content            a            .            external            :            visited            {            color            :            #008000            }

Text decoration

This allows formatting such as underlines. For example:

                        .            mw-body-content            a            :            link            {            color            :            #000000            ;            text-decoration            :            underline            ;            }

Possible values are:

none
underline
overline
line-through

Font family

This will change the link font:

                        .            mw-body-content            a            :            link            {            font-family            :            monospace            }

Preferences

The "display links to disambiguation pages in orange" feature, located in the gadgets tab of the preferences menu (under the "appearance" section), shows you all links to disambiguation pages in orange.

Scripts

User:Anomie/linkclassifier is a popular script that customizes colors to indicate links such as pages to be deleted, nonfree-media, redirects, protected pages and more.

HTML name	Hex code `R G B`	Decimal code `R G B`
Pink colors
`Pink`	`FF C0 CB`	`255 192 203`
`LightPink`	`FF B6 C1`	`255 182 193`
`HotPink`	`FF 69 B4`	`255 105 180`
`DeepPink`	`FF 14 93`	`255 20 147`
`PaleVioletRed`	`DB 70 93`	`219 112 147`
`MediumVioletRed`	`C7 15 85`	`199 21 133`
Red colors
`LightSalmon`	`FF A0 7A`	`255 160 122`
`Salmon`	`FA 80 72`	`250 128 114`
`DarkSalmon`	`E9 96 7A`	`233 150 122`
`LightCoral`	`F0 80 80`	`240 128 128`
`IndianRed`	`CD 5C 5C`	`205 92 92`
`Crimson`	`DC 14 3C`	`220 20 60`
`FireBrick`	`B2 22 22`	`178 34 34`
`DarkRed`	`8B 00 00`	`139 0 0`
`Red`	`FF 00 00`	`255 0 0`
Orange colors
`OrangeRed`	`FF 45 00`	`255 69 0`
`Tomato`	`FF 63 47`	`255 99 71`
`Coral`	`FF 7F 50`	`255 127 80`
`DarkOrange`	`FF 8C 00`	`255 140 0`
`Orange`	`FF A5 00`	`255 165 0`
`Gold`	`FF D7 00`	`255 215 0`
Yellow colors
`Yellow`	`FF FF 00`	`255 255 0`
`LightYellow`	`FF FF E0`	`255 255 224`
`LemonChiffon`	`FF FA CD`	`255 250 205`
`LightGoldenrodYellow`	`FA FA D2`	`250 250 210`
`PapayaWhip`	`FF EF D5`	`255 239 213`
`Moccasin`	`FF E4 B5`	`255 228 181`
`PeachPuff`	`FF DA B9`	`255 218 185`
`PaleGoldenrod`	`EE E8 AA`	`238 232 170`
`Khaki`	`F0 E6 8C`	`240 230 140`
`DarkKhaki`	`BD B7 6B`	`189 183 107`
Brown colors
`Cornsilk`	`FF F8 DC`	`255 248 220`
`BlanchedAlmond`	`FF EB CD`	`255 235 205`
`Bisque`	`FF E4 C4`	`255 228 196`
`NavajoWhite`	`FF DE AD`	`255 222 173`
`Wheat`	`F5 DE B3`	`245 222 179`
`BurlyWood`	`DE B8 87`	`222 184 135`
`Tan`	`D2 B4 8C`	`210 180 140`
`RosyBrown`	`BC 8F 8F`	`188 143 143`
`SandyBrown`	`F4 A4 60`	`244 164 96`
`Goldenrod`	`DA A5 20`	`218 165 32`
`DarkGoldenrod`	`B8 86 0B`	`184 134 11`
`Peru`	`CD 85 3F`	`205 133 63`
`Chocolate`	`D2 69 1E`	`210 105 30`
`SaddleBrown`	`8B 45 13`	`139 69 19`
`Sienna`	`A0 52 2D`	`160 82 45`
`Brown`	`A5 2A 2A`	`165 42 42`
`Maroon`	`80 00 00`	`128 0 0`
Green colors
`DarkOliveGreen`	`55 6B 2F`	`85 107 47`
`Olive`	`80 80 00`	`128 128 0`
`OliveDrab`	`6B 8E 23`	`107 142 35`
`YellowGreen`	`9A CD 32`	`154 205 50`
`LimeGreen`	`32 CD 32`	`50 205 50`
`Lime`	`00 FF 00`	`0 255 0`
`LawnGreen`	`7C FC 00`	`124 252 0`
`Chartreuse`	`7F FF 00`	`127 255 0`
`GreenYellow`	`AD FF 2F`	`173 255 47`
`SpringGreen`	`00 FF 7F`	`0 255 127`
`MediumSpringGreen`	`00 FA 9A`	`0 250 154`
`LightGreen`	`90 EE 90`	`144 238 144`
`PaleGreen`	`98 FB 98`	`152 251 152`
`DarkSeaGreen`	`8F BC 8F`	`143 188 143`
`MediumSeaGreen`	`3C B3 71`	`60 179 113`
`SeaGreen`	`2E 8B 57`	`46 139 87`
`ForestGreen`	`22 8B 22`	`34 139 34`
`Green`	`00 80 00`	`0 128 0`
`DarkGreen`	`00 64 00`	`0 100 0`
Cyan colors
`MediumAquamarine`	`66 CD AA`	`102 205 170`
`Cyan`	`00 FF FF`	`0 255 255`
`LightCyan`	`E0 FF FF`	`224 255 255`
`PaleTurquoise`	`AF EE EE`	`175 238 238`
`Aquamarine`	`7F FF D4`	`127 255 212`
`Turquoise`	`40 E0 D0`	`64 224 208`
`MediumTurquoise`	`48 D1 CC`	`72 209 204`
`DarkTurquoise`	`00 CE D1`	`0 206 209`
`LightSeaGreen`	`20 B2 AA`	`32 178 170`
`CadetBlue`	`5F 9E A0`	`95 158 160`
`DarkCyan`	`00 8B 8B`	`0 139 139`
`Teal`	`00 80 80`	`0 128 128`
Blue colors
`LightSteelBlue`	`B0 C4 DE`	`176 196 222`
`PowderBlue`	`B0 E0 E6`	`176 224 230`
`LightBlue`	`AD D8 E6`	`173 216 230`
`SkyBlue`	`87 CE EB`	`135 206 235`
`LightSkyBlue`	`87 CE FA`	`135 206 250`
`DeepSkyBlue`	`00 BF FF`	`0 191 255`
`DodgerBlue`	`1E 90 FF`	`30 144 255`
`CornflowerBlue`	`64 95 ED`	`100 149 237`
`SteelBlue`	`46 82 B4`	`70 130 180`
`RoyalBlue`	`41 69 E1`	`65 105 225`
`Blue`	`00 00 FF`	`0 0 255`
`MediumBlue`	`00 00 CD`	`0 0 205`
`DarkBlue`	`00 00 8B`	`0 0 139`
`Navy`	`00 00 80`	`0 0 128`
`MidnightBlue`	`19 19 70`	`25 25 112`
Purple colors
`Lavender`	`E6 E6 FA`	`230 230 250`
`Thistle`	`D8 BF D8`	`216 191 216`
`Plum`	`DD A0 DD`	`221 160 221`
`Violet`	`EE 82 EE`	`238 130 238`
`Orchid`	`DA 70 D6`	`218 112 214`
`Magenta`	`FF 00 FF`	`255 0 255`
`MediumOrchid`	`BA 55 D3`	`186 85 211`
`MediumPurple`	`93 70 DB`	`147 112 219`
`BlueViolet`	`8A 2B E2`	`138 43 226`
`DarkViolet`	`94 00 D3`	`148 0 211`
`DarkOrchid`	`99 32 CC`	`153 50 204`
`DarkMagenta`	`8B 00 8B`	`139 0 139`
`Purple`	`80 00 80`	`128 0 128`
`Indigo`	`4B 00 82`	`75 0 130`
`DarkSlateBlue`	`48 3D 8B`	`72 61 139`
`SlateBlue`	`6A 5A CD`	`106 90 205`
`MediumSlateBlue`	`7B 68 EE`	`123 104 238`
White/Gray/Black colors
`White`	`FF FF FF`	`255 255 255`
`Snow`	`FF FA FA`	`255 250 250`
`Honeydew`	`F0 FF F0`	`240 255 240`
`MintCream`	`F5 FF FA`	`245 255 250`
`Azure`	`F0 FF FF`	`240 255 255`
`AliceBlue`	`F0 F8 FF`	`240 248 255`
`GhostWhite`	`F8 F8 FF`	`248 248 255`
`WhiteSmoke`	`F5 F5 F5`	`245 245 245`
`Seashell`	`FF F5 EE`	`255 245 238`
`Beige`	`F5 F5 DC`	`245 245 220`
`OldLace`	`FD F5 E6`	`253 245 230`
`FloralWhite`	`FF FA F0`	`255 250 240`
`Ivory`	`FF FF F0`	`255 255 240`
`AntiqueWhite`	`FA EB D7`	`250 235 215`
`Linen`	`FA F0 E6`	`250 240 230`
`LavenderBlush`	`FF F0 F5`	`255 240 245`
`MistyRose`	`FF E4 E1`	`255 228 225`
`Gainsboro`	`DC DC DC`	`220 220 220`
`LightGray`	`D3 D3 D3`	`211 211 211`
`Silver`	`C0 C0 C0`	`192 192 192`
`DarkGray`	`A9 A9 A9`	`169 169 169`
`Gray`	`80 80 80`	`128 128 128`
`DimGray`	`69 69 69`	`105 105 105`
`LightSlateGray`	`77 88 99`	`119 136 153`
`SlateGray`	`70 80 90`	`112 128 144`
`DarkSlateGray`	`2F 4F 4F`	`47 79 79`
`Black`	`00 00 00`	`0 0 0`

How to Change Active Link Color Using Css

Source: https://en.wikipedia.org/wiki/Help:Link_color

McPhillamy Myseat