The CSS is the styling language used to design and format HTML code, and it’s one of the most important languages you need to learn if you plan to continue in Front-End Development.
Also, in my opinion, even if your goal is to work in Back-End Development or become a Full Stack Developer, you still need to learn at least the basics of CSS, because you’ll definitely need it for small projects or when editing older code in a team project.
But pay attention: If this is your first time visiting CodeZelo, and you don’t have any background in web development, you should start with the HTML Course from Scratch to build a solid foundation before diving into CSS.
Now, let’s start with a simple definition of CSS, and then learn how to use it with HTML, and the different ways to link a CSS file to an HTML file.
What is CSS and Why Do We Use It?#
CSS stands for Cascading Style Sheets, which literally means “style sheets that cascade” or “layered style sheets.”
Simply put, it’s the language we use to style and format web pages written in HTML. While HTML defines the content (like headings, text, and images), CSS gives the page its visual design and structure — such as colors, font sizes, element positioning, and spacing.
You can think of it like this:
- HTML = the structure of the page
- CSS = the visual appearance and design
In simple terms: HTML alone only displays plain text, but when you add CSS, you can change colors, backgrounds, and make the page look professional.
Ways to Use and Link CSS in an HTML Page#
To use CSS for styling your HTML code, there are three main methods: Inline, Internal, and External. Each method has its own use cases, advantages, and disadvantages. Let’s go through them one by one.
1. Inline Style — Writing CSS Directly Inside the Tag (Not Recommended)#
This is the simplest way: you add CSS properties directly inside the style attribute of any HTML element.
It’s fine for quick experiments or temporary edits — but not suitable for real projects.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inline Example</title>
</head>
<body>
<h1>Method 1: Using style inside the tag</h1>
<p style="color: blue;">This paragraph is blue.</p>
</body>
</html>
Why is this method not recommended?
- If you have many elements that share the same style, you’ll have to repeat the code — which makes maintenance hard.
- If you want to change a color or font site-wide, you’d have to update every
styleattribute manually. - It makes your HTML messy and harder to read.
2. Internal CSS — Writing CSS Inside the Same HTML File (Within <style>)#
You can include your CSS rules inside a <style> tag within the <head> section.
It’s useful for single-page projects or quick prototypes.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Internal Example</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #2c3e50; }
p { color: blue; }
</style>
</head>
<body>
<h1>Method 2: Internal CSS</h1>
<p>This paragraph is styled from the <style> tag inside the head.</p>
</body>
</html>
Pros and Cons:
- Easier to organize styles for a single HTML page.
- But if you have multiple pages, you’ll have to repeat the same code — which isn’t practical.
3. External CSS — Linking a Separate CSS File (The Best Practice)#
This is the best and most professional method.
You write all your CSS rules in a separate file (for example, styles.css) and link it inside the <head> using the <link> tag.
This approach makes your project more organized, reusable, and faster (thanks to browser caching).
CSS file (styles.css):
/* styles.css */
body { font-family: Arial, sans-serif; }
h1 { color: #2c3e50; }
p { color: blue; }
Linking it in HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>External Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Method 3: External CSS</h1>
<p>This paragraph gets its color from an external CSS file.</p>
</body>
</html>
Why External CSS is the Best Choice:
- You can update the design for all pages from one place.
- Better performance since the file can be cached by browsers.
- Keeps your code clean, organized, and easy to maintain.
In short: Always use External CSS, even for small projects. Getting used to the right method early helps you write clean, scalable, and professional code — and that’s what separates a beginner from a real front-end developer. 🚀