Including CSS in HTML Inline, Internal, External
You can add or display CSS web page element design script in HTML web page in three ways, which mainly includes inline CSS method, internal CSS method and external CSS method.
So, let’s add or display CSS in an HTML web page in different ways.
Adding inline CSS to an HTML web page.
To add inline CSS attributes effect style in an HTML web page, you write the CSS style script code inside that HTML tag element. But remember, inline CSS is limited and works only on the particular HTML tag element code, you can target inline CSS to style any particular tag element in HTML web page.
Inline CSS attributes example in HTML.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Inline Css Script Code</title>
<body>
<h1 style=”font-family:bookman old style; color: teal; font-size: 3rem;” >This Is The Correct Example Of Inline Css</h1>
<p style=”color: orange; font-size: 2em;”>This Is Another Example Of Inline Css Paragraph Text </p>
</body>
</html>
Advantages of Inline CSS.
- For small web page tag element modification, any particular part of the website can be modified quickly and easily with inline CSS.
- Inline CSS eliminates the need to write multiple external and internal CSS codes.
- Inline CSS can be applied, modified, and upgraded to any web page element at any time.
Disadvantages of Inline CSS.
- Multiple codes and attributes need to be coded for multiple HTML web page tag elements.
- Applying inline CSS to multiple HTML tags promotes web page complexity.
- Multiple inline CSS script codes make the existing HTML web page structure layout and tag element code unordered and complex.
Adding internal CSS to an HTML web page.
If you want to write CSS code within your existing HTML web page, then you can write internal CSS inside the CSS <style> tag or element inside the <head> tag section of the existing HTML web page. The internal CSS apply method applies CSS stylesheet attributes to all HTML web page tag elements at the same time. Where you can write a single inline CSS code to quickly format and decorate a single webpage targeted tag element with quick immediate style.
internal CSS attributes example in HTML.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Internal CSS Script Code</title>
<style>
body {
font-size:1.5em;
background-color: aqua;
}
h1 {
font-family:monotype corsiva;
color: red;
}
p {
color: brown;
font-size: 30px;
}
</style>
</head>
<body>
<h1>This Is A Internal Css Heading Script Code</h1>
<p>This Is A Paragraph Internal Css Script Code</p>
</body>
</html>
Advantages of internal CSS.
- Applying style and attributes simultaneously to a particular single HTML web page tag element content.
- Internal CSS makes applying style and attributes in HTML web page simpler and easier than inline CSS.
Disadvantages of internal CSS.
- It becomes more difficult to reuse CSS style on multiple HTML webpages.
- If the same CSS attributes are applied in multiple HTML tag attributes in a single web page, it increases the web page loading time in the client web browser, remember, using more CSS slows down your web performance.
Adding external CSS to an HTML web page.
External CSS script code is added or linked in the HTML web page using <link> tag in the <head> tag section, here all the necessary CSS code script is written in an external file for all web pages. And later it is applied in the webpage website for single time CSS HTML web page effect attributes, you can create external CSS script code using any HTML editor, and link it directly in your web page, external CSS can apply styles and attributes to the entire website at the same time.
External CSS attributes example in HTML.
develop an External link CSS file (filestyle.css):
body {
background-color: aqua;
}
h1 {
font-family: arial;
color: red;
}
p {
font-size: 2em;
}
Link an external CSS file in an HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>External CSS Script Code</title>
<link rel=”stylesheet” href=”filestyle.css”>
</head>
<body>
<h1>You Can See All Css Heading1 Attributes Apply In filestyle.css file</h1>
<p>It Preview All The Manual External Css file name filestyle.css effect in paragrap tag.</p>
</body>
</html>
Advantages of external CSS.
- External CSS is created separately from inline, internal CSS code in an HTML web page, which reduces HTML web page development complexity, and helps develop a clean web page design.
- External CSS can be reused multiple times in multiple HTML web pages by linking to it in the head section.
- Maintaining, updating, and customizing external CSS script code attributes is a much easier and quicker process.
Disadvantages of external CSS.
- External CSS is linked separately in the HTML web page, which requires an additional HTTP web request, which increases the web page loading time, and sometimes it takes more time to preview all the external CSS script code attributes in the website web page.
Brief overview of inline, internal, and external CSS in an html web page.
- inline css scripts – can be applied quickly and Fastly in a particular portion of the web page, it cannot be used in multiple HTML tag elements at once.
- Internal CSS scripts – Internal CSS can be applied for a single HTML web page, sometimes internal CSS complicates the web page.
- External CSS – Best for applying and modifying the entire HTML web page at once, external CSS can be live updated, modified and customized at a time.
