I'm breaking down the HTML and css code: Font Colors

This page will focus specifically on Font COLORS.

When writing a blog, you can either use the websites default settings.

OR, you may implement a CSS code which changes the size of your text.
In our case, we'll try different sizes of our links.
THIS BLOG IS STILL UNDER CONSTRUCTION

We'll begin with The original list (using HTML).
This is not using any CSS Class selector or enhancements.
It's relying upon the website's default settings.

This example below is using the Blog's default colors. (Although, the current choice is altered from the original setting). Here, in the following 'practice selection', we're not using any CSS class. It's Just straight HTML. Example: <a href="http://www.campusreform.org/" target="_blank">Campus Reform</a>

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 1
.
.
In example #1 below, we'll create a font-size which is slightly larger than average. We accomplish this goal by creating a CSS Class. and placing the code within each link. So, we're gonna create our own Class name. Let's call it "font17". So, within the code; we're now adding the class="font17". and, it looks like this within each link: <a class="font17" href="http://www.campusreform.org/" target="_blank" title="off-topic">Campus Reform </a></div> the class="font17" is added to each and every link. THEN, Code must also be added within the CSS. <style type="text/css"> .font17 {font-size:17px;} </style> (the .font17 in the CSS is the same name as class="font17" within the HTML link). NOTICE: a complete code is often used to identify all features. But, we won't do that here. .font17:link /* a normal, unvisited link */ .font17:visited /* a link the user has visited */ .font17:hover /* a link when the user mouses over it */ .font17:active /* a link the moment it is clicked */

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 2

In example #2 below, (A) I will first create a CSS Class. Then, create a classname and place it within each link. So, we're gonna create our own Class name. Let's call it "TheUsefulLinks". So, within the code; we're now adding our class="TheUsefulLinks". (B) and, it looks like this within each link: <a class="TheUsefulLinks" href="http://www.campusreform.org/" target="_blank" title="off-topic">Campus Reform </a></div> (Our chosen class="TheUsefulLinks" is added to each and every link). THEN, Code must also be added within the CSS. <style type="text/css"> .TheUsefulLinks {font-size:18px; } /* my special section */ .TheUsefulLinks:link {color: #0000ff;} /* a normal, unvisited link */ .TheUsefulLinks:visited {color: #0000ff;} /* a link the user has visited */ .TheUsefulLinks:hover {color: ##5d67fa;} /* a link when the user mouses over it */ .TheUsefulLinks:active {color: gold} /* a link the moment it is clicked */ </style> (C) NOTICE: You'll notice that I have a separate column for [my special section] and [normal, unvisited link]. Take Notice that I'm the ONLY person who does it this way. -Programmers would leave out the first row- .TheUsefulLinks {font-size:18px; } ------------- and they would begin here, using all elements- .TheUsefulLinks:link {font-size:18px; color:#00000f;} --- So, you might ask.. why I add the first part .TheUsefulLinks {font-size:18px; } I do it this way simply because- I'm separating elements which I plan on changing, and those which might be altered in the future. AND, once I've added nine different elements, it starts to get confusing. (D) Needless to say: [ .TheUsefulLinks Classname in the CSS is the exact same as class="TheUsefulLinks" within the HTML link ]. It's case-sensitive. So, .theusefullinks differs from .TheUsefulLinks since the latter has capital letters. Ther's also a difference between .TheUsefulLinks and .The-Useful-Links

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 3
In example #3 below, we'll create a classname- .thegamelord:link {font-size:18px; color:#06004d;} This was a personal choice. 'thegamelord' is a random term which bears no relevancy to its function. (B) and, it looks like this within each link: <a class="thegamelord" href="http://www.campusreform.org/" target="_blank">Campus Reform </a> (Our chosen class="thegamelord" is added to each and every link). THEN, Appropriate CSS code must also be added within the CSS. <style type="text/css"> /* all css goes here */ .thegamelord:link {color:#06004d; } /* all css goes here */ </style> (C) The complete sequence looks like this. .thegamelord:link {font-size:18px; color:#06004d; } /* a normal, unvisited link */ .thegamelord:visited {color:#06004d;} /* a link the user has visited */ .thegamelord:hover {color:#e6faff; } /* a link when the user mouses over it */ .thegamelord:active {color: brown;} /* a link the moment it is clicked */ You'll notice- .thegamelord:link- gives the font-SIZE, and a chosen color. .thegamelord:visited- doesn't need a font-size. It uses the 'parent default' font-size:18px. I'm also choosing to keep the same "Visited" color instead of altering it. .thegamelord:hover- when hovering your mouse over each link, it turns into an annoying bluish white. I've deliberately chosen #e6faff in order to emphasize the hovering feature. .thegamelord:active- When you're clicking the link, it briefly turns Brown. {color: brown;} (D) Needless to say: (the .thegamelord Classname in the CSS is the same name as class="thegamelord" within the HTML link). <div><a class="thegamelord" href="http://24ahead.com/" target="_blank">24Ahead</a></div>

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

