CSS · Chapter 3 of 44
How to Add CSS
There are three ways to add CSS: inline (style attribute on an element), internal (a <style> block in the HTML head), and external (a separate .css file linked with <link>).
External stylesheets are the best practice, since they let you reuse styles across many pages and keep HTML clean.
Syntax
<link rel="stylesheet" href="styles.css">Inline CSS
Applied directly on one element using the style attribute. Useful for quick fixes but hard to maintain.
Internal and external CSS
Internal CSS lives in a <style> tag in <head>, affecting one page. External CSS is a linked .css file that can style an entire website.
Example 1 (html)
<link rel="stylesheet" href="styles.css">Output
Styles from styles.css apply to the pageThe <link> tag connects an external stylesheet to an HTML document.
Key points
- Inline CSS uses the style attribute.
- Internal CSS uses a <style> tag in <head>.
- External CSS uses a linked .css file.
- External CSS is best for maintainability and reuse.
💡 Note: Inline styles have the highest specificity and can be hard to override.