External CSS: write styles in a .css file and link it in the head with <link rel="stylesheet" href="style.css">. Best for real websites.
Internal CSS: place rules in a <style> element inside the head. Good for single pages.
Inline CSS: use the style attribute on one element. Use sparingly.
Cascading order
If the same property is set in several places, inline styles win over internal and external styles, and later rules win over earlier rules with the same specificity.
💡 Key Takeaways: CSS How To Add
Mastering CSS How To Add helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
CSS How To Add Code Example
CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: #2563EB; }
</style>
</head>
<body>
<h1>Blue from the internal stylesheet</h1>
<h1 style="color: #E34F26;">Orange from an inline style (it wins)</h1>
</body>
</html>
Free sign-in required · Google login available
CSS How To Add Practice Exercises
Check what you learned in “CSS How To Add”.
/ 3 solved
Fill in the blank
Link an external CSS file.
<link rel="" href="mystyle.css">
✓ Correct!Not quite. Try again.
Multiple choice
Which styles have the highest priority?
✓ Correct!Not quite. Try again.
Code challenge
Make the heading green using an inline style.
Write the code in the live editor. Your answer is checked automatically.