19. CSS font family, font size and color

Khairul Alom

31 Jul 202308:25

Summary

TLDRIn this CSS tutorial, we dive into how to style and customize fonts using CSS. Starting with the basics, we cover how to change font families, adjust font sizes, and set font colors for elements like the H1 tag and div tag. The tutorial also explains text alignment, how to center and justify text, and introduces shorthand CSS for quicker styling. Whether you're a beginner or intermediate, this tutorial equips you with the essential techniques to effectively use CSS to enhance text presentation on web pages.

Takeaways

😀 Learn how to style text using CSS fonts, including selecting and decorating fonts.
😀 Understand how to use the `font-family` property to change the font of text in CSS.
😀 The default font for the H1 tag is set to a standard font, but it can be customized.
😀 You can use the `font-size` property to adjust the size of the text (e.g., changing from 32px to 48px).
😀 The `color` property can be used to change the font color (e.g., setting the font color to blue).
😀 Multiple font families can be applied by specifying a list (e.g., 'Arial', 'Helvetica', 'sans-serif').
😀 Using the `font-family` shorthand allows for faster styling (e.g., 'font: Arial, sans-serif;').
😀 The `margin: auto` property centers elements horizontally, making the page layout more balanced.
😀 Using `text-align: justify` makes the text fully aligned to both the left and right margins for better readability.
😀 You can apply styles like italic and different font sizes (e.g., 12px) to change the text appearance.
😀 This tutorial explains how to apply various font styles, including font family, font size, and color, to enhance webpage design.

Q & A

What is the main topic of this CSS tutorial?
-The main topic of the tutorial is learning how to decorate and select fonts using CSS, including how to apply different font families, sizes, and colors.
How do you link a CSS file to an HTML document?
-To link a CSS file, you use the <link> tag in the HTML document's <head> section, specifying the path to the CSS file, such as 'style.css' inside a CSS folder.
What does the 'text-align: center;' property do?
-The 'text-align: center;' property centers the text within the element, such as an <h1> tag, making the text appear in the middle of its container.
What is the default font size for an H1 tag in CSS?
-The default font size for an <h1> tag is 32 pixels, but it can be adjusted using the 'font-size' property.
How do you change the font family in CSS?
-To change the font family, use the 'font-family' property followed by the desired font name. For example, 'font-family: Arial, sans-serif;' will apply the Arial font, falling back to sans-serif if Arial is unavailable.
What is the purpose of using 'margin: auto;' in CSS?
-'margin: auto;' is used to horizontally center an element within its parent container. When applied to block-level elements, it ensures equal spacing on both sides.
How can you justify the text inside a div element in CSS?
-To justify text within a <div> element, use the 'text-align: justify;' property, which ensures that the text is spread evenly across the width of the container, with both the left and right edges aligned.
What is shorthand notation for styling fonts in CSS?
-In CSS, shorthand for styling fonts can be written using the 'font' property, where you can define 'font-family', 'font-size', 'font-style', 'font-weight', and 'line-height' all in one line. For example: 'font: italic 12px Arial, sans-serif;'
What happens when you apply 'font-style: italic;' to text?
-When 'font-style: italic;' is applied, it changes the text to an italic version of the selected font, which is commonly used to emphasize certain parts of the content.
Can you change the font size and color simultaneously for an element?
-Yes, you can change both the font size and color of an element by specifying the 'font-size' and 'color' properties. For example, 'font-size: 48px;' and 'color: blue;' will set the text to 48px in size and blue in color.