Yogesh Chauhan's Blog

How to link/add CSS file to HTML Document?

in CSS & HTML on March 31, 2020

External CSS

When we use a separate file for page style (CSS) and add it to our HTML, it's called styling with an external CSS.

To use an external style sheet, add a link to it in the <head> section of the HTML page.

For example,


<head>
  <link rel="stylesheet" href="styles.css">
</head>

An external style sheet must not contain any HTML code, and must be saved with a .css extension.

For example:


body {
  background-color: green;
}

p {
  color: black;
}

Advantages

1. It helps you keep your website design and content separate.

2. An external style sheet is used to define the style for many HTML pages. 

3. It's really easy to reuse your CSS code if we have it in a separate file. Typing the same CSS style code in all pages you have is time consuming. Also, just imagine if you want to make a small color change? If you have 10 pages then you need to change the CSS code in 10 pages and if you have 100 pages then?!! So, try to link many pages to a single CSS file with the "link" tag.

4. With an external style sheet, you can change the look of an entire web site, by changing one file!


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Higher Order Functions in JavaScript with ExamplesJavaScriptLearn how to add Scroll Indicator using CSS and JavaScript?CSSCasting in PostgreSQLPostgresWhat is React? Learn the basicsReactHow to remove border from :visited image, link or button?CSSAt-rules: @error and @warn in SCSSSCSS