Font Styling 1/2

Please, start this course if you finished Introduction to CSS Part I!

Text-based styling properties in CSS allow you to specify the appearance of text on a webpage. These properties include the font family, size, weight, color, and other properties that determine the look and feel of the text.

font-family

To specify the font-family for an element in CSS, you can use the following syntax:

For example, to set the font-family for a paragraph element to "Arial", you would use the following code:

You can also specify a list of font families to use as a fallback in case the first choice is unavailable on the user's device. For example, to set the font-family for a paragraph element to Arial as a first choice and Helvetica as a fallback, you would use the following code:

font-size

To specify the font-size for an element in CSS, you can use the following syntax:

For example, to set the font-size for a paragraph element to 16 pixels, you would use the following code:

You can also use relative units (such as ems or percentages) to specify the font size.

font-weight

The font-weight property in CSS allows you to specify the thickness of the text. The syntax for the font-weight property is:

The normal value specifies that the text should be displayed in the normal font-weight, the bold value specifies that the text should be displayed in a bold font weight, the bolder value increases the font-weight by one level (relative to the parent element's font weight). The lighter value decreases the font-weight by one level.

You can also specify the font-weight using a numerical value, with 100 being the thinnest and 900 being the thickest. The values in between (200, 300, 400, etc.) correspond to various levels of thickness. The 400 value is equivalent to the normal value, and the 700 value is equivalent to the bold value.

The following example sets the font-weight for paragraphs to bold.