HTML Styles
Adding visual styling to HTML elements
🎨 What are HTML Styles?
HTML styles are used to change the appearance of elements. You can add colors, fonts, sizes, and layouts using the style attribute or CSS.
<h1 style="color: blue;">Blue Heading</h1>
<p style="color: red; font-size: 20px;">Red large text</p>
<div style="background-color: yellow; padding: 10px;">Yellow box</div>
Output:
Blue Heading
Red large text
Common Style Properties
Colors
Text and background colors
<p style="color: red;">Red text</p>Fonts
Font family, size, and weight
<p style="font-size: 18px;">Large text</p>Alignment
Text alignment options
<p style="text-align: center;">Centered</p>Spacing
Margins and padding
<div style="padding: 20px;">Spaced</div>🔹 Text Colors
Change text colors using color names or hex codes:
<!-- Using color names -->
<p style="color: red;">Red text</p>
<p style="color: blue;">Blue text</p>
<p style="color: green;">Green text</p>
<!-- Using hex codes -->
<p style="color: #ff0000;">Red using hex</p>
<p style="color: #0066cc;">Blue using hex</p>Output:
Red text
Blue text
Green text
Red using hex
Blue using hex
🔹 Background Colors
Add background colors to elements:
<p style="background-color: yellow; color: black;">Yellow background</p>
<p style="background-color: lightblue; padding: 10px; color: black;">Light blue with padding</p>
<div style="background-color: #ffcccc; padding: 15px; color: black;">Pink background box</div>Output:
Yellow background
Light blue with padding
🔹 Font Styling
Control font appearance:
<p style="font-size: 24px;">Large text (24px)</p>
<p style="font-family: Arial;">Arial font family</p>
<p style="font-weight: bold;">Bold text</p>
<p style="font-style: italic;">Italic text</p>
<p style="font-size: 16px; font-family: Georgia; color: navy;">Combined styles</p>Output:
Large text (24px)
Arial font family
Bold text
Italic text
Combined styles
🔹 Text Alignment
Align text in different ways:
<p style="text-align: left;">Left aligned text (default)</p>
<p style="text-align: center;">Center aligned text</p>
<p style="text-align: right;">Right aligned text</p>
<p style="text-align: justify;">Justified text spreads across the full width of the container, creating even margins on both sides.</p>Output:
Left aligned text (default)
Center aligned text
Right aligned text
Justified text spreads across the full width of the container, creating even margins on both sides.