In this article we will show you the solution of how to embed CSS in HTML, in HTML, there are three ways to embed CSS into HTML. Let us know about all the ways first.
- Inline CSS: to write inline CSS, we have to write the CSS into the particular HTML tag
- Internal CSS: to write internal CSS, at first we have to create a <style> tag into the <head> tag and write CSS into it
- External CSS: to attach external CSS file, we have to link the CSS file using <link rel="stylesheet" href="style.css"> into the <head> tag.
Step By Step Guide On How To Embed CSS In HTML :-
Code For HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> how to embed CSS in HTML </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<link rel="stylesheet" href="style.css">
<style>
body{
background-color: rgb(51, 50, 50);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> how to embed css in html </h3>
</center>
<div class="container" style="padding: 30px; margin: 20px;">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos incidunt aliquid facilis labore quia, atque quasi delectus ad quidem cupiditate corporis necessitatibus impedit cum tempore doloremque modi enim, nemo, eveniet fugit optio quaerat? Placeat quae quidem debitis facere, illum earum deserunt delectus quis, omnis eaque corporis obcaecati nisi mollitia similique.
</div>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
- The HTML document's <title> is then established using the title tag, followed by the < /title> tag.
- The <h1> element is used to add a heading, and the </h1> tag is used to close it.
- creating a <div> with the class of container. Now here, we will add some margin and padding into it using In-line CSS. writing some paragraphs into it.
- Now create a <style> tag within the <head> tag to add Internal CSS.
- For the <body> tag, add background color and font-family.
- For the <h1> and <h3> tag, add color, font-size etc. to it.
- We'll also use an External CSS file ‘style.css’ to style the HTML page.
Code For Style.css
.container {
height: 100%;
width: 100%;
color: black;
font-weight: bold;
border: 2px solid darkblue;
background: url('https://images.unsplash.com/photo-1519750783826-e2420f4d687f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80');
background-repeat: repeat;
background-position: center;
}
- At first create a CSS file with the same folder as the HTML file.
- For the class container, set the height and width to 100%. Also adding color, font weight, and border to it.
- Then adding an image to the background using the background property
- Setting the background-repeat to repeat and background-position to center.
Conclusion :-
Last, here in conclusion, we can say that with this article’s help, we know how to embed CSS in HTML.
I hope this article on how to embed CSS in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
