Prev Next

HTML Styles

HTML styles allow you to change the look and feel of your webpages. While it is generally best practice to keep styling in external CSS files, inline and internal styles can still be useful for quick changes or examples. The style attribute can be applied to most HTML elements, letting you modify color, font, margins, and more directly within your HTML code.

Key Topics

Inline Styles

Inline styles use the style attribute within the HTML element itself. Below are some individual examples. For full page examples, a copy code box will be provided.

Example: A paragraph styled to appear in blue.

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

Example: A heading with a larger font size.

<h1 style="font-size:24px;">Larger Heading</h1>

Example: A division styled with a border and padding.

<div style="border:1px solid #000; padding:10px;">Boxed Content</div>

Basic Page Structure Example

This example demonstrates how inline styles can be used throughout a simple HTML document. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Page</title>
</head>
<body>
    <h1 style="color:green;">Welcome!</h1>
    <p style="font-family:Arial; font-size:18px;">This paragraph is styled with a specific font and size.</p>
    <a href="#" style="text-decoration:none; color:red;">A styled link</a>
    <div style="border:2px dashed blue; margin-top:20px;">
        <h2 style="margin:0; padding:5px;">A Styled Subsection</h2>
        <p style="padding:5px;">This paragraph is inside a styled div.</p>
    </div>
</body>
</html>

Explanation: In the above example, inline styles are used on headings, paragraphs, links, and a <div> element. Each style attribute directly modifies the appearance of that element, enabling quick visual adjustments without external CSS.

More Complex Example: Tables

Inline styles can also be applied to tables to control borders, spacing, and other visual aspects. Below is another code-box demonstration.

<h2 style="color:#333;">Data Table</h2>
<table border="1" style="border-collapse:collapse; width:50%;">
    <tr>
        <th style="background:#f0f0f0; padding:10px;">Item</th>
        <th style="background:#f0f0f0; padding:10px;">Quantity</th>
    </tr>
    <tr>
        <td style="text-align:center;">Books</td>
        <td style="text-align:center;">15</td>
    </tr>
    <tr>
        <td style="text-align:center;">Pens</td>
        <td style="text-align:center;">40</td>
    </tr>
</table>

Explanation: The style attributes on table, <th>, and <td> elements control layout, text alignment, and background colors. Inline styling can help you quickly prototype designs before moving to a separate CSS file.

Key Takeaways

  • Inline styles let you apply CSS properties directly within HTML elements.
  • Use inline styles for quick, small changes; prefer external CSS for maintainability.
  • Most presentation aspects, such as colors, fonts, and spacing, can be controlled with inline styles.
  • Inline styles override default styling and any external or internal CSS, giving you fine-grained control.
  • Keep your code clean and consider long-term maintenance when using inline styles.
Prev Next