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 lets take a look at External CSS what it is and why do we need it.
what is css
Cascading Style Sheets commonly known as CSS is language used for styling the Web pages. By default the browsers have vary basic styling only for readability purpose ,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 also known as Embedded CSS . It is used when 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 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 webpages from a single file. When working with multiple webpages we can not use inline CSS everywhere as it will make the code complicated on 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 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>