How to Link External CSS to HTML

Introduction

CSS, or Cascading Style Sheets, are used in web development to indicate how a website will appear. In simpler words, HTML provides the structure of a website, while CSS ensures its style or how it looks.

In HTML, a Cascading Style Sheet (CSS) can be added in three different ways:

  • External CSS
  • Internal CSS
  • Inline CSS

How to Link External CSS to HTML?

By changing a CSS file, you could change the appearance and styles of many web pages with external CSS. As a result, it allows us to undertake the tasks quickly as we need to convert only one file.

The <link> tag is employed to incorporate an external style sheet on a webpage. This <link> tag is placed inside the <head> tag and would apply to sites with CSS that are added in.

The <link> tag has multiple purposes, and defining the right attribute is crucial in order to import the external style sheet into HTML.

The <link> tag has several properties, such as rel, src, etc.

While writing the external style sheet file with the .css extension, no HTML tags should be used.

Example

CSS

In this example, let us see how the rel attribute of the <link> tag set a relationship between the current file and the linked file where the linked document is the stylesheet file, style.css which is a style sheet for the current document.

The address (URL) of the file we want to click is defined with the src attribute.

The <link> tag has four attributes: the rel and src attributes are mandatory with the <link> tag, while the remaining two attributes are optional.

The rel Attribute

We cannot apply the <link> tag without adding the rel attribute. A browser can be informed of its relationship with an imported file by using the rel property.

Our browser finds out that we reference a style sheet when we write rel="stylesheet"

Example

The src Attribute

Another attribute of the <link> tag that should be used in concurrence is the src attribute.

There are two cases for this:

  • We will start by defining the location of the CSS file relative to HTML: src="style.css".

Example

  • The second situation, though, the HTML and CSS files are in different folders. Consequently, the absolute URL of the HTML page that is linked to the CSS is to be typed in.

Example

In this case it points to the CSS folder which contains style.css file.

The Type Attribute

The type attribute of the tag is utilized to define the type of content we link to; it is optional. We will write text or CSS for a stylesheet. In this instance, style sheets are only implemented in CSS, and the type attribute is not required.

Example

The Media Attribute

The media attribute of the link tag is optional. With this feature, distinct styles can be defined for different screen sizes and devices. It is impossible to view the attribute output. It is necessary to import many CSS styles along with their corresponding link elements. A media query is required for the value.

Example

Conclusion

  • In HTML pages, CSS (Cascading Style Sheet) is introduced to enhance and improve the appearance of the web page.
  • External CSS, Internal CSS, and Inline CSS are the three methods to include CSS in HTML.
  • The <link> tag is utilized in HTML to include external CSS.
  • The relationship between the HTML file and the linked document is defined utilizing the rel property.
  • To write the location (URL) of the CSS file, we use the src property.
  • The type of the linked file can be specified using the optional type property.
  • It is possible to set a distinct style for various devices and screen sizes using the optional media attribute.





Latest Courses