Jewel Jeff-Onyegbule's blog

How to style HTML with external CSS.

Photo by Maik Jonietz on Unsplash

How to style HTML with external CSS.

Jewel Jeff-Onyegbule's photo
Jewel Jeff-Onyegbule
·

2 min read

How to style HTML with external CSS.

CSS 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 and time.

CSS can be added to HTML documents in 3 ways

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

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 element, inside the head section.

   <head>
     <link rel="stylesheet" href="mystyle.css>
   </head>
   <body>
     <h1 class=“h1”>This is a heading </h1>
     <p id=“p1”>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 [mystyle.css] file looks:

``` .h1 { background-color: lightblue; }

#p1{ 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.