To make the CSS script writers or website developer feel comfortable about the inserting ways of CSS script in to HTML document. Each of the three ways of embedding CSS into HTML document has some kind of benefits and convinence. As many developers needs to work as per their client's requirements, so they need to keep in mind the changes/updation of CSS scripts and accordingly uses the particular CSS inserting way.
We can style and design the tags which are enclosed within the <html> tag of the HTML document.
The three ways for embedding CSS are:
Internal Stylesheet is another way to insert CSS script into the HTML document.
In this way the CSS script is inserted (internally) within the STYLE tags of HTML, in between the HTML head element. So even if the developer needs to change/update the script he will only make changes to the script content within the STYLE tags. The changes within the STYLE tags makes effects on the webpages's or site's presentation.
Inline CSS is another way of embedding CSS into HTML document. In this the CSS script is added inline with the specific HTML tags. Individual tag is styled by using style attribute within the HTML tags. It's use is convinent only then, when there isn't need of reusing the tag style for each webpage of a site and when there is need of individual tag style for every web page.
The best and common way is to use External CSS link ie. to keep the whole CSS in a separate folder to avoid confusion between the CSS scripts and the HTML code. Also to make global changes and updations in the CSS file to have effective design to whole website at a time. It reduces the style scripting time for each and every web page of a website.
We can style and design the tags which are enclosed within the <html> tag of the HTML document.
The three ways for embedding CSS are:
- External Style
- Internal Style
- Inline Style
1. External CSS:
External StyleSheet is another way to insert CSS script into the HTML document. In this way there is a insertion of link tag referencing to the source css file which is externally saved as .CSS file formate. The changes or updations made on to the external css file will perform it's effect on the website's HTML document as it has external link to .CSS. External CSS is prefered when there is need of global CSS change of the website. It is used only for global site change.
Code Sample:
Save as the below script by exstyle.css :h1 {color:blue;}Save as the below script by ExternalCSS.html:
img {
padding:1px;
border:1px solid #021a40;
background-color:#fffff;
}
h2 {color:red;}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
<!DOCTYPE html>OUTPUT:
<html>
<head><br />
<link rel="stylesheet" type="text/css" href="/Users/natas/OneDrive/Desktop/Desktop/DSJ/SchoolTech/extstyle.css" /><br />
</head>
<body bgcolor = "pink">
<h1 align= "center">Image tag demo</h1>
<img src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 align= "center">Link tag demo</h2>
<a href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>
<!-- External StyleSheet (inserting link reference to external CSS script file between head elements of HTML)-->
 |
| Output for External Stylesheet (ExternalCSS.html) |
2. Internal CSS:
Internal Stylesheet is another way to insert CSS script into the HTML document.In this way the CSS script is inserted (internally) within the STYLE tags of HTML, in between the HTML head element. So even if the developer needs to change/update the script he will only make changes to the script content within the STYLE tags. The changes within the STYLE tags makes effects on the webpages's or site's presentation.
Code Sample:
Save as the below script by InternalCSS.html:
<!DOCTYPE html>OUTPUT:
<html>
<head>
<style type="text/css">
h1 {color:blue;}
img {
padding:1px;
border:1px solid #021a40;
}
h2 {color:red;}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
</style>
</head>
<body bgcolor = "pink">
<h1 align= "center">Image tag demo</h1>
<img src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 align= "center">Link tag demo</h2>
<a href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>
<!-- Internal StyleSheet (within style tags between head elements of HTML)-->
 |
| Output for Internal Stylesheet (InternalCSS.html) |
3. Inline CSS:
Inline CSS is another way of embedding CSS into HTML document. In this the CSS script is added inline with the specific HTML tags. Individual tag is styled by using style attribute within the HTML tags. It's use is convinent only then, when there isn't need of reusing the tag style for each webpage of a site and when there is need of individual tag style for every web page.Code Sample:
Save as the below script by InlineCSS.html:OUTPUT:
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor = "pink">
<h1 style="color:blue" align= "center">Image tag demo</h1>
<img style="padding:1px;border:1px solid #021a40" src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 style="color:red" align= "center">Link tag demo</h2>
<a style="color: (internal value);text-decoration: underline;cursor: auto" href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>
<!-- Inline StyleSheet (Defines CSS Inline with HTML tags or specific to the HTML tags by using STYLE attribute)-->
 |
| Output for Inline Stylesheet (InlineCSS.html) |
The best and common way is to use External CSS link ie. to keep the whole CSS in a separate folder to avoid confusion between the CSS scripts and the HTML code. Also to make global changes and updations in the CSS file to have effective design to whole website at a time. It reduces the style scripting time for each and every web page of a website.
No comments:
Post a Comment