Styling Text in CSS

1. Fonts

CSS provides several properties to customize the font of text on a webpage. Here are some of the key properties:

• font-family: Specifies the font for the text.
• font-size: Specifies the size of the text.
• font-weight: Specifies the weight (boldness) of the font.

This text uses Open Sans font family.

This text has a 36px font size.

This text is bold (700 weight).

/* Font Family */
font-family: 'Open Sans', sans-serif;

/* Font Size */
font-size: 36px;

/* Font Weight */
font-weight: 700;
                

2. Text Properties

In addition to font properties, CSS provides various text properties to style and manipulate text. Some common text properties include:

• color: Defines the color of the text.
• text-align: Aligns text horizontally (left, right, center, justify).
• line-height: Sets the space between lines of text.
• text-transform: Controls text capitalization (uppercase, lowercase, capitalize).
• text-decoration: Adds decoration to text (underline, overline, line-through, none).

This text has a blue color.

This text is center aligned.

This text has a line height of 2, making the lines more spaced out.

This text is uppercased using text-transform: uppercase.

This text has an underline using text-decoration: underline.

/* Text Color */
color: #3498db;

/* Text Align */
text-align: center;

/* Line Height */
line-height: 2;

/* Text Transform */
text-transform: uppercase;

/* Text Decoration */
text-decoration: underline;
                

3. Using Google Fonts or Other Web Fonts

To use custom fonts on your webpage, you can include web fonts from services like Google Fonts. Here's how:

1. Go to Google Fonts and select the font you want.
2. Copy the <link> tag or @import rule into your HTML or CSS.
3. Apply the font in your CSS using the font-family property.

Example of a Google Font integration:

This text uses the Roboto font from Google Fonts.

/* Link Google Fonts in your HTML */


/* Apply Google Font in your CSS */
font-family: 'Roboto', sans-serif;