·Zionget·

•

Zionscape

Zionscape Lite

- - - - - - - - - - -

example 4 using RGB colors
example: rgb(48,69,77)
In example #4 below, we'll create a class name- .terminator:link {font-size:18px; color:#06004d;} This was a personal choice. Essentially, 'terminator' is a random term which bears no relevancy to its function. Also notice- There's the period before the entire sequence- .terminator:link .terminator:visited (B) EXPLANATION OF RGB COLORS- In the example below, we will implement RGB colors instead of Hexadecimal colors. (Hex codes are simple 6-digit numbers which represent colors. (such as #000000, #ff033e, #0033ff, etc.) With hex codes, rather than just using digits 0 thru 9, it also includes letters A thru F. (a b c d e f). Meanwhile, rgb codes are written as follows The code begins with the letters RGB (which stands for red green blue) followed by Left-parenthesis ( then, three numbers ranging from 1 to 255 are added separated by commas. - for example rgb(27,235,120) then , ending with RIGHT parenthesis ) (C) What's the advantage to RGB? - it can be slightly tweaked without severely altering the color. (Whereas, randomly changing a hex number often becomes chaotic). For example- if the existing code is rgb(54,52,58); you can make it a little more blue by changing the third number (which is initially 58). Change 58 to 65. and rgb(54,52,65) looks slightly different. rgb(54,52,77) would vary greater. and so on, and so on. Or, if desired- you can tweak up the first number, rgb(74,52,58) or tone down the 2nd number. rgb(54,47,58) or, make big changes to the sequence. Example rgb(64,42,158) etc. etc. etc (On a personal note, I've been able to 'roll down' colors in order to improve them.) So, if it's too gray, I can alter it slightly without ruining the color scheme. It's much harder to do this using hexadecimal colors. (D) we're applying colors such as rgb(48,69,77) instead of a hex code #30454d. The complete sequence looks like this. .terminator:link {font-size:18px; color: rgb(48,69,77);} .terminator:visited {color: rgb(57,57,89);} .terminator:hover {color: rgb(130,143,148); } .terminator:active {color: rgb(218,230,235);} NOTICE- the above sequence could be written with hexadecimal numbers. and the results below would've been identical. 100% the same as above. .terminator:link {font-size:18px; color: #30454D;} .terminator:visited {color:#393959;} .terminator:hover {color:#828F94; } .terminator:active {color:#dae6eb;} In other words- when RGB colors are used, there's an exact hex color equivalent which could've been substituted. .terminator:link {color: rgb(48,69,77);} /* rgb(48,69,77) is exactly the same as #30454D */ .terminator:visited {color: rgb(57,57,89);} /* rgb(57,57,89) is exactly the same as #393959 */ .terminator:hover {color: rgb(130,143,148); } /* rgb(130,143,148) the the exact same as #828F94 */ .terminator:active {color: rgb(218,230,235);} /* rgb(218,230,235) is the same color as #DAE6EB */ (E) Whenever using CSS codes - a semicolon is added between each value. ; This is a semicolon ; Here's an example of a typical sequence - background: #ffffff; text-decoration:underline; border:solid #224F58 1px; padding:2px; add more; Notice the semicolons ; ; ; ; ; background: #ffffff; text-decoration:underline; border:solid #224F58 1px; padding:2px; add more; In case you didn't know - This is a semicolon ; This is a semicolon ; This is a semicolon ; This is a semicolon ; Adding a semicolon enables me to add future codes. such as background-color: #ffffff; font-family:arial; font-weight:normal; text-decoration:underline; padding:2px; text-align:justify; ETC; ETC; ETC; (F) So, each sequence closes with a semicolon .terminator:link {font-size:18px; color: rgb(48,69,77); I'm ready to add more code;} HOWEVER, it's not necessary to end with a semicolon. I just prefer doing it this way. But, in theory- a semicolon is not needed, when finished. [such as the example below]. .terminator:link {font-size:18px; color: rgb(48,69,77)} .terminator:visited {color: rgb(57,57,89) } .terminator:hover {color: rgb(130,143,148) } .terminator:active {color: rgb(218,230,235) } (G) as always, the class name is applied to each link: <a class="terminator" href="http://www.campusreform.org/" target="_blank">Campus Reform </a> (Our chosen class="terminator" is added to each and every link). THEN, as always- Appropriate CSS code must also be added within the text/css. as follows- <style type="text/css"> /* all css goes here */ .terminator:link {font-size:18px; color: rgb(48,69,77) } .terminator:visited {color: rgb(57,57,89) } .terminator:hover {color: rgb(130,143,148) } .terminator:active {color: rgb(218,230,235) } /* all css goes here */ </style> (H) Needless to say: (the .terminator Classname in the text/CSS is the same name as class="terminator" within the HTML link). <div><a class="terminator" href="http://24ahead.com/" target="_blank">24Ahead</a></div> (I) (OMIT THIS PART) (OMIT THIS PART) (OMIT THIS PART) (OMIT THIS PART) The complete sequence looks like this. .thegamelord:link {font-size:18px; color:#06004d; } /* a normal, unvisited link */ .thegamelord:visited {color:#06004d;} /* a link the user has visited */ .thegamelord:hover {color:#e6faff; } /* a link when the user mouses over it */ .thegamelord:active {color: brown;} /* a link the moment it is clicked */ You'll notice- .thegamelord:link- gives the font-SIZE, and a chosen color. .thegamelord:visited- doesn't need a font-size. It uses the 'parent default' font-size:18px. I'm also choosing to keep the same "Visited" color instead of altering it. .thegamelord:hover- when hovering your mouse over each link, it turns into an annoying bluish white. I've deliberately chosen #e6faff in order to emphasize the hovering feature. .thegamelord:active- When you're clicking the link, it briefly turns Brown. {color: brown;}

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 5-
My favorite color method
rgba colors
such as rgba(120,94,104,0.8)
In example #5 below, we'll use the rgba color method. [--- RGBA stands for RGB Alpha ---]. It's an improved version of rgb. - rgba enables transparency, and shading darker. we'll create a class name- .fifth-column:link {font-size:110%; color:#06004d;} I'm also using font-size percentage of 110% instead of 17px. (Although it's not relevant). Also notice: Whenever using CSS Class, there's the period before the entire sequence- .fifth-column:link (B) EXPLANATION OF rgba COLORS- In the example below, we will implement RGBa colors instead of Hexadecimal colors. (Hexadecimal codes are simple 6-digit numbers which represent colors. (such as #000000, #ff033e, #0033ff, etc.) With hex codes- rather than just using digits 0 thru 9, it also includes letters A thru F. (a b c d e f). Meanwhile, rgb codes are written as follows using three numbers each ranging from 0 to 255. EXAMPLES- rgb(27,235,120) rgb(7,35,255) rgb(139,77,114) rgb(27,235,120) rgb(205,98,137) RGBA is written alittle differently. rgba(27,235,120,1.0) is basically the same color as rgb(27,235,120) The only difference is the added 1.0 This represents a transparency level between 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, and 1.0 Basically, 1.0 is the most solid color level, while it fades from 0.9, 0.8, 0.7 onward. 0.7 can usually show hints of the background 70% opacity 0.5 can more clearly show hints of background 50% opacity While 0.2 is very faded. only 20% opacity. and 0.1 is almost invisible. only 10% opacity. You've probably learned in school that a correct term is translucent. The computer term would be opacity (C) in terms of RGB vs RGBA rgb(27,235,120) is the exact same as rgba(27,235,120,1.0) BUT,it varies slightly from rgba(27,235,120,0.9) Therefore, rgba has greater versatility than rgb. (D) Here are examples of RGBA- rgba(237,244,249,0.4) rgba(24,19,37,0.7) rgba(105,9,34,0.9) rgba(205,239,234,0.2) This rule can amazingly be applied to double-digit decimals as well !! rgba(117,203,216,0.62) rgba(229,178,194,0.38) rgba(26,69,54,0.91) rgba(234,239,251,0.06) and, triple-digit decimals can be used, if you're very picky. (60,54,67,0.004) (E) Essentially, When using RGBA, you can achieve the precise result. For example- Perhaps, 0.6 is too heavy. and 0.5 improves your goal, but creates too much transparency. You then try 0.54, and it works perfectly. or, whatever the case. (On a personal note- I sometimes use double-digit rgba. ) (F) What's the advantage to rgba? - You can choose your level of transparency to an exact desired level. 0.01 is nearly invisible, while 1.0 is the maximum thickness. (1.0 Also called fully opaque). (G) NOTE- if you prefer a fully invisible link, I would not recommend a 0.0 opacity. If you're trying to create total transparency, I prefer using transparent; If temporarily hiding a link- We could simply write color: transparent; (H) essentially, RGBA works in the same manner as RGB. Both are using Red Green Blue. and, they both use the same three sets of numbers ranging from 0 to 255. In the case of rgb colors- if the existing code is rgb(54,52,58) ; you can make it a little more blue by changing the third number from 58 to 70. rgb(54,52,70) Or, you can tweak up the first number, from 54 to 74. rgb(74,52,58) or tone down the 2nd number. rgb(54,47,58) or, make big changes to the sequence. Example rgb(64,42,158) etc. (I) The complete sequence looks like this. .fifth-column {font-size:large;} /* nobody else uses this method */ .fifth-column:link {color: rgba(42,42,103,0.9);} .fifth-column:visited {color: rgba(32,32,92,1.0);} .fifth-column:hover {color: rgba(143,143,173,0.7); } .fifth-column:active {color: rgba(121,121,157,0.4);} The suffix numbers 0.9 and 1.0 and 0.7 and 0.4 creates the big difference of rgba. Whereas, the first three numbers in each sequence defines the RGB color. example- 143,140,173 The final number creates the level of opacity. example- 0.1 is dim, 0.5 is half transparent, and, 0.9 is almost solid. That's why it's called RGB-alpha. The transparency level of these values can be lowered in order to alter the overall shade. It makes the color slightly more transparent as the number lowers from 1.0 downward. from 1.0 to 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1 which is nearly transparent. (J) NOTICE, similar RGB code would appear slightly different from RGBa. the RGB code below differs from RGBA. .fifth-column:link {color: rgb(42,42,103);} .fifth-column:visited {color: rgb(32,32,92);} .fifth-column:hover {color: rgb(143,143,173); } .fifth-column:active {color: rgb(121,121,157);} The above RGB code would be similar to RGBa, when all opacity values are set to 1.0 .fifth-column:link {color: rgba(42,42,103,1.0);} /* similar to #2A2A67 */ .fifth-column:visited {color: rgba(32,32,92,1.0);} /* similar to #20205C */ .fifth-column:hover {color: rgba(143,143,173,1.0); } /* similar to #8F8FAD */ .fifth-column:active {color: rgba(121,121,157,1.0);} /* similar to #79799D */ Hexadecimal codes can produce the same colors as RGB. However, there is NO exact equivalent between hex and RGBA. .fifth-column:link {color: #2A2A67;} .fifth-column:visited {color: #20205C;} .fifth-column:hover {color: #8F8FAD; } .fifth-column:active {color: #79799D;} ------------------ Note: Hexadecimal codes are incapable of creating transparencies. Therefore, it cannot exactly emulate the effects of RGBa. ------------------ That's why I prefer using RGBa !!!!! -----------------------------------------------

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 6

