Introduction
Cascading Style Sheets, known as CSS, play a vital role in web development by defining the visual presentation of a website. Simply put, HTML defines the layout of a website, whereas CSS controls its appearance and design.
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 modifying a CSS file, you have the ability to alter the visual design and formatting of multiple web pages that utilize external CSS. This capability enables efficient management as adjustments can be made to a single file, expediting the process.
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> element serves various functions and it is essential to correctly specify the attribute when incorporating an external style sheet into an HTML document.
The <link> tag is equipped with various attributes like rel, src, and more.
When creating a .css file for an external style sheet, it is important to refrain from including any HTML tags within the file.
Example
<html>
<head>
<link rel="stylesheet" src="https://placehold.co/300x300/3498db/ffffff?text=Sample+Image">
</head>
<body>
</body>
</html>
body {
background-color: blue;
}
h1 {
color: navy;
margin-left: 30px;
}
In this instance, we will explore how the rel attribute of the <link> element establishes a connection between the present file and the linked file. In this scenario, the linked file is the style.css stylesheet, which serves as the styling document for the current file.
The URL pointing to the file we wish to access is specified using the src attribute.
The <link> element is defined by four attributes. The rel and src attributes are required when using the <link> element, whereas the other two attributes are considered to be optional.
The rel Attribute
Adding the <link> tag necessitates the inclusion of the rel attribute. The rel property is utilized to communicate the connection between a browser and an imported file.
When we include rel="stylesheet" in our code, the browser identifies that we are linking to a style sheet.
Example
<head>
<link rel="stylesheet" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</head>
The src Attribute
An additional feature of the <link> tag that should be utilized together is the src attribute.
There are two scenarios to consider in this situation:
To begin with, we need to specify the position of the CSS file in relation to the HTML file using: src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"".
Example
In the second scenario, the HTML and CSS files are located in separate directories. As a result, it is necessary to specify the absolute URL of the HTML page that refers to the CSS file.
Example
<head>
<link rel="stylesheet" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</head>
In this instance, it refers to the CSS directory that houses the file named style.css.
The Type Attribute
The type attribute in the tag serves the purpose of specifying the content type being linked, though it is not mandatory. It can be used for text or CSS when linking to a stylesheet. When dealing specifically with stylesheets in CSS, the type attribute becomes unnecessary.
Example
<html>
<head>
<link rel="stylesheet" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" type="text/css">
</head>
<body>
</body>
</html>
The Media Attribute
The media attribute found in the link tag is not mandatory. It allows developers to specify unique styles for various screen sizes and devices. The output of this attribute cannot be visually observed. Importing multiple CSS styles with their respective link elements is essential. The value for the media query must be included.
Example
<html>
<head>
<link rel="stylesheet" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" media="screen and (max-width: 500px)">
</head>
<body>
</body>
</html>
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.