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


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.


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.


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>


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.

Share this Page

Meet the Author