How to Link a CSS File to a HTML File?
Before starting this process, let me say that HTML and CSS are two different languages and their parties are also strange. HTML is a hypertext markup language that shows us the progression of HTML codes in our browser. But if we beautify and align the HTML content with CSS.
We can summarize that this CSS is used to design our user interface to build a beautiful experience.
Now that we understand the functionality of HTML and CSS, our next job is how to combine CSS with HTML certificates so that we can create beautiful web pages.
If we want to add CSS to an HTML document, we have three options
1. Inline CSS
2. Internal CSS
3. External CSS
Now we will consider these matters in detail. I will first introduce CSS in the HTML
document
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:greeb; text-align:center;font-size:12px;" >Heading.</h1>
<p style="color:red; text-align:center;>Paragraph.</p>
</body>
</html>
Internal CSS will add to the main leader tags in HTML where we write open and exclusive style tags. Our CSS code is embedded in the style tag. Thus, HTML and CSS are written to the same file.
<!DOCTYPE html><html><head> <style> h1{ color:black; text-align:center; } p{ color:green; font-size: 12px; } </style></head><body> <h1>Heading</h1> <p>Paragraph.</p> </body></html>If we now want to add external CSS to the HTML document, we need to build an external CSS file. In this file, we will write our CSS code and then we will connect that file to our HTML document. Here I am creating an "external style. CSS" file that introduces all the CSS code and we will connect that file to our HTML document.
<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="externalstyle.css">
</head><body><h1>Heading</h1>
<p>Paragraph.</p>
</body></html>
This is our HTML file, here we have included the CSS file and now we have our external style.
h1{ color:black; text-align:center;}p{ color:green; font-size: 12px;}These three classes for the use of CSS in this managed document, now I have a part in this part contact with the item and will be accessible soon for front-end web developers.
How to Link a CSS File to a HTML File?
Reviewed by easycoding
on
July 22, 2020
Rating:
Reviewed by easycoding
on
July 22, 2020
Rating:
No comments: