External CSS

External CSS

Internal CSS is a good way to for styling webpages but when you have a lot of content on your webpage and when you need to style a lot of different elements then it could get messy and you will have to up and down again and again to edit the CSS.

Internal CSS actually slows down your website as takes some time to load the styling first and then the main content of the website. Remember not every user has a good internet connection or good device to surf.

Now, to add External CSS create a new file in the same directory (or folder) and name it “style.css”
You can name it whatever you want but the extension must be “.css”. Paste all the styling in this file in the same way as internal CSS.

p {
 color:red;
 font-size:200%;
}
h1 {
 font-size:500%;
 color:blue;
}

Save this file and now we have to link this stylesheet with our HTML document. Do this:

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

External CSS Code

External CSS Result

rel is short for relation and in this case the relation is a stylesheet. Now save this file and reload the webpage. You can see that the styling is there.

I would recommend always using external CSS. This way everything is easy and neat. We are going to use external CSS for the rest of the section.

To comment out some CSS use:

/*color: blue;*/

Instructor TARUN KUMAR

LAZY SYNTAX