HTML allows you to style your web page content to make it visually appealing.
Styles define colors, fonts, spacing, and layout of elements. You can apply styles inline, internally, or externally using CSS.
What Are HTML Styles?
Styles control the visual presentation of HTML elements.
While HTML defines structure, styles define appearance.
<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>style→ Attribute to apply inline CSScolor→ Sets text colorfont-size→ Sets size of text
Types of Styling in HTML
a) Inline Styles
Applied directly to an element using the style attribute.
<h1 style="color: #29AB87; text-align: center;">Welcome!</h1>b) Internal Styles
Defined within <style> tags inside the <head> section.
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>This paragraph is styled using internal CSS.</p>
</body>
c) External Styles
Stored in a separate .css file and linked to HTML using <link> in <head>.
<head>
<link rel="stylesheet" href="styles.css">
</head>
styles.css:
body {
background-color: #f0f0f0;
}
h1 {
color: #29AB87;
}
Common Style Properties
| Property | Description | Example |
|---|---|---|
| color | Text color | color: blue; |
| background-color | Background color | background-color: yellow; |
| font-size | Text size | font-size: 18px; |
| font-family | Font style | font-family: Arial, sans-serif; |
| text-align | Text alignment | text-align: center; |
| margin | Space outside element | margin: 10px; |
| padding | Space inside element | padding: 5px; |
Example: Combining Styles
<p style="color: white; background-color: #29AB87; font-size: 18px; padding: 10px; text-align: center;">
Styled paragraph with multiple properties.
</p>This paragraph has text color, background color, font size, padding, and centered alignment.
Tips for Using Styles
Use CSS classes instead of repeating inline styles.
<p class="highlight">This is highlighted text.</p>Define classes in <style> or external CSS.
.highlight {
color: #29AB87;
font-weight: bold;
}
Avoid overusing inline styles for cleaner code and better maintainability.
Conclusion
HTML styles enhance the appearance and readability of your web page.
Learning to use inline, internal, and external styles effectively is essential for creating visually appealing and professional-looking websites.
