🎨 HTML Styles: Make Your Web Pages Pop!
Welcome to GoNimbus – your ultimate guide to mastering web development.
In this chapter, you’ll learn how to style HTML elements using the style attribute. Styling allows you to transform plain HTML into visually appealing, interactive web content.
✅ What is the style Attribute?
The style attribute lets you apply inline CSS (Cascading Style Sheets) directly to HTML elements. This means you can control things like:
- Background colors
- Text colors
- Fonts
- Sizes
- Alignment
- Margins and padding
- Borders and more!
🔧 Syntax:
<tagname style="property: value;">
- property: A CSS property (e.g.,
color,font-size,text-align) - value: The value assigned to that property (e.g.,
blue,20px,center)
🎨 Styling Text and Backgrounds
🟦 Background Color
Use the background-color property to set the background color of an element.
Example:
<body style="background-color: #f0f8ff;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Multiple Styled Elements:
<h1 style="background-color: lightblue;">Heading</h1>
<p style="background-color: lightcoral;">This is a paragraph.</p>
🌈 Text Color
Control the color of your text using the color property.
<h1 style="color: darkblue;">This is a blue heading</h1>
<p style="color: crimson;">This is a red paragraph.</p>
🅰️ Fonts and Typography
🔠 Font Family
Use the font-family property to apply a specific font:
<h1 style="font-family: Arial, sans-serif;">Modern Heading</h1>
<p style="font-family: 'Courier New', monospace;">Code-like paragraph</p>
💡 Pro Tip: Always provide a fallback font to ensure consistent display across devices.
🔡 Font Size
Use font-size to control the size of the text:
<h1 style="font-size: 300%;">Huge Heading</h1>
<p style="font-size: 150%;">Larger paragraph</p>
🧭 Text Alignment
Align your text using text-align:
<h1 style="text-align: center;">Centered Title</h1>
<p style="text-align: right;">Right-aligned paragraph</p>
✨ Bonus Styling Examples
🔲 Borders
<p style="border: 2px solid black;">Paragraph with border</p>
⏹️ Padding and Margin
<p style="padding: 20px; margin: 30px;">Spaced paragraph</p>
🎯 Combine Multiple Styles
<h2 style="color: white; background-color: teal; font-size: 200%; padding: 10px; text-align: center;">
Stylish Heading
</h2>
📝 Summary – Style Like a Pro
Here’s what you’ve learned on this GoNimbus HTML Styles page:
✅ Use the style attribute to apply inline CSS
🎨 background-color: Sets background color
🖍️ color: Changes text color
🔤 font-family: Defines font style
🔠 font-size: Sets text size
📐 text-align: Aligns text
📦 Bonus: border, padding, margin for layout styling