CSS can be applied in three main ways, which are described below:
1.Inline CSS:
When you write styles directly inside the style tag and place it within the section of your HTML document, those styles apply to elements on that specific page only.
Example:
Inline CSS style
Output:
You will see a paragraph on the browser with the text inline CSS style displayed in red color and with a font size of 18px — that means:
Inline CSS style (in red and slightly larger text)
2.Internal CSS :
When you write your styling rules inside a tag then place them in the section of the HTML file. It lets you control the design of the whole page directly from the same file—no need for a separate CSS file. This method is helpful when you want to control the page design in one place for simplicity or small projects.
Example:
.highlight {
color: blue;
font-size: 20px;
}
Internal CSS style 1.
Internal CSS style 2
Output:
You will see two paragraphs on the browser, both showing the text —
Internal CSS style 1
Internal CSS style 2
The text is styled using a 20px font size and a blue color, making it look neat, clean, and easy to read.
3. External CSS:
When you write all the styles in a separate file that ends with a .css extension, such as style.css, then this file is linked to your HTML document, allowing you to manage the design independently from the content.
Once created, this file is linked to your HTML page using the tag, which should be placed inside the section.
This approach separates the style from the structure, keeping your HTML clean and making your website more organized, easier to manage, and faster to update.
Example:
index.html (HTML File)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="heading">Welcome to CSS Tutorial</h1>
<p class="paragraph">This is styled using external CSS.</p>
</body>
</html>
style.css (CSS File)
---------------------
/* style.css */
.heading {
color: blue;
font-size: 32px;
text-align: center;
}
.paragraph {
color: green;
font-size: 18px;
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
Note: External CSS is the best option when you're working on multiple pages and want a single place to manage all your styles.
Output:
In the browser, you will see a big heading —
Welcome to CSS Tutorial,
and just below it, a paragraph —
This is styled using external CSS.