Inline, internal and external styles.
✍️ 3 exercises + code challenge in this lessonCSS (Cascading Style Sheets) controls how HTML looks. There are three ways to add it:
style attribute on one element.<style> element in the <head>.<link rel="stylesheet" href="styles.css">.External stylesheets are the best choice for real projects: one file can style every page of your site.
Mastering HTML CSS helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; background: #F8FAFC; }
h1 { color: #071A2F; }
p { color: #475569; border-left: 4px solid #14B8A6; padding-left: 10px; }
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>Styled by the style element in the head.</p>
<p style="color: #E34F26;">This one also has an inline style.</p>
</body>
</html>Check what you learned in “HTML CSS”.
Link an external stylesheet.
<link ="stylesheet" href="styles.css">
Where should an internal <style> element be placed?
Add a <style> element that makes every paragraph green.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services