How to Link CSS to Html
In HTML, we can easily link the style sheet to the Html document in the following different three methods:
- Using an Inline Style
- Using an Embedded Style or Internal Style
- Using an External style
Using an Inline Style
It is an easiest method for adding the CSS style to our Html document or code. But we cannot reuse this method, so reusability is the disadvantage in this method. If we want to add the CSS using inline style to our Html document then we have to follow the steps which are given below:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to link the CSS using Inline Style.
Step 2: Now, we have to use the style attribute at the starting of that text on which we want to use CSS. So, we have to type the style attribute within a particular tag for linking the CSS to Html using inline style as shown in the following block:
Step 3: Now, we have to give the property in the style attribute as shown in the following block:
Step 4: Now, save the Html Code and then run it. When the code is sucessfully executed in the browser then it will show the output. The below screenshot shows the output of the above Html code:
Using an Internal StyleSheet
Those sheets which only affects the Html document in which they are embedded in are known as Internal Style Sheets. These style sheets are defined between the starting and closing of <head> tag.
If we want to add the CSS using Internal style sheet to our Html document then we have to follow the steps which are given below:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to link the CSS using Internal style sheet.
Step 2: Now, we have to place the style tag within the starting and closing of <head> tag, just after the <title> tag. We described this step in the following block:
Step 3: Now, we have to use the attribute of style tag whose name is “type”. So, we have to always start the <style> tag like this:
Step 4: Now, we have to add those elements which we want to use on the text in the same Html page. We can add these elements within the style tag which is defined in the <head> tag.
Step 5: And, at last save the Html file and run it. When the code is successfully executed by the browser then it will show the output. The below screenshot provides the output of the above Html code:
Using an external Style
Those files which contains only the CSS format or code only are known as external style sheet files or CSS files. The extension of these files must end with the .css extension. These files are different from Html files and can be easily included in the Html files using the <link> tag.
If we want to add the CSS using External style sheet to our Html document then we have to follow the steps which are given below:
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to link the CSS file:
Step 2: Now, we have to create the CSS file. So, open the text editor and type the CSS code in the file.
Step 3: And, then save the file with the .css extension.
Step 4: Again, come to the Html file. And then, we have to place the cursor within the starting and closing of <head> tag, just after the <title> tag. And, then type the <tag> with its attributes and their values. We described it in the following block:
Step 5: Now, we have to save the Html file at the same location or directory in which CSS file is saved. And, then run the Html file in a browser. The output of the above html code is shown in the following screenshot:
