External Style Sheet

Creating and Using External Css File

If we are going to use the styles we will create on all pages on our site, add these style templates to the extension. We can write it in a file with css.

By linking this style file to the web pages we want, we can make it valid for those pages.

In this way, when we want to make a changes in the design of the site, we can change all the pages by simply editing this file.

To apply a style file to a web page, we must add the following code to the head of that web page:

<link rel="stylesheet" type="text/css" href="filePath.css" />

Inside the external style file, our styles can be written as follows:

Using Multiple Style Files

Multiple style files can also be linked to a web page. If the same tags or selectors are defined in different style files and the same properties are formatted differently, the properties in the last read style sheet will be valid.

This also applies if the property is formatted both in the external style file and in the head .

Let's explain this with an example.

In the style1.css file for the h1 tag;

In the style2.css file;

get it written. Let the head of the document look like this:

In this case, the h1 tag will be blue. Because the last style file read is stil1.css and h1 is made blue in that file.

Not to mention: Native style templates have the highest priority. A style specified in the tag will override any rules in the head or external style file.

EXERCISES