HTML Styling using CSS

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>

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

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.

Meet the Author