Home > Article > Web Front-end > What is an external style sheet in css?
What is an external style sheet in css?
- 青灯夜游Original
- 2020-11-13 16:37:286827browse
In CSS, if the CSS style is placed in a file outside the web page document, it is called an external style sheet. A CSS style sheet document represents an external style sheet; css external style sheet files use ". CSS" extension, and a link to the location of this file is included in the HTML document so that web browsers know where to find the style.
[Recommended tutorial: CSS video tutorial]
When a web browser loads a web page, how it is displayed Depending on the information from cascading style sheets, HTML files have three ways to use style sheets: external, internal, and inline.
Internal and embedded style sheets are stored in the HTML file itself. They're easy to work with in the moment, but since they're not stored in a central location, it's not possible to easily change styles across the entire site simultaneously; you have to go back to each entry and change it manually.
If the CSS style is placed in a file outside the web page document, it is called an external style sheet. A CSS style sheet document represents an external style sheet.
In fact, the external style sheet is a text file with the extension .css. When you copy the CSS style code into a text file and save it as a .css file, it is an external style sheet.
As shown below is the online external style sheet (http://c.biancheng.net/templets/new/style/common.css):
css External style sheet files use the .CSS file extension, and a link to the location of the file is included in the HTML document so that web browsers know where to find the style instructions.
One or more documents can be linked to the same CSS file, and a website may have many unique CSS files used to style different pages, tables, images, etc.
How to link to a CSS external style sheet?
Every web page that wants to use a specific external style sheet needs to link to the CSS file in the
section, like this:<head> <link rel =“stylesheet”type =“text / css”href =“styles.css”> </head>
In this example, The only thing that needs to be changed to make it work for your own document is the styles.css text, which is the location of the CSS file.
If the file is actually called styles.css and is in the exact same folder as the document linked to it, then it can remain exactly as it reads above. However, your CSS file might be titled something else, in which case you can simply change the name from "styles" to your name.
If the CSS file is not in the root of this folder, but in a subfolder, it may read the following:
<head> <link rel =“stylesheet”type =“text / css”href =“styles \ menus \ black.css”> </ head>
Regarding external CSS files More Information
The biggest benefit of external style sheets is that they are not tied to any specific page, if the styles are executed internally or inline, other pages on the site cannot point to these style preferences.
However, with external styles, the same CSS file can be used for every page on the website, so that all pages have a unified look and edit CSS content for the entire website is very easy and centralized.
You can see how it works below...
Internal styles need to use the
<head>
<style>
body {
background-color: green;
}
h1 {
color: blue;
margin-left: 15px;
}
</style>
</head>However, since external stylesheets are contained in their own files, they can be created like this, which means exactly the same as the example above:
body {
background-color: green;
}
h1 {
color: blue;
margin-left: 15px;
}In these examples, inline The style only applies to that particular page, apparently because it's included in the header details of that HTML page. In the second example, the CSS information is self-contained in the CSS file, and any page can link to it using the code in the How to link to an external style sheet section above.
For more programming-related knowledge, please visit: Programming Learning Website! !
The above is the detailed content of What is an external style sheet in css?. For more information, please follow other related articles on the PHP Chinese website!