CodesJava

Easy learning with example program codes

CSS Font

To control the style of texts, the CSS Font property is used. It is used to change the size, color and style of texts.

Important font attributes:

  • CSS Font color: Used to modify the color of the text.
  • CSS Font family: Used to modify the face of the font.
  • CSS Font size: Used to modify the size of the font.
  • CSS Font style: Used to make the font bold, italic or oblique.
  • CSS Font variant: Used to create a small-caps effect.
  • CSS Font weight: Used to modify the boldness and lightness of the font.

CSS Font Color:

CSS font color is a standalone attribute which is used to modify the text color. To define a color we can use three different formats:

  • By a color name
  • By hexadecimal value
  • By RGB

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
font-size: 100%;  
}  
h1 { color: crimson; }  
h2 { color: #ffa500; }   
p { color:rgb(255, 0, 0); }   
}  
</style>  
</head>  
<body>  
<h1>Hello World!!</h1>  
<h2>Hello World!!</h2>  
<p>Hello World!!</p>  
</body>  
</html>

Output:

Explanation:

In the above example, we are using different formats to modify the text color.

CSS Font Family:

There are two types of the CSS Font family. These are:

  • Generic family: Serif, Sans-serif, and Monospace.
  • Font family: Arial, New Times Roman, etc.
  • Serif: Small lines are included at the end of characters in Serif fonts. For example, Times new roman, Georgia, etc.
  • Sans-serif: Small lines are not included at the end of characters in Serif fonts. For example, Arial, Verdana, etc.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
  font-family: "Times New Roman", Times, serif;
}
p.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p class="serif">Hello World!!</p>
<p class="sansserif">Hello World!!</p>
</body>
</html>

Output:

Explanation:

In the above example, we are using the different generic CSS font families to display text.

CSS Font Size:

To modify the size of the font, the CSS font-size property is used. Possible values for the font size:

ValueUses
xx-smallIt is used to render extremely small text size.
x-smallIt is used to render the extra small text size.
smallIt is used to render the small text size.
mediumIt is used to render the medium text size.
largeIt is used to render the large text size.
x-largeIt is used to render the extra large text size.
xx-largeIt is used to render the extremely large text size.
smallerIt is used to render comparatively smaller text size.
largerIt is used to render comparatively larger text size.
size in pixels or %It is used to define the size value in percentage or in pixels.

Example:

<!DOCTYPE html>
<html>  
<body>  
<p style="font-size:xx-small;">xx-small.</p>    
<p style="font-size:x-small;">x-small</p>    
<p style="font-size:small;">small</p>    
<p style="font-size:medium;">medium</p>    
<p style="font-size:large;">large</p>    
<p style="font-size:x-large;">x-large</p>    
<p style="font-size:xx-large;">xx-large</p>    
<p style="font-size:smaller;">smaller</p>    
<p style="font-size:larger;">larger</p>    
<p style="font-size:200%;">200%</p>    
<p style="font-size:20px;">20 pixels</p>    
</body>  
</html>

Output:

Explanation:

In the above example, we are using the different values of the font size to display text.

CSS Font Style:

To determine the type of font to display the CSS Font style property is used. It can either be italic, oblique, or normal.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}
 
p.italic {
  font-style: italic;
}
 
p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="italic">Hello World!!</p>
<p class="oblique">Hello World!!</p>
</body>
</html>

Output:

Explanation:

In the above example, we are using the different types of font style to display text.

CSS Font Variant:

To define the way to set a font variant of an element, the CSS font-variant property is used. It can either be normal or small-caps.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}
 
p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="small">Hello World!!</p>
</body>
</html>

Output:

Explanation:

In the above example, we are using the different types of font variant to display text.

CSS Font Weight:

To specify the weight of the font and to define the boldness of the font, the CSS font-weight property is used. It can either be normal, bold, bolder, lighter or number (from 100 to 900).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}
 
p.light {
  font-weight: lighter;
}
 
p.thick {
  font-weight: bold;
}
 
p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Hello World!!</p>
<p class="light">Hello World!!</p>
<p class="thick">Hello World!!</p>
<p class="thicker">Hello World!!</p>
</body>
</html>

Output:

Explanation:

In the above example, we are using the different weight of font to display text.

Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status