How to Include CSS files in webpages

How to Include CSS files in webpages:

How to Include CSS files in webpages: Well, the basics of web development require us to know the way to add Cascading Style Sheets to our webpages. We can add not only a single CSS file to our webpages rather we can add more than a single file. The limit is never there; however, we must be reasonable while including CSS files and adding them to our web site. Let us begin by inserting the first line of code to our web document called index.html henceforth.

<link rel=”stylesheettype=”text/csshref=”style.css” />

In above line, we are including a CSS file named “style.css”.  The mandatory portions as well as non-mandatory portions are marked below:

<link rel=”stylesheettype=”text/css

The above part remains mandatory, it is to be placed as it is every time we refer a CSS file for inclusion into our web documents.

href=”style.css” />

The above inside the quotes portion is subject to change i.e. “style.css” is the file name. If we wish to include a file named “main.css” we may refer it as:

href=”main.css” />

Keep the simple fact in your mind that “href” is to locate the actual path of the CSS file we refer to. The “style.css” and “main.css” files are placed on the root of our web server; therefore, we are simply writing its name. The same files could be inside a some folder or even inside of another folder. In such case, we would need to give complete path to it. Let us assume that our “style.css” is inside a folder called “styles”. In this scenario, we would give the path to our CSS file as:

<link rel=”stylesheettype=”text/csshref=”styles/style.css” />

You can see that we have amended the file path by inserting the directory name “styles” in which the file “style.css” resides.

href=”styles/style.css” />

The trailing slash i.e. “/” means go inside of the web directory or folder. If our file were inside another folder named “primary” we could amend the code as follows:

href=”styles/primary/style.css” />

In abo we example, we are directing the webserver to look for:

  1. Styles folder
  2. Inside the Styles look for the folder “primary”
  3. Inside the folder “primary”, find the file named “style.css”. 


Leave a Reply