HTML Styles
HTML handles the structure of a web page, while CSS (Cascading Style Sheets) handles its appearance. You can write styles in HTML in three ways: inline styles, internal style sheets, and external style sheets.
Inline Styles
Write CSS directly in an element's style attribute — it only affects that specific element:
Example
HTML
<p style="color: blue; font-size: 18px;">
This is a paragraph with large blue text.
</p>
<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
This is a gray card with rounded corners.
</div>
💡 When to Use: Inline styles have the highest priority and are great for quick testing or scenarios where JavaScript dynamically modifies styles. However, avoid them in production because they're hard to maintain.
Internal Style Sheet
Define styles inside the <head> using the <style> tag — all elements on the page can reference them:
Example
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; text-align: center; }
.card {
background: #fff;
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>My Page</h1>
<div class="card">This is a card</div>
</body>
</html>
External Style Sheet
Write CSS in a separate .css file and include it with <link>. This is the most recommended approach — a single CSS file can control the style of an entire website:
Example
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- Contents of style.css: -->
<!-- h1 { color: navy; } -->
<!-- .highlight { background: yellow; } -->
📌 Priority of the Three Methods: Inline styles > Internal style sheet > External style sheet > Browser default styles. When the same element is styled by multiple methods, the one with higher priority takes effect.
Common CSS Properties at a Glance
Here are some of the most commonly-used CSS properties in HTML — master these and you can create decent-looking pages:
color— Text colorbackground-color— Background colorfont-size— Font sizefont-weight— Font weight (bold = thick)text-align— Text alignment (left/center/right)padding— Inner spacing (space between content and border)margin— Outer spacing (space between elements)border— Borderwidth / height— Width and heightdisplay— Display mode (block/inline/flex/none)
❓ FAQ
Q What's the difference between inline, internal, and external styles?
A Three approaches: 1) Inline styles (
style attribute) only affect the current element, written inside HTML tags; 2) Internal styles (<style> tag) affect the current page, written in <head>; 3) External styles (.css file via <link>) affect all pages that reference it. Priority: inline > internal > external. In practice, use external stylesheets 95% of the time.Q Why are external stylesheets recommended?
A External stylesheets have four core advantages: 1) Reuse — multiple pages share one CSS file, change once, update everywhere; 2) Caching — browsers cache CSS files, making subsequent page loads faster; 3) Separation — HTML handles structure, CSS handles styling, clear responsibilities, easier maintenance; 4) Collaboration — front-end developers can work in parallel without conflicts. Inline styles are only for debugging and edge cases.
Q How is style priority calculated?
A Priority from highest to lowest: 1)
!important (use sparingly — disrupts priority); 2) Inline styles (style attribute); 3) ID selectors (#id); 4) Class selectors (.class), attribute selectors, pseudo-classes; 5) Element selectors (p, div), pseudo-elements; 6) Universal selector (*), inherited styles. Same priority: later rules override earlier ones. Don't abuse !important; use selector specificity to control priority.Q When should I use inline styles?
A Inline styles have very limited use cases: 1) JavaScript dynamically modifying styles (
element.style.color = 'red'); 2) Quick debugging (temporary preview); 3) Email templates (email clients poorly support <style>). For everything else, use internal or external stylesheets. Inline style drawbacks: hard to maintain, can't reuse, too-high priority makes overriding difficult.📖 Summary
- Three ways to write styles: inline (style attribute), internal (
<style>tag), external (<link>to .css file) - External style sheets are the best practice — reusable, cacheable, and separate structure from presentation
- Style priority: Inline > Internal > External > Browser default
- CSS properties consist of "property-name: value" pairs, separated by semicolons
📝 Exercises
- Style practice: Create an HTML page and use all three styling methods on different elements. Observe the priority effect.
- Card design: Use inline styles to create a card component with a title, image description, and button.
- External styles: Create a
style.cssfile, include it with<link>, and apply styles to multiple elements on the page.