How to Link External CSS to HTMLIntroductionCSS, 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:
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 AttributeWe 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 AttributeAnother attribute of the <link> tag that should be used in concurrence is the src attribute. There are two cases for this:
Example
Example In this case it points to the CSS folder which contains style.css file. The Type AttributeThe 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 AttributeThe 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
|