How To Link Css To Html | Link Css To Html

How To Link Css To Html | Link Css To Html

Today we will be taking a look at how we can link external CSS into our HTML document.
Before we kick off our topic let’s take a look at External CSS what it is and why we need it.

what is css

Cascading Style Sheets commonly known as CSS is the language used for styling Web pages. By default, the browsers have to vary basic styling only for readability purposes, with CSS the HTML document gets an attractive look.
There are three ways we can use CSS in HTML documents.

Inline CSS
Internal CSS
External CSS

what is inline css –

Inline CSS is used to style a specific HTML Element. Observe the following example and try to change the properties.

what is Internal CSS –

Internal CSS is also known as Embedded CSS. It is used when the developer is working with a single-page HTML Document page.
Internal CSS is defined in the head tag(<head>) of HTML Document using style tag (<style>).
Observe the following example for better understanding:

External CSS –
What is External CSS?

A separate file with the ‘.css’ file extension which is linked within the head tag of the HTML document is known as the External CSS.

Why should we use External CSS?
External CSS enables the developer to easily make changes to the web pages from a single file. When working with multiple web pages we can not use inline CSS everywhere as it will make the code complicated which if any other developer wants to work would make it hard to understand.

How to link External CSS to HTML Document :
Linking the External CSS to HTML Document is identical to that of Internal CSS, We will be using the Link tag (<link>) which is defined in the head tag(<head>) along with the ‘href’ attribute which will specify the path to where our CSS file is saved. you can observe the following code snippet for better understanding.

 <head>  
    <title>External CSS</title>  
    <link rel="stylesheet" type="text/css" href="path-to-style.css">   
 </head>  

Everyone’s journey starts as Beginner so if you have any type of confusion drop a comment we are here to reply & provide the best information regarding your comment. Thank you for reading!

Thank you for visiting our blog today. Please do Check out our other posts.

Written by: @OmBandiwan

Share on:

Leave a Comment