HTML Styles – A Complete Guide
What is HTML Styling?
HTML styles allow developers to enhance the appearance of web pages using CSS (Cascading Style Sheets). Styling can be applied using:
- Inline CSS – Directly in an element.
- Internal CSS – Inside the
<style>tag within the<head>. - External CSS – In a separate CSS file.
Example (Without Styling)
<p>This is a simple paragraph.</p>
Types of CSS Styling in HTML
1. Inline CSS (Applied Inside an Element)
Inline styles are added directly using the style attribute inside an HTML tag.
Example:
<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>
2. Internal CSS (Inside the <head> Section)
Internal CSS is defined inside the <style> tag within the <head> of the document.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
✅ Best Practice: Use internal CSS only for small projects or when you don’t need to reuse styles across multiple pages.
3. External CSS (Linked from an External File)
External CSS is stored in a separate .css file and linked using the <link> tag.
Example (HTML File):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This paragraph is styled using an external CSS file.</p>
</body>
</html>
Example (styles.css File):
p {
color: red;
font-size: 16px;
}
Common CSS Properties Used in HTML Styling
| Property | Description | Example |
|---|---|---|
color | Changes text color | color: blue; |
background-color | Sets background color | background-color: yellow; |
font-size | Adjusts text size | font-size: 20px; |
font-family | Sets font type | font-family: Arial, sans-serif; |
text-align | Aligns text (left, center, right) | text-align: center; |
border | Adds a border | border: 1px solid black; |
margin | Sets space outside an element | margin: 10px; |
padding | Sets space inside an element | padding: 10px; |
Styling Text in HTML
<p style="color: purple; font-size: 24px; font-weight: bold;">Styled Text Example</p>
Explanation:
color: purple;→ Sets text color.font-size: 24px;→ Increases text size.font-weight: bold;→ Makes text bold.
Styling Backgrounds
Change background colors or add images.
Example (Background Color):
<body style="background-color: lightgray;">
Example (Background Image):
body {
background-image: url('background.jpg');
background-size: cover;
}
CSS Selectors in HTML Styling
| Selector | Description | Example |
|---|---|---|
* | Selects all elements | * { margin: 0; padding: 0; } |
p | Selects all <p> elements | p { color: red; } |
.classname | Selects elements with a class | .highlight { color: blue; } |
#idname | Selects an element with a specific ID | #header { text-align: center; } |
element, element | Selects multiple elements | h1, h2 { font-size: 20px; } |
Best Practices for HTML Styling
✔️ Use external CSS for better organization.
✔️ Avoid inline styles unless necessary.
✔️ Use classes and IDs instead of styling individual elements.
✔️ Optimize styles for mobile responsiveness.