<p>HOW TO STYLE HTML WITH EXTERNAL CSS</p>
<p>CSS(Cascading style sheets) is used to format the layout of a webpage. With CSS, you can control the color, font, and size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.</p>
<h3 id="heading-css-can-be-added-to-html-documents-in-3-ways">CSS can be added to HTML documents in 3 ways:</h3>
<ol>
<li>Inline- by using the </li></ol>

HOW TO STYLE HTML WITH EXTERNAL CSS

CSS(Cascading style sheets) is used to format the layout of a webpage. With CSS, you can control the color, font, and size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.

### CSS can be added to HTML documents in 3 ways:

1. Inline- by using the <style> attribute inside HTML elements.
2. Internal- by using a <style> element in the <head> section.
3. External- by using a <link> element to link to an external CSS file.

We'll be discussing the most common way to add CSS; the external CSS. 

## EXTERNAL CSS:
An external style sheet is a separate CSS file that can be accessed by creating a link within the head section of the webpage. The external style sheet is generally used when you want to make changes on multiple pages. Multiple webpages can use the same link to access the style sheet. With external style sheet, you can change the look of the entire website by changing just one file!
Each HTML page must include a reference to the external sheet file inside the <link> element, inside the head section.

```<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="mystyle.css>
    </head>
    <body>
      <h1> This is a heading</h1>
      <p> This is a paragraph</p>
    </body>
  </html>
``` 

Example;

An external style sheet can be written in any text editor, and must be saved with a ".css" extension.
The external .css file should not contain any HTML tags. 

Here is how the "my style.css" file looks:
```body  {
    background-color:  lightblue;
}

h1  {
    color: navy;
    margin-left: 20px
}

Note;: Do not add a space between the property value and the unit:
Incorrect (space): margin-left: 20px
Correct (nospace): margin-left: 20px;

``` 

External style sheets have the following advantages over internal and inline styles:

1. One change to the style sheet will change all linked pages
2. You can create classes of styles that can then be used on many different HTML elements
3. Consistent look and feel across multiple web pages
4. Improved load times because the css file is downloaded once and applied to each relevant page as needed

Thank You.


Jewel90's blog

Jewel90's blog

How To Style Html With External Css

CSS can be added to HTML documents in 3 ways: