HTML Basics
HTML Styles
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.
HTML Style Example
html
<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.
Inline Style Example
html
<h1 style="color: #29AB87; text-align: center;">Welcome!</h1>b) Internal Styles
Defined within <style> tags inside the <head> section.
Internal Style Example
html
<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>.
External Style Example
html
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css:
Style Example
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
Combined Style Example
html
<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.
Example HTML
html
<p class="highlight">This is highlighted text.</p>Define classes in <style> or external CSS.
Example CSS
css
.highlight {
color: #29AB87;
font-weight: bold;
}Avoid overusing inline styles for cleaner code and better maintainability.
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
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.