Welcome to this article, here we will discuss what is external CSS and how to use external CSS within our CSS style sheet.
So please read the full post here we provide a detailed guide with examples.
We know that there are three main ways through which we can use CSS inside the Html document, the three types of CSS are-
- Inline styles
- Embedded style or inline style
- External style
Here we will discuss about the external style.
Table of Contents
What is external CSS :
External style sheets are basically a .css file containing the list of declaration blocks.
This css file is linked to various web pages to apply similar styles.
And to link the html and css file with one another we use the link tag.
Inside our link tag, we include the href attribute which usually means hyperlink to another document.
And inside our hyperlink we give the filename with extension.
We also use the type attribute inside our external CSS document and this type has also included two values type / CSS which generally indicating that whatever the content we have within the file and is going to be a plain text or CSS code.
The next attribute is the relation, or it is also called the relationship attribute.
And within the relationship attribute, we give the stylesheet value.
And one more thing we have to remember that the link tag should be placed within the head tag.
The advantage of using this tag is we can implement consistency throughout the website.
How do I use external CSS? :
Now here I mention the tips about how to use the external CSS file with an example, so let us check these examples carefully.
1.
First of all, create two files inside your code editor, and you can give any name to those editors but you should remember one thing that, one is an external stylesheet that has the extension of .html and another is the file with .css extension.
Here I provide an image and there I create two files one is the name with main.css and another is the name with externalcss.html.
2.
Now in the next step create some styles in the main.css file .
here i apply the heading styles and the paragraph styles
3.
In the third step now create the text in the externalcss.html file in which you want to apply the styles and link that file with the main.css file.
Here I write the text in which we want to apply the CSS styles and, link this file with the main.css file.
And one thing we have to remember that we have to link the documents within the head section.
4.
Now observe the output
This is the correct output, that appears in front of us.
Limitations of external style sheet :
Although the external style sheet is very helpful for us we have to remember one crucial thing if we make any changes in the CSS file then every other link Html page will get affected.
So we should be very careful before we make modifications to the CSS file because any page which is linked will be affected by that modification.
But one of the most important advantages of using the external CSS is that we can create design-centric code and consistency becomes mentioned throughout the web pages, we can use so much redundancy of code by using the external style sheet.
External style sheet extension :
We have to notice the external style sheet extension very carefully because we have to create two files whenever we work on an external style sheet.
One file is for applying the styles and another file is where we want to apply styles.
We can save that document in which we want to apply styles by the .html extension.
But which file is used to apply styles that file always has the .css extension.
In the upper example, we have created two files one is a .html extension and another is a .css extension.
Conclusion:
This article is all about what is external CSS and how to use external CSS. I hope you like and understand the article.
If you have any queries about computer programming then you can ask me in the comment box.
And please follow our website for this kind of informational article.
