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
This method provides a simple way to apply CSS styles to our HTML document or code. However, it lacks reusability, which is a drawback of this approach. To add CSS using inline styles to our HTML document, we need to adhere to the following steps:
Step 1: To begin, we need to enter the HTML code in a text editor or open the current HTML file in the text editor where we intend to connect the CSS using Inline Style.
<!Doctype Html>
<Html>
<Head>
<Title>
Link the CSS using Inline style to Html
</Title>
</Head>
<Body>
This page helps you to understand how to link the CSS to the Html page. <br>
<br>
And, this section helps you to understand how to link the CSS using Inline Style.
</Body>
</Html>
Step 2: The next step involves utilizing the style attribute at the beginning of the text where CSS will be applied. This entails inserting the style attribute within a specific tag to associate CSS with HTML through inline styling, exemplified in the code snippet below:
<p style=" "> Any text </p>
Step 3: Next, we need to specify the property within the style attribute, as demonstrated in the subsequent block:
<!Doctype Html>
<Html>
<Head>
<Title>
Link the CSS using Inline style to Html
</Title>
</Head>
<Body>
This page helps you to understand how to link the CSS to the Html page. <br>
<p style="color:green;">
And, this section helps you to understand how to link the CSS using Inline Style.
</p>
</Body>
</Html>
Step 4: Save the HTML code and proceed to execute it. Once the code runs successfully in the browser, the output will be displayed. The screenshot below illustrates the result of the aforementioned HTML code:
Using an Internal StyleSheet
Style sheets that exclusively impact the HTML document they are inserted in are referred to as Internal Style Sheets. These sheets are specified within the opening and closing <head> tags.
To incorporate CSS into an HTML document using an internal style sheet, the following steps should be followed:
To begin, the initial step involves entering the HTML code into a text editor or accessing the already existing HTML file in the text editor where we intend to connect the CSS through an Internal style sheet.
<!Doctype Html>
<Html>
<Head>
<Title>
Link the CSS using Inline style to Html
</Title>
</Head>
<Body>
This page helps you to understand how to link the CSS to the Html page. <br>
<br>
And, this section helps you to understand how to link the CSS using Internal Style Style.
</Body>
</Html>
Step 2: Next, we need to insert the style tag between the opening and closing of the <head> tag, immediately following the <title> tag. This action is detailed in the subsequent section:
<Head>
<Title>
Link the CSS using Internal Style Sheet to Html
</Title>
<style>
.....
.....
</style>
</Head>
Step 3: In this step, we need to utilize the "type" attribute within the style tag. Therefore, it is imperative to consistently commence the <style> tag in the following manner:
<style type="text/css">
Step 4: Next, we need to include the elements that we intend to utilize in the text within the Html page. These elements can be inserted within the style tag that is specified within the <head> tag.
<!Doctype Html>
<Html>
<Head>
<Title>
Link the CSS using Internal Style Sheet to Html
</Title>
<style>
Body
{
color:green;
margin-left:200px;
}
p
{
color:pink;
}
</style>
</Head>
<Body> This page helps you to understand how to link the CSS to the Html page.
<p>
And, this section helps you to understand how to link the CSS using Internal Style Style.
</p>
</Body>
</Html>
Step 5: Finally, save the HTML file and execute it. Once the browser successfully runs the code, the output will be displayed. The screenshot below illustrates the result of the aforementioned HTML code:
Using an external Style
Files that exclusively contain CSS code are referred to as external style sheet files or CSS files. These files must have a file extension ending in .css. They are distinct from HTML files and can be effortlessly incorporated into HTML files using the <link> tag.
In order to incorporate CSS into an HTML document using an External style sheet, the following steps need to be followed:
To begin, the initial step involves entering the HTML code into a text editor or accessing the HTML file in a text editor where we intend to connect the CSS file:
<!Doctype Html>
<Html>
<Head>
<Title>
Link the CSS code using External style sheet to Html
</Title>
</Head>
<Body>
This page helps you to understand how to link the CSS to the Html page. <br>
<br>
And, this section helps you to understand how to link the CSS using External Style Style.
</Body>
</Html>
Step 2: The next task is to generate the CSS file. Begin by launching a text editor and entering the CSS code into the file.
Body
{
color:green;
margin-left:200px;
}
p
{
color:pink;
}
Step 3: Finally, remember to save the document with the .css file 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:
<!Doctype Html>
<Html>
<Head>
<Title>
Link the CSS code using External style sheet to Html
</Title>
<link rel="stylesheet" href="csscode.css">
</Head>
<Body>
This page helps you to understand how to link the CSS to the Html page.
<p>
And, this section helps you to understand how to link the CSS using External Style Style.
</p>
</Body>
</Html>
Step 5: Next, it is essential to store the HTML file in the identical location or folder where the CSS file is kept. Afterwards, proceed to execute the HTML file in a web browser. The result of the aforementioned HTML code can be viewed in the screenshot provided below: