CSS Basic Part-4

CSS Basic Part-4 with advance feature of CSS font Property

Font is one of the important properties of CSS. Font property helps the reader to understand the text in their favorite style and size. Font property can add the finest look on text.

What We Discuss

Font Family

The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded using the information provided by a @font-face at-rule.

Note:  Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Syntax Example

font-family: Goudy Bookletter 1911, sans-serif;

font-family: Red/Black, sans-serif;

font-family: “Lucida” Grande, sans-serif;

font-family: Ahem!, sans-serif;

font-family: [email protected], sans-serif;

font-family: #POUND, sans-serif;

font-family: Hawaii 5-0, sans-serif;



p.serif{font-family:"Times New Roman",Times,serif;}





<h1>CSS font-family</h1>

<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>

<p class="sansserif">This is a paragraph, shown in the Arial font.</p>


Visual Example 1

Font Size

 The font-size CSS property specifies the size of the font – specifically the desired height of glyphs from the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of em,px,pt,ex etc for length units.

Formal syntax: <absolute-size> | <relative-size> | <length> | <percentage>

Syntax Example

font-size: xx-small /* <absolute-size> values */

font-size: x-small

font-size: small

font-size: medium

font-size: large

font-size: x-large

font-size: xx-large

font-size: larger    /* <relative-size> values */

font-size: smaller

font-size: 12px      /* <length> values */

font-size: 0.8em

font-size: 80%       /* <percentage> values */



h1 {font-size:3em;}

h2 {font-size:24px;}

p {font-size:100%;}




<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is a paragraph.</p>


Visual Example 2

Font Style

The font-style CSS property allows italic or oblique faces to be selected within a font-family.

Note: Italic  

Formal syntax: normal | italic | oblique

Syntax Example

font-style: normal

font-style: italic

font-style: oblique

font-style: inherit



p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}




<p class="normal">This is a paragraph, normal.</p>

<p class="italic">This is a paragraph, italic.</p>

<p class="oblique">This is a paragraph, oblique.</p>


Visual Example 3

Font Variant

The font-variant CSS property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand.

Formal syntax: normal | small-caps

Syntax Example

font-variant: normal

font-variant: small-caps

font-variant: inherit



p.normal {font-variant:normal;}

p.small {font-variant:small-caps;}




<p class="normal">My name is Hege Refsnes.</p>

<p class="small">My name is Hege Refsnes.</p>


Visual Example 4

Font Weight

 The font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

 Note:  font-weight value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.

Formal syntax: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Syntax Example

font-weight: normal

font-weight: bold

font-weight: lighter

font-weight: bolder

font-weight: 100

font-weight: 200

font-weight: 300

font-weight: 400

font-weight: 500

font-weight: 600

font-weight: 700

font-weight: 800

font-weight: 900

font-weight: inherit


p.normal {font-weight:normal;}

p.light {font-weight:lighter;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}



<p class="normal">This is a paragraph.</p>

<p class="light">This is a paragraph.</p>

<p class="thick">This is a paragraph.</p>

<p class="thicker">This is a paragraph.</p>


Visual Example 5


 The font CSS property is either a shorthand property for setting font-stylefont-variantfont-weightfont-sizeline-heightand font-family, or a way to set the element’s font to a system font, using specific keywords.

As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.

Formal syntax:  [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ]






font:15px arial,sans-serif;




font:italic bold 12px/30px Georgia,serif;





<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>


Visual Example 6

Print Friendly

Leave a Reply

Your email address will not be published. Required fields are marked *