Ways Of Adding Styles To HTML Page

HTML (Hyper Text Mark-up Language)

HTML Document have Head, Body and Footer Sections which contains related content in the document,
Head Section contain Introductory and information about content of the page,
Body section contain content user need to display,
Footer section contains Social Media links and contact information about owner of the page,
HTML is a static document rendered by browser, In other words HTML Elements is like skeleton to the page,
By adding styles we can add look and feel to the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="stylesheet" href="style.css" />
  </head>
<body>
<h1>Body Content</h1>
</body>
<footer>
<a href='some link'>Social Media link</a>
</footer>

Adding Styles to HTML Page

Generally we add styles in Head section of the page, Since rendering happen in top-down approach in browser
We can add styles by 3 ways
- In-Line
- Internal
- External
In-Line Style, We write CSS style in the element itself by using style property of element

<body>
<h1 style="color:blue;">Hello</h1>
</body>

//displays h1 text  in blue color

Internal Style , We write styles of the page in style tag in head section of the page

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <style>
      h1{
           color:blue;
          }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>

External Style Sheet, We write separate styles in a file with extension .css will added to HTML page using link tag in head section of the page

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Title</title>
<link rel="stylesheet" href="style.css" />
//External style sheet
</head>