HTMLIntermediate
How to include CSS in HTML? What is the priority order?
Three Ways to Include CSS in HTML
1. External Stylesheet
<head>
<link rel="stylesheet" href="style.css">
</head>
- The most recommended approach
- CSS is separated from HTML, making it easy to maintain and cache
- Multiple pages can share the same CSS file
2. Internal (Embedded) Style
<head>
<style>
p { color: red; }
</style>
</head>
- Suitable for single-page or page-specific styles
- Cannot be shared across pages; not cache-friendly
3. Inline Style
<p style="color: red; font-size: 16px;">Text</p>
- Written directly in the element's
styleattribute - Has the highest priority, but is hard to maintain — generally avoid overusing it
CSS Priority (Specificity)
When multiple rules apply to the same element, priority from highest to lowest:
!important(highest priority — use with caution)- Inline styles
- ID selectors (
#id) - Class / attribute / pseudo-class selectors (
.class,[attr],:hover) - Element / pseudo-element selectors (
p,::before) - Inherited / browser default styles (lowest)
When specificity is equal, the later-defined rule wins (last-write wins).
✦ AI Mock Interview
Type your answer and get instant AI feedback
Sign in to use AI scoring