Home > Web Front-end > CSS Tutorial > What is an external style sheet in css?

What is an external style sheet in css?

青灯夜游
Release: 2020-11-13 16:37:28
Original
6850 people have browsed it

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.

What is an external style sheet in css?

[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):

What is an external style sheet in 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>
Copy after login

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>
Copy after login

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