How to Set Font Size, Color, and Font Style Using HTML and CSS

Note: In this article, we will explore HTML and CSS to set the font size, color, and font style for text on a web page. This is more acceptable and efficient than using deprecated attributes like FONT COLOR“PINK” SIZE“7” FACE“Arial”.

Setting Font Size, Color, and Font Style in HTML with Inline Style

For a quick, straightforward method of setting font size, color, and font face, you can use inline style attributes within the HTML elements. Note that this method is less flexible and should not be used for large websites or pages with complex styling needs. Here's an example:

html
head
style
p {
    font-size: 20px;
    color: #ff69b4;
    font-family: Arial, Helvetica, sans-serif;
}
/style
/head
body
    pThis is pink text in Arial with a size of 20px./p
/body
/html

In this example, the p tag is styled directly within the HTML document. The font-size property is set to 20 pixels, the color property is set to a shade of pink (#ff69b4), and the font-family property is set to Arial with fallbacks to Helvetica and sans-serif.

Using CSS for Flexible Styling

It is generally recommended to use CSS for your styling needs. CSS separates the style from the structure of your HTML, making your code more maintainable and scalable. Here's how you would do it:

html
head
style
p {
    font-size: 20px;
    color: #ff69b4;
    font-family: Arial, Helvetica, sans-serif;
}
/style
/head
body
    pThis is pink text in Arial with a size of 20px./p
/body
/html

In this example, the CSS rules are located within the style tag inside the head section of the HTML document. This is a common practice for small websites or inline styling.

Using an External CSS File

For larger projects, it is better to keep your CSS separate from your HTML. Here's an example of using an external CSS file:

html
head
link rel"stylesheet" type"text/css" href"styles.css">
/head
body
    pThis is pink text in Arial with a size of 20px./p
/body
/html

In this example, the link tag is used to reference an external CSS file named styles.css. Inside the styles.css file, you would have the following rules:

body {
    font-size: 20px;
    color: #ff69b4;
    font-family: Arial, Helvetica, sans-serif;
}

The body tag in the example sets the font size, color, and font family for the entire document. You can apply these styles specifically to certain elements by targeting the element with a selector, such as a p tag.

Conclusion

Using HTML and CSS to set font size, color, and font style is a powerful and flexible method for creating web pages that look great and are easy to maintain. Whether you are working on a small project or a large website, it is a best practice to separate your styles from your HTML.

For more information on HTML and CSS, you can explore:

W3Schools HTML tutorial MDN Web Docs CSS documentation GeeksforGeeks guide to CSS

By following best practices and using modern techniques, you can create web pages that are not only aesthetically pleasing but also user-friendly and accessible.