How to add CSS

External CSS

  • With external CSS, you’ll link your web pages to an external .css file, which can be created by any text editor in your device
  • This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, you can change your entire site at once.
Follow these steps to use external CSS:
  1. Create a new .css file with editor, and add the style rules.
  2. In the <head> section of your HTML sheet, add a reference to your external .css file right after <title> tag:

Syntax:

<link rel="stylesheet" type="text/css" href="style.css" />

Note: Don’t forget to change style.css with the name of your .css file.

For example:

.class {
property1 : value1;
property2 : value2;
property3 : value3;
}
#id {
property1 : value1;
property2 : value2;
property3 : value3;
}


Advantages of External CSS:
  • Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size.
  • You can use the same .css file for multiple pages.
Disadvantages of External CSS:
  • Your pages may not be rendered correctly until the external CSS is loaded.
  • Uploading or linking to multiple CSS files can increase your site’s download time.
    • Cristle Academy

    Compiler