I'm breaking down the HTML and css code

This page will focus specifically on Font Sizes.

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.

We'll begin with The original list (using HTML).
This is not using any CSS Class selector or enhancements.

This example below is using the Blog's default settings. Here, in the following 'selection zero', we're not using any CSS class. Or special codes. It's Just straight HTML. Example: <div><a href="http://www.campusreform.org/" target="_blank" title="off-topic">Campus Reform</a></div>

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 1
We'll create a slightly larger size of the links.
(let's choose a 17px font size).
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
creating a large Font-size of 22px
In example #2 below, we'll create a font-size which is too large. You'll even notice that it stretches beyond the text field. But, we're demonstrating how very large fonts influence the aesthetics. (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 "too-large-font". So, within the code; we're now adding the class="too-large-font". (B) and, it looks like this within each link: <a class="too-large-font" href="http://www.campusreform.org/" target="_blank" title="off-topic">Campus Reform </a></div> (Our chosen class="too-large-font" is added to each and every link). THEN, Code must also be added within the CSS. <style type="text/css"> .too-large-font {font-size:22px;} </style> (C) Needless to say: (the .too-large-font Classname in the CSS is the same name as class="too-large-font" within the HTML link). (D) NOTICE: (for future reference) - a complete CSS code sequence is often used to identify all features. But, we won't do that here. .too-large-font:link {font-size:22px } /* a normal, unvisited link */ .too-large-font:visited {add code here } /* a link the user has visited */ .too-large-font:hover {add code here } /* a link when the user mouses over it */ .too-large-font:active {add code here } /* a link the moment it is clicked */

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 3
a font size of 19px
In example #3 below, we'll create a font-size of 19px. which looks like this- .norsewolf:link {font-size:19px;} (A) This time, I'm creating a CSS Classname which is NOT relevant. We'll call it "norsewolf". (It's just a random term I've chosen). Then, create class="norsewolf" (and place it within each link). (B) and, it looks like this within each link: <a class="norsewolf" href="http://www.campusreform.org/" target="_blank" title="off-topic">Campus Reform </a></div> (Our chosen class="norsewolf" is added to each and every link). THEN, Code must also be added within the CSS. <style type="text/css"> .norsewolf:link {font-size:19px;} </style> (C) NOTICE -You'll notice that I'm using .norsewolf:link {font-size:19px;} in the above CSS. While in other examples, we use .norsewolf {font-size:19px;} They both perform the same basic function. (D) Needless to say: (the .norsewolf Classname in the CSS is the same name as class="norsewolf" within the HTML link). (E) NOTICE: (for future reference) - a complete CSS code sequence is often used to identify all features. But, we won't do that here. .norsewolf:link {font-size:19px } /* a normal, unvisited link */ .norsewolf:visited {add code here} /* a link the user has visited */ .norsewolf:hover {add code here} /* a link when the user mouses over it */ .norsewolf:active {add code here} /* a link the moment it is clicked */

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

·Zionget·

•

Zionscape

Zionscape Lite

- - - - - - - - - - -

example 4
percentages in fonts (such as 90%, or 130%, etc).
this example will choose 110%.
In example #4 below, we'll try a different method of font-sizes. This time, we're using percentages. The default 100% size is equivalent to 16px. We'll use a 110% font-size. It's being written as follows- .example4 {font-size: 110%;} [[--- NOTE: I strongly prefer using the previous examples of px sizing.) ---]]

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 5
font-size:medium;
There's yet another method for creating fonts. It begins with xx-small and ends with xx-large. font-size:xx-small font-size:x-small font-size:small font-size:medium font-size:large font-size:x-large font-size:xx-large In the following example #5: I'm using .fifth-example {font-size:medium;} This is how it might look in HTML. <a href="http://www.campusreform.org/" target="_blank" class="fifth-example">Campus Reform</a> also note: other values can be used. But it might be somewhat confusing. Various examples include- smaller or larger. initial, inherit. More examples include- font-size: 1em; (which is equivalent to 16px). /* */ font-size: 2em is 32px (which is double the original 16px) /* */ font-size: 1.2ex /* ex is rarely used */ font-size: 1.6ex; font-size: 20pt; /* pt stands for points */ font-size: 1.5pc; /* pc stands for picas */

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 6 (using em measuring).
font-size:1.13em
Basically, 1em is the equivalent to 16px. But, if your websites default is only 15px, then this number becomes the 'parent value' equivalent to 15px. But, for practical purposes, we're assuming that 1em = 16px. and assuming that html or body is 100%. such as html{font-size:100%; } (B) We could increase this size by 50% by making it 1.5em. Or, we'll choose a smaller increase. 1.1em. More interestingly, we can use more precise decimals. such as 1.07, 1.73, 1.48, 1.94, 1.36, etc. it even works with triple-digit decimals. such as 1.327. (C) Using the [em] method works nice when trying to slightly enlarge the existing text or links. Oddly, em dates back to older newspapers, and its size represents the large letter M. (D) In the example below, we'll choose 1.13em. Of course, this differs from 1.1 em. it also differs from 1.3 em. and, it differs from 1.12 em. etc, etc, etc. -These are exact decimals- (E) just for fun, we've slightly varied a few of our links. Most of our links are 1.13 em. However, "Black Pigeon speaks" is a slightly larger 1.17 em "Black pilled" is a slightly smaller 1.1 em "Blonde Belly" is slightly larger 1.17 em. and, "Campus Reform" is even larger 1.19 em. Note: there's a huge difference between 1.17em and 1.7em. 1.17em is slightly smaller than 1.2em. While 1.7em is VERY large.

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 7
Links can be different sizes, if desired.

I prefer using PX fonts, such as font-size:18px. I also prefer using CSS Class tags, such as class="my-standard-choice" and, apply it to the CSS Code. .my-standard-choice:link {font-size:19px; color:#0000ff; etc } .my-standard-choice:visited {add code here} .my-standard-choice:hover {add code here} .my-standard-choice:active {add code here} and add it to the links. <a class="my-standard-choice" href="http://www.alipac.us/content/" target="_blank">Alipac.us</a> (B) for broader use, CSS ID labels are used for the entire webpage. <div id="main-container"> and apply it to the css code. #main-container {margin: 0 auto; width: 890px; background: white; padding:5px; border-radius:3px; etc. etc. } (C) when using CSS Class, and placing tags... It's even possible to create different classnames for every link. So, you could easily turn each link into its own unique character. In theory, every link below can be a different size, color, and font-type. This usually produces undesirable effects. BUT, it allows you to highlight specific links.

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

example 8
(creating a small font-size).
Unlike the old HTML font-sizes, CSS allows great versatility. In example #1 below, well create a very small font-size. (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. .font10 {font-size:10px;} (C) Also, 2 links will remain at regular size. (stuff blacks don't like, and, the religion of peace). (D) As always , the CSS code is always placed within the appropriate tags. (such as the following example) <style type="text/css"> /* all CSS code here */ .font10 {font-size:10px;} /* all CSS code here */ </style>

Dennis Michael Lynch

Metapedia

Majority Rights

Mark Collett on twitter

- - - - - - - - - - -

-----------

I'm breaking down the HTML and css code

Friday, January 18, 2019

No comments:

Blog Archive