Styles in HTML
? Styles in HTML
Styles in HTML control the appearance and layout of your webpage. This is mainly done using CSS (Cascading Style Sheets), which can be added to HTML in several ways.
Ways to Add Styles in HTML
1. Inline Styles
Directly inside an HTML tag using the style attribute.
<p style="color: blue; font-size: 16px;">This is blue text.</p>2. Internal CSS
Inside a <style> tag within the <head> section of your HTML document.
<head> <style> p { color: green; font-size: 18px; } </style></head>3. External CSS
Linking to an external .css file using <link> in the <head>.
<head> <link rel="stylesheet" href="styles.css" /></head>Example of External CSS (styles.css)
body { background-color: #f4f4f4; font-family: Arial, sans-serif;}h1 { color: #333;}p { color: #666; font-size: 16px;}Summary
| Method | Where Used | Pros | Cons |
|---|---|---|---|
| Inline Styles | Inside HTML tag | Quick for small changes | Not reusable, clutters HTML |
| Internal CSS | Inside <style> | Good for page-specific CSS | Larger sites get messy |
| External CSS | Separate file | Reusable & clean | Requires extra HTTP request |
Want help with advanced CSS styling or responsive styles?
