All about CSS3 for Absolute Beginners: Part 2
Introduction
Welcome back to the blog! Let’s continue our CSS journey by exploring text formatting options that offer greater customization than HTML.
Font Size
The font-size property allows you to adjust text size to suit your design needs. By default, paragraph tags in HTML have a fixed font size, but you can modify them using CSS:
p {
font-size: 45px;
}
This code sets the font size of all paragraph elements to 45 pixels.
Font Weight
The font-weight property controls text boldness, offering more flexibility than the HTML <strong> tag.
p { font-weight: lighter; }
a { font-weight: bold; }
h2 { font-weight: 300; }
You can specify values like lighter, bold, bolder, or numeric values ranging from 100 (lightest) to 900 (boldest). Experiment to see the visual differences.
Font Family
CSS allows you to specify font families to enhance the appearance of text. Some common font families include Arial, Times New Roman, and Helvetica.
* {
font-family: "Times New Roman", Arial;
}
The * selector applies the style universally across all elements.
Quotes are required for font names with spaces, e.g., "Times New Roman".
Fallback fonts ensure compatibility across different devices.
For a broader selection, Google Fonts offers thousands of free fonts.
Using Google Fonts
To use Google Fonts, insert the provided <link> tag in your HTML's <head> section:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Then, set the font-family in your CSS:
body {
font-family: 'Roboto', sans-serif;
}
Text Alignment
The text-align property helps position text within an element. For example, to center a heading:
h1 {
text-align: center;
}
Other values include left, right, center, start, end, and justify.
Line Height and Letter Spacing
Line Height: Defines space between lines of text.
p {
line-height: 2; /* Multiplies by font size */
}
Example: If the font size is 10px, a value of 2 results in a line height of 20px.
Letter Spacing: Adjusts spacing between individual letters.
p {
letter-spacing: 5px;
}
Conclusion
CSS provides extensive control over text formatting, helping you create visually appealing designs. As you progress, you'll discover even more properties to build the webpage of your dreams.
If you have any questions or suggestions, feel free to leave a comment or reach out via the Contact Us page.
Happy coding!