CSS Font Blogger

CSS Font Blogger

Basic of CSS Font

 

Basic of CSS Font – Let’s take a moment to learn CSS code, this time is about Fonts. Font settings through CSS are always used in each template whether blogger template or other web template. Font setting here includes the font type setting, font size and so forth.

CSS Properties

In CSS there are terms named Property and Value. Note the CSS code below:

body { background:#8f8e8e; color:#000000; font-family:Arial, Tahoma, Verdana; font-size:12px; } 

Let’s take color :#000000; code as sample. Color is a Property and #000000 is a Value. Property is a CSS code that has been standard or has been set in CSS, while Value is a value assigned for particular property. Property and Value are separated by a colon ( : ), and to split one property with another are with semicolon code ( ; ).

CSS Font Properties

In fonts, there are several properties that can be used. The following table are the font properties and their description:

Properties	Description
font	Arrange all font properties in one declaration
font-family	Font type setting for specific text
font-size	Font size setting for specific text
font-style	Font style setting for specific text
font-variant	Specifically setting whether a font will be displayed in small-caps or not
font-weight	Specifies the weight of a font

Font-Family Property

Font-Family property is to set the font type for a text. Several font types which often used for the blogger template are Times, Arial, Tahoma, Verdana, Georgia, TimesNewRoman, Sans-serif, and so on.
The Value of font-family are usually written in 3 font types and separated with the commas   ( , ), for example:
font-family: “Arial”,Georgia,TimesNewRoman;
font-family:”Times”, Tahoma, Verdana;
font-family:”Georgia”, Arial, Verdana;
Seen that one among the 3 types of letters which were written are given two quotes ( ” ” ). Those are the font types selected, and the rest are as reserve, if the first font can’t be opened by the visitor’s browser then the next font will be used.

Font-Size Property

Font-size property is used to adjust the font size. There are many values that can be used for the font size property. The following are table Value for the font size property and the descriptions:

Value	Description
xx-small	Adjust the font in xx-small size
x-small	Adjust the font in extra small size
small	Adjust the font in small size
medium	Adjust the font in medium size. This is the default font size
large	Adjust the font in large size
x-large	Adjust the font in extra large size
xx-large	Adjust the font in xx-large size
smaller	Adjust the font size smaller than the main element
larger	Adjust the font size larger than the main element
length	Set the font in a fixed size in units of px, pt, cm, etc
%	Adjust font size based on the percentage of the main element
inherit	Specific font size inherited from the main element

The more often used is the length that is in units of pixels (px), points (pt), cm, em, and so forth. For example:

font-size: 12px; 

Font-size property is often used to distinguish the size of headings (h1, h2, h3, etc), or paragraph. Suppose

h1 {font-size: 20px}

Font-Style Property

Font-style property is used to determine the style of the font. Font style only has 3 Values those are normal, italic, and oblique. The most often used is the italic style. The sample code is

font-style:italic;

Font-Weight Property

There are many values of font-weight properties, but the most widely used is to make writing bold printing. Example

font-weight:bold;

For more info about CSS Font, you can read at W3 School.

***

CSS Font Blogger