Styling can be added to HTML in 3 ways:
Inline
- using a style attribute in HTML elements
Internal
- using a <style> element in the HTML <head> section
External
- using one or more external CSS files
Inline Styling (Inline CSS)
<h1 style="color:blue;">This is a Blue Heading</h1> <p style="font-family:verdana;">This is verdana<p> <p style="font-family:courier;">This is courier.</p>

This is verdana

This is courier.

Internal Styling (Internal CSS)
<head>
<style>
body {background-color: lightgrey;} h1 {color: blue;} p {color: green;}
</style>
</head>
External Styling (External CSS)
Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the
<link>
instead of <style> <head>
<link
rel="stylesheet" type="text/css" href="mystyle.css"> </head> Note: this is located between the <head> and </head> tags.
! important
Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight.