CSS Font Family: Arial

Introduction

In CSS, font family property is used to define the font of an HTML element. Arial is a popular sans-serif font family that is commonly used on the web. In this article, we'll discuss how to use Arial font family in CSS.

Syntax

The syntax for defining Arial font family in CSS is as follows:

selector {
    font-family: Arial, sans-serif;
}

The first value, Arial is the preferred font family. If Arial is not available, the browser will use the second value, sans-serif, as a fallback font family.

Example

To change the font family of a paragraph to Arial, use the following code:

p {
    font-family: Arial, sans-serif;
}

This will apply the Arial font family to all the paragraphs in the HTML document.

Style Attributes

Apart from the font-family property, there are other style attributes that can be applied to the font to change its appearance. These include font-size, font-style, font-weight, and text-decoration.

Font Size

The font-size property is used to set the size of the font. The value can be in pixel (px), em, or percentage (%) units. The default font size is 16px.

p {
    font-size: 20px;
} 

This will increase the font size of the paragraphs to 20px.

Font Style

The font-style property is used to set the style of the font. The value can be normal, italic, or oblique.

p {
    font-style: italic;
} 

This will make the paragraphs appear in italic style.

Font Weight

The font-weight property is used to set the weight of the font. The value can be normal, bold, bolder, or lighter.

p {
    font-weight: bold;
} 

This will make the paragraphs appear in bold style.

Text Decoration

The text-decoration property is used to add decoration to the text. The value can be none, underline, overline, or line-through.

p {
    text-decoration: underline;
} 

This will add an underline to the paragraphs.

Conclusion

In this article, we discussed how to use Arial font family in CSS. We also covered some of the style attributes that can be applied to the font to change its appearance. To summarize, we can use the font-family property to define the preferred font family, and the other style attributes to modify its appearance.