How do you change the font size of an element in CSS?

There are several methods to change the font size of elements in CSS:

1. Using the font-size property: This is the most straightforward approach. You can target specific elements using CSS selectors and set the font-size property. For example, to change the font size of all <p> elements to 16 pixels, you can write:

css
p {
    font-size: 16px;
}

Additionally, font-size supports other units such as em, rem, pt, and %.

2. Using inheritance: Font size is an inheritable property. If a parent element's font size is set, child elements without explicitly defined font sizes will inherit the parent's font size. For example:

css
div {
    font-size: 18px;
}

In this case, if the div contains <p> elements without individually specified font sizes, those <p> elements will also use the 18-pixel font size.

3. Using class or ID selectors: You can define specific classes or IDs to set font size, enabling flexible control over targeted elements or groups. For example:

css
.large-text {
    font-size: 20px;
}

Then apply this class in HTML:

html
<p class="large-text">This is a paragraph with large font.</p>

4. Responsive font size: When adjusting font size based on screen size, media queries provide a solution:

css
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 601px) {
    body {
        font-size: 16px;
    }
}

Here, if the screen width is 600 pixels or less, the font size is set to 14 pixels; for screen widths greater than 600 pixels, it is set to 16 pixels.

These methods can be flexibly applied, and you should choose the appropriate approach based on your specific requirements and scenarios.