In HTML tag for CSS, when you are learning web development, you are must know about HTML and CSS. we basically know HTML means hypertext markup language and it's a text-based document used for HTML documents to be displayed in a browser and CSS (cascading stylesheets) are designed the document pretty look and show to the viewers.
Here, we are creating a CSS link easily and linking the stylesheet to the HTML file in three different methods:
- Inline-style
- Internal styles(embedded style)
- External style
Read also: HTML Tables with Examples
HTML Document:
Here, without the CSS how the HTML file should look like the plain text document on the web page. And CSS is a must for web pages to properly and look attractive design and HTML is the backbone of the internet means CSS is the backbone of HTML.
<html>
<head>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore <strong>veritatis</strong> et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</body>
</html>
Inline-styles
An inline style is an easy way to use in HTML files or documents, just you need to add them directly on HTML tags using the style attribute.
And this kind of method is cannot reuse and this is the disadvantage of this method this method is a single-line style method on HTML documents.
<p style="">dailyaspirants.com</p>
<html>
<head>
</head>
<body>
<p style="width:800px;text-align:justify;margin-top:50px;padding:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p style="width:800px;text-align:justify;color:green;font-size:24px;background-color:#d4d4d4;padding:20px;border-radius:20px;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore <strong>veritatis</strong> et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</body>
</html>
Internal styles
Internal styles, are embedded the style inside the HTML file and used style tag placed them in the head tag and it's also working on outside of the head tag. And take HTML too long and this is the bad thing used in HTML files.
<html>
<head>
<style>
body
{
display:flex;
background-color:#333;
align-items: center;
}
.one
{
width:800px;
text-align:justify;
margin-top:50px;
padding:20px;
color:#fff;
}
.two
{
width:800px;
text-align:justify;
color:green;
font-size:24px;
background-color:#d4d4d4;
padding:20px;
border-radius:20px;
}
</style>
</head>
<body>
<p class="one">
Lorem ipsum dolor sit amet, <a href="" style="color:green; text-decoration:none;">consectetur</a> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="" style="color:green; text-decoration:none;">Excepteur</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p class="two">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore <strong>veritatis</strong> et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</body>
</html>
External styles
This is the way to use a stylesheet on your HTML code.
An external stylesheet is totally code is placed in the CSS file extension and the extension end with (.css).
and CSS style sheet easily to include in the HTML file using the <link> tag.
<link href=".css" rel="stylesheet"/>
They follow the steps easily to connect the CSS using an external stylesheet.
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="one">
Lorem ipsum dolor sit amet, <a href="#" style="background-color:#ccc;color:green; text-decoration:none;">consectetur</a> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#" style="background-color:#ccc;color:green; text-decoration:none;">Excepteur</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
<p class="two">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore <strong>veritatis</strong> et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</body>
</html>
body
{
display:flex;
background-color:#deb887;
align-items: center;
}
.one
{
width:800px;
text-align:justify;
margin-top:50px;
padding:20px;
color:#fff;
}
.two
{
width:800px;
text-align:justify;
color:white;
font-size:24px;
background-color:#800000;
padding:20px;
border-radius:20px;
}