In example #6 below, we're gonna show off the capabilities of RGBa. For all features, we're gonna use the exact same rgb colors. The only dissimilarity is transparency levels. You'll notice that all colors in the examples below are rgb(2,8,153). BUT, they have varying opacity levels. And that's the only difference. and, that's the uniqueness of RGBa. .example6:link {color: rgba(2,8,153,0.8);} .example6:visited {color: rgba(2,8,153,1.0);} .example6:hover {color: rgba(2,8,153,0.5); } .example6:active {color: rgba(2,8,153,0.2);} It gives tremendous power to create thousands of color combinations. Even using the same exact color shows the endless possibilities.

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

practice link

Stuff·Blacks·Don't·Like

- - - - - - - - - - -

example 7
each Link can be different colors.

If desired, you can choose a different CSS class for every link. and, they can each have their own unique color and size. Obviously, this would be too extravagant. But, it can work in a more subtle manner such as highlighting Top-Rated sites. Or, minimize inactive websites. Or, if a website has a lenghthy title, you can tweak it alittle. But, for demonstrative purpose, we'll create large differences in the example below. NOTE- Although the links below vary in size & colors, we're choosing to universally keep the same HOVER and ACTIVE colors. Also, there will be no difference between link and visited for each link. <style type="text/css"> .font7:link {font-size:11px; color:red} .font7:visited { color:red} .font7:hover {color:rgba(42,88,153,0.4)} .font7:active { color:black} .font91:link {font-size:17px; color:green} .font91:visited { color:green} .font91:hover {color:rgba(42,88,153,1.0)} .font91:active { color:black} .font92:link {font-size:11px; color:blue} .font92:visited { color:blue} .font92:hover {color:rgba(42,88,153,1.0)} .font92:active { color:black} .font93:link {font-size:13px; color:black} .font93:visited {color:black} .font93:hover {color:rgba(42,88,153,1.0)} .font93:active {color:black} .font94:link {font-size:15px; color:purple} .font94:visited {color:purple} .font94:hover {color:rgba(42,88,153,1.0)} .font94:active {color:black} .font95:link {font-size:19px; color: rgba(121,121,157,1.0)} .font95:visited {color:purple} .font95:hover {color:rgba(42,88,153,1.0)} .font95:active {color:black} .font96:link {font-size:20px; color: rgba(60,167,176,1.0)} .font96:visited {color: rgba(60,167,176,1.0)} .font96:hover {color:rgba(42,88,153,1.0)} .font96:active {color:black} .font97:link {font-size:22px; color: rgba(60,67,176,1.0)} .font97:visited {color: rgba(60,67,176,1.0)} .font97:hover {color:rgba(42,88,153,1.0)} .font97:active {color:black} .font98:link {font-size:24px; color: rgba(11,44,47,1.0)} .font98:visited {color: rgba(11,44,47,1.0)} .font98:hover {color:rgba(42,88,153,1.0)} .font98:active {color:black} .font99:link {font-size:26px; color: rgba(39,11,67,1.0)} .font99:visited {color: rgba(39,11,67,1.0)} .font99:hover {color:rgba(42,88,153,1.0)} .font99:active {color:black} .font992:link {font-size:28px; color: rgba(176,80,80,1.0)} .font992:visited {color: rgba(176,80,80,1.0)} .font992:hover {color:rgba(42,88,153,1.0)} .font992:active {color:black} .font993:link {font-size:30px; color: rgba(28,64,34,1.0)} .font993:visited {color: rgba(28,64,34,1.0)} .font993:hover {color:rgba(42,88,153,1.0)} .font993:active {color:black} .font994:link {font-size:32px; color: rgba(32,54,79,1.0)} .font994:visited {color: rgba(32,54,79,1.0)} .font994:hover {color:rgba(42,88,153,1.0)} .font994:active {color:black} .font995:link {font-size:17px; color: rgba(98,114,131,1.0)} .font995:visited {color: rgba(98,114,131,1.0)} .font995:hover {color:rgba(42,88,153,1.0)} .font995:active {color:black} .font90:link {font-size:6px; color: rgba(176,184,193,0.6)} .font90:visited {color: rgba(176,184,193,0.6)} .font90:hover {color:rgba(42,88,153,1.0)} .font90:active {color:black} .font996:link {font-size:17px; color: rgba(176,184,193,1.0)} .font996:visited {color: rgba(176,184,193,1.0)} .font996:hover {color:rgba(42,88,153,1.0)} .font996:active {color:black} .font997:link {font-size:17px; color: rgba(150,57,7,1.0)} .font997:visited {color: rgba(150,57,7,1.0)} .font997:hover {color:rgba(42,88,153,1.0)} .font997:active {color:black} .font998:link {font-size:17px; color: rgba(90,48,25,0.8)} .font998:visited {color: rgba(90,48,25,0.8)} .font998:hover {color:rgba(42,88,153,1.0)} .font998:active {color:black} .font999:link {font-size:17px; color: rgba(146,122,108,1.0)} .font999:visited {color: rgba(146,122,108,1.0)} .font999:hover {color:rgba(42,88,153,1.0)} .font999:active {color:black} </style>

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 8
using HSL colors and hsla
besides using Hexadecimal colors and RGB, there are many other methods as well. Such examples include CMYK Colors (which is a combination of CYAN, MAGENTA, YELLOW , and BLACK ). (CMYK is excellent for editor tools, but not designed for HTML). HWB (which stands for Hue, Whiteness, Blackness ). (apparently HWB was used long ago in builder programs. NOT optimized for internet. ). other examples include the following method of HSL (and HSLa). we'll be taking a brief look at hsl (which stands for HUE, SATURATION, LIGHTNESS). and hsla (which is HSL-alpha). HSLa is more versatile than HSL. HSLa offers transparency. (Just as rgba enables opacity while rgb does not). (B) In this case: hsl(211, 100%, 28%) produces the same exact effect as hsla(211, 100%, 28%,1.0) while hsla(211, 100%, 28%,1.0) can be altered more precisely in the future. here are examples of HSLa- hsla(211, 100%, 28%,0.9) hsla(211, 100%, 28%,0.37) hsla(211, 100%, 28%,0.68) etc. (B) As always; We accomplish this goal by creating a CSS Class. and placing the code within each link. So, we're gonna name it "font10". This is how it will appear within the web page: <a class="font10" href="http://www.campusreform.org/" target="_blank" title="off-topic">Campus Reform</a> and,the accompanying CSS code must also be applied. <style type="text/css"> /* all CSS code here */ .font10:link {font-size:17px; color:hsla(211, 100%, 28%,1.0) } .font10:visited {color:hsla(211, 100%, 28%,1.0) } .font10:hover {font-size:18px; color:hsla(186, 29%, 66%, 0.8) } .font10:active {color:hsla(186, 29%, 16%, 0.8) } /* all CSS code here */ </style> NOTE: just for fun, we're increasing the font-size when hovering. (C) What is the advantage of hsl, and hsla? It's not really necessary to change our existing color methods of rgba or hex. BUT, HSLa works well using editor tools. It's very easy to "home-in" on the exact desired color. Because the first numbers (HUE) represent the basic starting color. (0 to 360) So, you already know the initial starting point. Then, the second line (SATURATION) simply tints it. While, the third line (LIGHTNESS) brightens it or darkens it. You really can't use HSL without an editor. And, once I've gotten the desired color, I convert it to rgba. SO, when using a professional editor tool, HSL quickly finds the ideal color. But ultimately, I will always choose RGBa. (D) In the first text field below, I'm using background: hsl(34, 41%, 97%); In the second text field, we're using background: #faf7f3; In the third text field, we're using background: rgba(250,247,243,1.0); These 3 different methods are all producing the same exact color. While, in the 4th text field, we're using the same HSL color with greater transparency - background: hsla(34, 41%, 97%,0.7); (E) there are other color methods, such as 3-digit hex. Examples #fff, or #000. Very simple. Plus, there are longer hex codes which attempt to raise its complexity. such as 8-digit HEX codes. color: #32CD3266;