How to add CSS
You are Here:
Adding CSS to Your Web Page
There are three ways of adding css to your web page. They are
- External CSS
- Internal CSS
- Inline CSS
External CSS
The HTML link tag is used to link stylesheets to a webpage.
Note: The external css file used in this example is green.css
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="green.css">
</head>
<body>
<h1>Using External CSS</h1>
<p>All is green.</p>
</body>
</html>
Internal CSS
The HTML style tag is used to add internal CSS to a web page.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
/* This is internal css*/
p{
color: red;
}
</style>
</head>
<body>
<h1>Using Internal CSS</h1>
<p>This paragraph is red.</p>
</body>
</html>
Inline CSS
Use HTML style attribute to add inline CSS for a single element.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Using Inline CSS</h1>
<p style="color:blue;">This paragraph is blue.</p>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
