How To Link CSS To HTML? 3 Ways to Link CSS to HTML
Today we will be taking a look at how we can link CSS to our HTML Document. We Link Css files Using 3 Ways, 1. Inline Css 2.Internal Css 3. External Css
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.
3 Ways to Use Css in HTML
- 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.
How to link Inline CSS to HTML Document :
<h1 style="background-color: #008080; color: #f5f5f5;">Inline CSS</h1>
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 an HTML Document using the style tag (<style>).
Observe the following example for a better understanding:
How to link Internal CSS to HTML Document:
<style type="text/css"> h2 { background-color:black; color:white; } </style>
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 Check out our other posts.
Written by: @OmBandiwan