HTML styles are used to control the appearance of elements on a web page. You can change the color, font size, font family, background, alignment, spacing, borders, and many other visual properties of HTML elements using CSS.

Although HTML provides the structure of a web page, CSS is responsible for most of its visual presentation. HTML styles can be added directly to elements using the style attribute or through internal and external CSS.

What Are HTML Styles?

HTML styles define how HTML elements should look in a browser.

For example:

<p style="color: blue;">This is blue text.</p>

Here, the style attribute contains a CSS declaration that changes the text color.

The basic syntax is:

<element style="property: value;">

For example:

<h1 style=”color: green;”>HTML Styles</h1>

The HTML style Attribute

The style attribute allows you to apply CSS directly to an HTML element.

<p style=”color: red;”>This is red text.</p>

You can use the style attribute with many HTML elements, including:

• Headings
• Paragraphs
• Links
• Images
• Divisions
• Buttons
• Lists
• Tables

Changing Text Color

The CSS color property changes the color of text.

<p style=”color: blue;”>This is blue text.</p>

You can use color names, HEX values, RGB values, and other CSS color formats.

<p style=”color: #2196f3;”>This is blue text.</p>

Changing Background Color

The background-color property changes the background color of an element.

<div style="background-color: #e8f3ff;">
    <p>Welcome to Web4Learners.</p>
</div>

You can apply background colors to headings, paragraphs, sections, buttons, and other elements.

Changing Font Size

The font-size property controls the size of text.

<p style="font-size: 20px;">
    This text is 20 pixels in size.
</p>

You can use units such as px, em, rem, %, and vw.

For example:

<h1 style=”font-size: 40px;”>HTML Styles</h1>

Changing Font Family

The font-family property specifies the typeface used for text.

<p style="font-family: Arial;">
    This text uses the Arial font.
</p>

You can also provide fallback fonts:

<p style="font-family: Arial, sans-serif;">
    This text uses a sans-serif font.
</p>

Aligning Text

The text-align property controls the horizontal alignment of text.

<p style="text-align: center;">
    This text is centered.
</p>

Common values include:

<p style="text-align: left;">Left aligned</p>

<p style="text-align: center;">Center aligned</p>

<p style="text-align: right;">Right aligned</p>

Adding Borders

The border property adds a border around an element.

<div style="border: 1px solid #2196f3;">
    This is a bordered box.
</div>

You can control the border width, style, and color.

<p style="border: 2px solid black;">
    This paragraph has a border.
</p>

Adding Padding

The padding property creates space between an element’s content and its border.

<div style="padding: 20px;">
    This box has 20 pixels of padding.
</div>

Padding is commonly used for cards, buttons, boxes, and content sections.

Adding Margins

The margin property creates space outside an element.

<p style="margin: 30px;">
    This paragraph has a 30-pixel margin.
</p>

The difference between margin and padding is important:

Margin
┌─────────────────────────┐
│        Padding          │
│   ┌─────────────────┐   │
│   │     Content     │   │
│   └─────────────────┘   │
└─────────────────────────┘

Padding creates space inside an element, while margin creates space outside it.

Combining Multiple Styles

You can apply multiple CSS properties to the same element.

<p style="color: white; background-color: #2196f3; padding: 15px;">
    Styled paragraph
</p>

Each CSS declaration is separated by a semicolon.

Three Ways to Add CSS to HTML

There are three common ways to apply CSS to an HTML document:

• Inline CSS
• Internal CSS
• External CSS

Inline CSS

Inline CSS is written directly inside the style attribute.

<h1 style="color: #2196f3;">HTML Styles</h1>

Inline CSS is useful for small examples or when a specific element needs a unique style.

However, using inline styles throughout a large website can make the HTML difficult to maintain.

Internal CSS

Internal CSS is written inside a <style> element in the <head> section.

<!DOCTYPE html>
<html>
<head>

    <style>
        h1 {
            color: #2196f3;
        }

        p {
            font-size: 18px;
        }
    </style>

</head>
<body>

    <h1>HTML Styles</h1>

    <p>Learn how to style HTML elements.</p>

</body>
</html>

Internal CSS is useful when styles are mainly required for a single HTML page.

External CSS

External CSS is stored in a separate .css file and connected to the HTML document using the <link> element.

HTML:

<link rel="stylesheet" href="style.css">

CSS:

h1 {
    color: #2196f3;
}

p {
    font-size: 18px;
}

External CSS is generally the preferred approach for larger websites because the same stylesheet can be reused across multiple pages.

Inline vs Internal vs External CSS

HTML Styles Example

Here is a complete example using internal CSS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>HTML Styles</title>

    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            color: #2196f3;
        }

        p {
            color: #333;
            font-size: 18px;
            line-height: 1.6;
        }

        .box {
            background-color: #e8f3ff;
            border: 1px solid #2196f3;
            padding: 20px;
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <h1>HTML Styles</h1>

    <p>
        CSS allows you to control the appearance of HTML elements.
    </p>

    <div class="box">
        <p>
            This is a styled content box.
        </p>
    </div>

</body>

</html>

Common CSS Properties for HTML Styles

HTML Styles Best Practices

Follow these practices when styling HTML:

• Use CSS for presentation.
• Use inline styles only when appropriate.
• Prefer external CSS for larger websites.
• Keep HTML structure separate from visual styling.
• Use reusable CSS classes.
• Maintain consistent fonts, colors, and spacing.
• Choose colors with sufficient contrast.
• Make designs responsive for different screen sizes.
• Avoid repeating the same inline styles throughout a website.

Common Mistakes with HTML Styles

One common mistake is adding too many styles directly to individual elements.

For example:

<p style="color: blue; font-size: 18px; margin: 20px;">
    Text
</p>

<p style="color: blue; font-size: 18px; margin: 20px;">
    More text
</p>

For multiple elements, a CSS class is usually cleaner:

<p class="content-text">Text</p>

<p class="content-text">More text</p>

.content-text {
    color: blue;
    font-size: 18px;
    margin: 20px;
}

This makes the styling easier to reuse and maintain.

HTML Styles Cheat Sheet