HTML CSS — Adding Styles to Webpages
Learn all three ways to add CSS to HTML — inline, internal, and external CSS — plus CSS syntax, element/class/ID selectors, and the CSS priority cascade rule.
In This Lesson
- What is CSS?
- 3 Ways to Add CSS
- 1. Inline CSS
- 2. Internal CSS
- 3. External CSS
- CSS Syntax
- CSS Selectors
- CSS Priority
- Comparison Table
- Try It Yourself
What is CSS?
CSS stands for Cascading Style Sheets. It is used to control the appearance and layout of HTML elements — colors, fonts, spacing, size, positioning, and much more.
Without CSS, every webpage would look the same: plain black text on a white background. CSS is what makes the web beautiful and responsive.
HTML vs CSS: HTML defines the structure (what content is there). CSS defines the presentation (how it looks). They work together — HTML is the skeleton, CSS is the skin and clothes.
3 Ways to Add CSS to HTML
There are exactly three methods to apply CSS to an HTML document — each suited for different situations:
1. Inline CSS
Inline CSS — style="" attribute
Inline CSS is written directly inside an HTML element's opening tag using the style attribute. Multiple CSS properties are separated by semicolons.
<!DOCTYPE html> <html lang="en"> <body> <!-- CSS is written inside the style attribute --> <h1 style="color: blue; font-size: 40px;"> Hello World </h1> <p style="color: red; font-family: Arial;"> This is a red paragraph. </p> </body> </html>
Hello World
This is a red paragraph.
2. Internal CSS
Internal CSS — <style> in <head>
Internal CSS is written inside a <style> tag placed in the <head> section of your HTML document. It applies to the entire current page — you write rules once and they apply to all matching elements on that page.
<!DOCTYPE html> <html lang="en"> <head> <title>Internal CSS</title> <!-- CSS written inside <style> in <head> --> <style> h1 { color: blue; text-align: center; } p { color: green; font-size: 18px; } </style> </head> <body> <h1>Welcome to TipsInLearning</h1> <p>This paragraph is styled by internal CSS.</p> </body> </html>
Welcome to TipsInLearning
This paragraph is styled by internal CSS.
3. External CSS — Best Practice
External CSS — Separate style.css file
External CSS is written in a completely separate file with a .css extension. It is linked to your HTML page using the <link> tag in the <head>. This is the professional standard for all real websites.
External CSS requires two steps — create the CSS file and link it to HTML:
/* style.css — Your external stylesheet */ body { background-color: #f8fafc; font-family: Arial, sans-serif; } h1 { color: #7c3aed; text-align: center; } p { color: #475569; font-size: 18px; line-height: 1.8; }
<!DOCTYPE html> <html lang="en"> <head> <title>External CSS Example</title> <!-- Link the external CSS file --> <link rel="stylesheet" href="style.css"> </head> <body> <h1>TipsInLearning</h1> <p>Styled by an external CSS file!</p> </body> </html>
The <link> tag explained: rel="stylesheet" tells the browser this linked file is a CSS stylesheet. href="style.css" is the file path to your CSS file. The <link> tag always goes inside <head>.
CSS Syntax
Every CSS rule follows the same structure — a selector targeting an element, followed by curly braces containing property: value pairs:
/* Basic syntax */ selector { property: value; } /* Real example */ h1 { color: red; font-size: 30px; text-align: center; }
CSS Selectors
CSS selectors define which HTML elements a CSS rule applies to. There are three main types used by beginners:
/* 1. Element selector — targets ALL p tags */ p { color: blue; } /* 2. Class selector — targets elements with class="highlight" */ .highlight { background-color: yellow; font-weight: bold; } /* 3. ID selector — targets the ONE element with id="title" */ #title { color: green; font-size: 32px; }
<!-- Element selector targets this --> <p>This paragraph is blue.</p> <!-- Class selector targets this --> <p class="highlight">This is highlighted.</p> <!-- ID selector targets this --> <h1 id="title">This is the big green title.</h1>
CSS Priority — The Cascade
When multiple CSS rules apply to the same element, CSS uses a priority order (called the cascade) to decide which one wins. Inline CSS always has the highest priority:
<style> p { color: blue; } /* internal CSS says blue */ </style> <!-- Inline CSS overrides — this text will be RED, not blue --> <p style="color: red;"> This is red (inline wins over internal CSS) </p> <!-- No inline style — uses internal CSS --> <p>This is blue (internal CSS applies)</p>
Comparison Table
Best Practice Summary: Use External CSS for all real projects — it keeps HTML clean, CSS reusable across pages, and files load faster because the browser caches the stylesheet. Only use inline CSS for quick testing or HTML emails.