HTML CSS

Last Updated:

Styling HTML with CSS

There are three ways of adding css to your HTML. They are

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

Use <link> tag to link stylesheets to an HTML document.

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

Use <style> tag to add internal CSS to an HTML document.

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 style global 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>

Share this Page

Meet the Author