Sunday, January 6, 2019
UNDERSTANDING FONT-FAMILY PROPERTY IN CSS
Hi, I humbly welcome you to today’s lesson. Yesterday, we concluded our intercourse with types of styling in Cascading Stylesheet, and I'm confident that I left no stone unturned in regard to the subject matter. Today I ate a very delicious marshmallow., so I'll dish out, with gladness and overflowing joy, our lesson for today, which incidentally anchors on how to use font-family property in Cascading Style Sheet, (CSS).
Prior, to this moment, I believe you’ve come across font family and its types, probably in MS words or anywhere else. Font family is more of how your text appears in a document. As we’ve established in our first introductory lesson that CSS pegs its fulcrum on beauty, hence it will not be inappropriate if we succinctly examine texts'' appearance in a document and how to influence the look and the feel of text in a given document.
Before that,let it be known to you that there are two major categories of font family namely; theme font and generic font. Theme font is a specific font family such as Times New Roman, Arial, Verdana, Courier New, Aharoni etc. While Generic fonts describe a group of font family with simpler outlook. Example include Monospace, sans-serif, serif.and what have you.
On the same degree of importance, note that when specifying font family in CSS, it is recommended you choose more than one so as to enable the browser to select the one it is compatible with. You must, however, separate each the name of the font family you choose with a comma. And if peradventure, any of the font family name contains more than one words, do well to enclose it with a quotation mark (‘’ ’’) in order to make it readable.
Now open your text editor let us practicalize what we’ve learnt so far.
Write the following codes into the <body> tag of your HTML file
<p class="monospace">
I am a codinglegit
</p>
<p class="sans-serif">
I love marshmallow
</p>
Open a new tab and write this CSS code
.monospace{
font-family:serif,''Times New Roman'',arial;
}
.san-serif{
font-family:verdana,aharoni,serif,calibri;
}
SAVE THE CSS file and reference it in HTML document. It will look like this
Save and open it. it will look like this
NOTE
If you don’t like this long process of the font-family property of a thing, you can simply use Google font API
In side the <head> of your HTML file. e.g
<link rel=stylesheet’’ type=’’text/css’’
Href=’’https://font.googleapis.com/css?family=tangerine’’>
................Etc.
WRAPPING UP
Keep learning, keep practicing, in our next lesson, we are going to handle a critical issue in the cascading style sheet. Till then, remain focused.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment