How to Add External CSS in HTML?
FREE
In web development CSS ( cascading style sheet ) is used to define the look of the website. In simple terms, we can say that HTML is used to define the structure of a website, and CSS is used to define the style of the website, i.e how the website will look.
There are three ways to add a style sheet(CSS) in HTML:
- External CSS
- Internal CSS
- Inline CSS
In this article, we will learn about External CSS in HTML.
Example
The external CSS is mostly used to change the styles and looks of multiple web pages by changing just one CSS file. This makes our tasks easier as we have to change only one file.
To add an external style sheet to a web page we use a <link> tag. This <link> tag should be added on those pages where we want to add CSS and this <link> tag is written inside <head> tag.
There are several uses of the <link> tag and it is very important to define the correct attribute so that we can import the external style sheet in HTML.
Several attributes of <link> tag are rel, src, etc.
The external style sheet is saved with the .css extension and the file should not have any HTML elements.
Example
css
Here in this example, the rel attribute of the link tag is used to specify the relationship between the current file and the linked file, here in this case it is a stylesheet, i.e style.css file is a style sheet for the current HTML document.
The src attribute is used to define the location(URL) of the file which we want to link.
There are four attributes of the <link> tag out of which the rel attribute and the src attribute are mandatory to use with the <link> tag and the other two attributes are optional to add.
The rel Attribute
The rel attribute is compulsory, we cannot ignore it while using the <link> tag. The rel attribute is used to tell the browser the relationship with the imported file.
We write rel="stylesheet" which tells the browser that we are importing a stylesheet.
Example
The src Attribute
The src attribute is the other compulsory attribute that has to be used with the <link> tag.
There are two cases for this:
-
The first case is when the CSS file and HTML file are in the same folder, in this situation we will write src="style.css", which means that we have a CSS file named style.css in the same folder where HTML file is saved.
Example
-
The second case is when the CSS file and HTML file are in a different folder, in this situation we need to write the full URL that goes from the HTML file to the CSS file.
Example
Here it means that the CSS file (style.css) is in the CSS folder.
The Type Attribute
The type attribute of the <link> tag is optional, it is used to define the type of content that we are linking. For a stylesheet we will write text/CSS, the point to note here is that the type attribute is optional and as CSS is the only language for stylesheets it is a good practice to not include it.
We write like this,
Example
The Media Attribute
The media attribute of the link tag is optional. This attribute is used to define separate styles for different devices and different screen sizes. The attribute output is not visible. We need to import different CSS styles with their link element. The value must be a media query.
We write like this,
Example
Click on Learn more to learn more about how to Add CSS to HTML
Conclusion
- CSS (style sheet) is added to HTML documents to beautify and improve the looks of the web page.
- There are three ways to include CSS in HTML, External CSS, Internal CSS and Inline CSS.
- To add external CSS in HTML we use the <link> tag.
- We use the rel attribute to specify the relationship between the linked document and the HTML file.
- We use the src attribute to write the location(URL) of the CSS file.
- The type attribute is optional and is used to specify the type of the linked file.
- The media attribute is optional and is used to specify a different style for different devices and different screen sizes.