If you’re just starting out with your career in web development, you should know that HTML and CSS work hand in hand. To enable CSS styles to apply to HTML elements, they should first be linked to the HTML document. Quite a few methods are available to achieve the same.
In this blog, you will learn about linking CSS to HTML documents by using three simple methods.
How to Link CSS to HTML Documents [3 Methods]
We can easily link the CSS to HTML documents by using three different methods that are discussed as follows:
1. Inline Style Sheet
The Inline-styles are utilized to apply the style rules in an element by adding CSS rules directly into an HTML element. It can be linked to an element by using the “style” attribute.
If .you want to link the CSS to the HTML document using the Inline Style Sheet method, then you must follow the steps below:
Step 1: Firstly, you need to write the HTML code in a text editor of your choice or open an existing HTML file in the text editor with which you want to link the CSS.
<!Doctype Html> <Html> <Head> <Title> Using Inline style link the CSS to Html </Title> </Head> <Body> Through this page, you will understand how to link the CSS to the Html page. <br> <br> And, through this section, you will understand how to link the CSS using Inline Style. </Body> </Html>
Step 2: At the beginning of that text, you have to use the style attribute on which you want to use CSS. So, for linking the CSS to Html using inline style, you have to write the style attribute within an appropriate tag, as you can see below-
<p style=" "> Any text </p>
Step 3: Now, you have to set the property in the style attribute as you can see below:
<!Doctype Html> <Html> <Head> <Title> Using Inline style link the CSS to Html </Title> </Head> <Body> Through this page, you will understand how to link the CSS to the Html page. <br> <p style="color:green;"> And, through this section, you will understand how to link the CSS using Inline Style. </p> </Body> </Html>
Step 4: Now, after saving the HTML code, run it. It will show you the output once it gets successfully executed in the browser. You will see that the text within the <p> tag will have its color changed to green and this means that the CSS property (“color”) has been applied successfully.
2. Embedded Style or Internal Style
Internal or Embedded style sheets only modify the elements of a particular HTML file in which they are embedded.
You need to define it in the HTML document <head> section by using the <style> tag. You can define as many <style> elements as you want in the <head> section.
If you want to apply CSS styles to the HTML document using the Internal Style method, then you can do so by following the steps mentioned below:
Step 1: First of all, you have to create an HTML file and write some HTML code using a text editor or open an existing HTML file to which you want to apply CSS styles using the internal style sheet.
<!Doctype Html> <Html> <Head> <Title> Using Internal Style Sheet link the CSS to Html </Title> </Head> <Body> Through this page, you will understand how to link the CSS to the Html page. <br> <br> And, through this section, you will understand how to link the CSS using the Internal Style Sheet. </Body> </Html>
Step 2: Further, you have to put the style tag between the beginning and ending of the <head> tag. The example below with help you understand it better:
<Head> <Title> Using Internal Style Sheet link the CSS to Html </Title> <style> ..... ..... </style> </Head>
Step 3: You have to utilize the “type” property of the style tag and it’s important that you define this property as “text/css” every time you are using the style tag. Here’s how it looks:
<style type="text/css">
Step 4: After that, you have to add all the HTML elements within the <style> tag that you need to style using CSS.
<!Doctype Html>
<Html>
<Head>
<Title>
Link the CSS using Internal Style Sheet to Html
</Title>
<style type="text/css">
Body
{
color:green;
margin-left:200px;
}
p
{
color:pink;
}
</style>
</Head>
<Body> Through this page, you will understand how to link the CSS to the Html page.
<p>
And, through this section, you will understand how to link the CSS using an internal Style Sheet.
</p>
</Body>
</Html>
Step 5: Lastly, you should save the HTML file and then run it on the browser. When the code is auspiciously executed on the browser, you will be able to see that CSS styles have been applied to the text under the <Body> tag and <p> tag.
3. External Style Sheet
When you want to refer to the same style across several HTML pages, then the external style sheet is the ideal method to use.
The files that exclusively contain CSS code are called CSS files or external style sheet files. These files need to end with the .css extension. These files are separated from HTML files and can be quickly linked with multiple HTML documents using the <link> tag.
If you want to link the external CSS stylesheet file to a HTML document, you must follow the steps mentioned below:
Step1: Firstly, you have to create an HTML file and write some HTML code using a text editor or open an existing HTML file with which you want to link an external CSS file.
<!Doctype Html> <Html> <Head> <Title> Using External style sheet link the CSS to Html </Title> </Head> <Body> Through this page, you will understand how to link the CSS to the Html page. <br> <br> And, through this section, you will understand how to link the CSS using an external style sheet. </Body> </Html>
Step2: Further, you have to create a new file that will be the CSS file and write the CSS code in it to style the elements in the HTML document. Here’s an example of CSS code that you need to write within the CSS file:
Body
{
color:green;
margin-left:200px;
}
p
{
color:pink;
}
Step 3: Save the file with the .css extension.
Step 4: The <LINK> tag is put in the text HEAD. The arbitrary TYPE attribute is applied to define a media type–text/css for CSS enabling browsers to neglect style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is a good idea too.
<!Doctype Html> <Html> <Head> <Title> Using External style sheet link the CSS to Html </Title> <link rel="stylesheet" href="csscode.css"> </Head> <Body> Through this page, you will understand how to link the CSS to the Html page. <br> <p> And, through this section, you will understand how to link the CSS using an external style sheet. </p> </Body> </Html>
Step 5: Lastly, you need to open your HTML file in the browser to check if the styles have been applied to the HTML elements. Also, make sure that the HTML file and the CSS file are in the same directory or location.
Conclusion
Improving the aspect of your site is simple with CSS. Using any of the methods that are mentioned above, you can rapidly and efficiently add CSS to your website to match the different looks and quality of your brand.
People are also reading: