HTML (HyperText Markup Language) is usually used to create the structure of a webpage. Whereas CSS (Cascading Style Sheet) is used to design the structure of a webpage. In this lesson, I will show you, how to link CSS to HTML.
Something interesting I found on the internet i.e. “You are the CSS to my HTML”. This basically means, if you think of your life as HTML, then your better half is CSS.
CONTENTS
How many ways can CSS be added to an HTML file?
In 4 ways we can insert CSS into an HTML file. So let’s check.
Inline CSS :
In inline CSS, we can add style attribute directly into the HTML tag. This technique is inflexible and is only used in individual cases.
<p style="font-weight: bold;"> Bold Text </p>Internal CSS:
By using <style> tag in the head of an HTML document, especially in the case of special solutions for individual pages. Using the <style> tag, for example, style sheet properties that are only required in some documents on the website can be integrated into the respective pages.
<head>
<style>
p{
font-weight: bold;
}
</style>
</head>External CSS :
We can also include external CSS files into the <head> of HTML file using a <link> tag. If more than one HTML document is to be formatted with the same CSS rules, The correct place to refer to an external style sheet is <head> section. The document that will store all CSS styles has to save with the .css extension.
<link rel="stylesheet" href="style.css" type="text/css"/>There are different types of attributes in <link> tags. So let’s check it one by one.
rel:
According to MDN, the rel attribute defines the relation between the current document with the linked resource. The rel value can be author, bookmark, canonical, etc.
The browser should always use all CSS files marked with rel="stylesheet" as primary stylesheet files. CSS files that are linked into the HTML document with rel="alternate stylesheet" should be ignored by the browser until the user or an application activates the stylesheet.
href:
It refers to the location of the CSS file. If CSS and HTML documents are present in the same directory, just enter the CSS file name with extension .css. If the CSS file is present in another directory put the directory path in front of the CSS file. You can also use CDN (Content Delivery Network). It will load the file faster and also decrease the server load time.
type:
It refers to the content of the linked file. The default value is “text/css”.
media:
The type attribute instructs the browser to ignore unsupported media types. A web browser should read media="screen" on the monitor but use media="print" for printing.
CSS is not limited to a single external CSS file. Any number of external CSS files can be integrated with HTML by using <link> tags. Basically, it is better not to include too many CSS files into a single page. Each CSS file is loaded with an HTTP request. So this will cost additional loading time for the CSS files, especially on mobile devices. As a result, it may impact your SEO performance.
Can I include an external CSS file outside the <head> tag?
Generally <link> tag is declared in the HEAD section of an HTML file. But it can also include at the end of the HTML file (before the closing </body> tag) in order not to slow down the initial loading of the page.
<head>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>
</head>
<body>
<link rel="stylesheet" href="prit.css" type="text/css" media="print"/>
</body>Import of an external CSS file within the style tag :
We also can use the above three ways on one page. For example, we have a global stylesheet for all pages of a website. But on a certain page, we need a different style for a specific section. In this situation, we can use the above three methods.
In the <head> section, the <style> tag can contain instructions for loading external CSS files as well as direct declarations of CSS properties for that page. An external CSS file can be included in the style tag using the @import method. The @import method may not only appear in the style tag but also can be included in an external CSS file.
<head>
<style type = "text/css" media = "screen">
@import url (/styles.css);
@import url (/dark-theme.css);
p {
font-weight: bold;"
}
</style>
</head>Previously @import was not a recommended method for integrating an external CSS file. It is because the HTTP/1.1 protocol imported CSS files synchronously. So the browser had to wait until import the CSS files. Under the HTTP/1.1 protocol, the number of external files loaded asynchronously was strictly limited.
