HTML Styles

The HTML style attribute lets you add colors, change fonts, adjust sizes, and more. Think of it like giving your text a little makeover.

The HTML Style Attribute

You can add styles to any HTML element using the style attribute. Here is the basic format:

<tagname style="property:value;">Content</tagname>

The property is what you want to change (like color or size). The value is how you want to change it (like red or 20px).

Do not worry if this looks strange. You will learn more about CSS later. For now, just know that the style attribute is a quick way to make things look different.

Background Color

Want to add a background color to something? Use background-color. You can color the whole page or just individual elements.

Here is how to give your whole page a light blue background:

You can also give different elements different background colors:

You can use color names like red, blue, yellow, or lightgray. There are many named colors to choose from.

Text Color

To change the color of your text, use color. This is different from background color. Background color changes the background behind the text. Color changes the text itself.

You can also combine background color and text color together:

Fonts (Change How Letters Look)

Different fonts change the style of your letters. Use font-family to pick a font. Some common ones are Arial, Verdana, and Courier.

Not every computer has every font. But common ones like Arial, Verdana, Times New Roman, and Courier usually work everywhere.

Text Size (Make It Big or Small)

Use font-size to control how big or small your text appears. You can use percentages like 150% or pixels like 24px.

Percentages like 200% mean twice the normal size. Pixels like 24px are a fixed size. Both work fine.

Text Alignment (Left, Center, Right)

By default, text lines up on the left side. You can change that with text-align.

Centering is great for titles. Right alignment can be useful for dates or author names. Left alignment is the standard for most text.

Try It Yourself (Combine Everything)

Now let us put it all together. You can use multiple styles on the same element. Just separate them with semicolons.

See how many semicolons there are? Each style rule ends with a semicolon. The last one does not need one, but adding it does not hurt.

Quick Summary

• Use the style attribute to add styles to any element
• background-color changes the background color
• color changes the text color
• font-family changes the font style
• font-size changes how big the text is
• text-align changes if text is left, center, or right
• Separate multiple styles with semicolons

What Just Happened? Let Me Explain

• The style attribute uses CSS inside your HTML tags. It is a quick way to style things.
• You will learn a better way to style entire websites later (external CSS). But the style attribute is great for small experiments.
• Each style has a property (like color) and a value (like red). They are separated by a colon.
• Multiple styles are separated by semicolons.
• Do not worry about memorizing everything. You will pick it up as you practice.

HTML Style Reference

Here are the CSS properties we covered in this chapter: