1. Home
  2. How to Link CSS to Html

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:

  1. Using an Inline Style
  2. Using an Embedded Style or Internal Style
  3. 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:

Test it Now

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:

How to Link CSS to Html

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 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 tag, just after the tag. We described this step in the following block:</p> <div class="codeblock"> <textarea name="code" class="xml"> <Head> <Title> Link the CSS using Internal Style Sheet to Html

Step 3: Now, we have to use the attribute of style tag whose name is "type". So, we have to always start the This page helps you to understand how to link the CSS to the Html page.

And, this section helps you to understand how to link the CSS using Internal Style Style.

Test it Now

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:

How to Link CSS to Html

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 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.

How to Link CSS to Html

Step 4: Again, come to the Html file. And then, we have to place the cursor within the starting and closing of tag, just after the tag. And, then type the <tag> with its attributes and their values. We described it in the following block:</p> <div class="codeblock"> <textarea name="code" class="xml"> <!Doctype Html> <Html> <Head> <Title> Link the CSS code using External style sheet to Html This page helps you to understand how to link the CSS to the Html page.

And, this section helps you to understand how to link the CSS using External Style Style.

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:

How to Link CSS to Html
Next TopicHow to add Background Image in Html




Hot Tutorials

Contact US

Email:[email protected]

How to Link CSS to Html
10/30