Different ways to bring CSS to Html(lt.12)
himanshuThere are three different ways to bring css to html:
Inline css.
Internal css.
External css.
Inline css :
Inline CSS is written inside body section. By using it we can apply css to one element only.
Inline css has the highest priority over all other styles. No need to create an additional file because the targeted file is already written in HTML code.
Disadvantages:
If the browser has to store the cache memory inline css doesn't allows it.
Pseudo-codes and pseudo-classes cant be styled with inline css.
Can make your HTML code cluttered and difficult to maintain.
Code to demonstrate use of inline css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>INline</title>
</head>
<body>
<p style="color: blue; font-size: 20px; background-color: aquamarine;border: 3px solid black">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur,
quasi? Reiciendis rerum dicta, laudantium nostrum maxime quas aut
distinctio iure nam quia voluptates? Tempora adipisci dolorem ad
perspiciatis omnis quae.
</p>
<p style="color: red ;">
Lorem ipsum, dolor sit amet consectetur adipisicinratrum harum at, qui rem illo sed et officia cumque!
</p>
</body>
</html>
Internal css:
Written inside head section of html. Used to add unique style for a single document. Id's and classes can be used in interanl css.
Is easier to maintain than inline CSS, as all of the CSS for a page is in one place.Can be used to style multiple HTML elements on a single page.
Disadvantages:
Limited Reusability: Internal CSS is limited to a single HTML document.
Can make your HTML code cluttered and difficult to maintain, especially on large pages.
Limited Browser Caching: Internal CSS is specific to a single page, so there's no caching benefit.
It can increase page load time.
Code to demonstrate use of internal css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>internal</title>
<style>
/* body
{
color: rgb(67, 250, 67);
} */
.heading {
font-size: 40px;
color: aquamarine;
border: 6px solid blue ;
}
.pra{
color: palevioletred;
font-size: 20px;
background-color: burlywood;
}
</style>
</head>
<body>
<h1 class="heading">gopal</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque natus
voluptates laborum sapiente explicabo tempore consequatur, dicta culpa
voluptate eos.
</p>
<h2 class="heading">hii how r u</h2>
<p>hahah u r bevkoof</p>
<h3 class="pra">Lorem ipsum dolor sit amet.</h3>
<p class="pra">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</body>
</html>
External css:
It is also written inside the head section of the html code but using link tag . We can control the style of several documents.
Styles defined in an external CSS file can be reused across multiple HTML documents. External stylesheets can be cached by web browsers. Once a CSS file is loaded, it can be reused for subsequent pages, reducing load times.
Changes to the styling of a website can be made in a single external CSS file. This simplifies maintenance, as updates are reflected across all pages that reference the stylesheet.
Disadvantages:
If for any cause the css file is missing then the HTML can't derive the designs/ styles causing irregularity. i.e if html file is loaded properly then the css should also load properly.
Not for small projects.
Additional HTTP Request: Loading an external CSS file requires an additional HTTP request, which can marginally slow down the initial page load.
code to demonstrate it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>external</title>
<!-- rel = realtion i.e stylesheet in this case -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="extrnl.css">
</head>
<body>
<h1 class="heading">your name</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="heading">Lorem ipsum dolor sit amet consectetur.</p>
<h2>anonymous</h2>
</body>
css code:
extrnl.css
body{
background-color: rgba(85, 255, 0, 0.744);
}
.heading
{
color: azure;
font-size: 39px;
text-align: center;
text-decoration: dotted;
}
style.css
body{
background-color: #808080;
color: red;
}
Priority in css: Inline> Internal> External
sometimes if we change the sequence of the internal and external css i.e if we put external css over internal css then priority of external will be more.
Subscribe to my newsletter
Read articles from himanshu directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by