CSS
[Link]
Types of CSS
➢ Cascading Style Sheet (CSS) is used to set the style in web pages that
contain HTML elements. It sets the background color, font-size, font-family,
color, … etc. properties of elements on a web page.
There are three types of CSS which are given below:
1. Inline CSS
2. Internal or Embedded CSS
3. External CSS
❖ Inline CSS
Inline CSS is a method of applying CSS styling directly within HTML
elements using the “style” attribute.
It allows developers to define individual element styles, It is used to apply
a unique style to a single HTML element.
©Topperworld
CSS
➢ When to Use Inline CSS ?
Use inline styles in web development when you need to apply specific, one-
off styles to an element without affecting global styles or when generating
dynamic styles programmatically based on data or user interactions.
➢ How to use inline CSS ?
To use inline CSS, add a “style” attribute to an HTML element and define
CSS properties and values within double quotes, Inline CSS has the highest
priority out of external, internal CSS, and inline CSS.
Syntax:
<tag style = " "></tag>
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Inline CSS</title>
</head>
<body>
©Topperworld
CSS
<p style="color: green;">
HTML
</p>
<P style="color: red;">
CSS
</P>
<p style="color: blue;">
JavaScript
</p>
</body>
</html>
Output:
➔ Advantages of using Inline CSS
⚫ Using style attributes we can provide styles directly to our HTML
elements.
⚫ Inline CSS Overrides external and internal styles with higher specificity.
⚫ No need to create and upload a separate document as in the external
style.
⚫ Inline styles have high specificity, allowing precise control over
individual elements.
⚫ Enables dynamic style changes using JavaScript or server-side logic.
©Topperworld
CSS
⚫ Inline styles don’t require separate CSS files, potentially reducing HTTP
requests.
➔ Disadvantages of using Inline CSS
⚫ Adding style attributes to every HTML element is time-consuming.
⚫ Styling multiple elements can increase your page’s size and download
time, impacting overall page performance.
⚫ Reduced separation of concerns between HTML structure and CSS.
⚫ Inline styles cannot be used to style pseudo-elements and pseudo-
classes.
⚫ It can be difficult to maintain consistency and make global style updates.
❖ Internal CSS
The Internal CSS stylesheet is a set of styles created as part of an HTML
document. Internal CSS is a method for defining CSS styles within an HTML
document’s <style> element, it is used to provide a unique style for a single
HTML document in the <head> section. This means that the CSS is
embedded within the <style> tag inside the <head> section of the HTML
file.
➢ How to Use Internal CSS ?
To use internal CSS, include CSS rules within a <style> tag inside the HTML
document’s <head>. Define styles by selecting HTML elements or classes,
and applying styling rules within the tag. All the changes done by the
internal CSS can be applied only to a single web page.
Syntax:
<style>
/* Internal CSS starts here */
</style>
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
/* Internal CSS */
h1 {
color: green;
font-size: 50px;
text-align: center;
}
p{
color: blue;
font-size: 25px;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
<h1>Topper World</h1>
<p>A Computer Science Portal..!</p>
</body>
</html>
©Topperworld
CSS
Output:
➔ Advantages of Internal CSS
⚫ Internal CSS retains styles in the HTML file, avoiding conflicts with other
pages and making easier management of styles at the local level.
⚫ Internal CSS has higher specificity than external CSS, which allows you
to override external styles more easily within the same HTML file.
⚫ Internal CSS reduces HTTP requests, enhancing performance.
⚫ Internal CSS is relatively easy to implement, we can use class and ID
selectors in this style sheet.
➔ Disadvantages of Internal CSS
⚫ Repetition in HTML files.
⚫ Increased file size.
⚫ Reduced code reusability.
⚫ Limited style management across pages.
❖ External CSS
External CSS is used to style multiple HTML pages with a single style
sheet.
External CSS contains a separate CSS file with a .css extension.
The CSS file contains style properties added on selectors (For example
class, id, heading, … etc.).
©Topperworld
CSS
➢ How to Link a CSS File to an HTML File ?
To link a CSS file to an HTML file, use the <link> element within the HTML
file’s <head> section with the rel attribute set to “stylesheet” and
the href attribute specifying the CSS file’s path.
CSS property is written in a separate file with a .css extension and should
be linked to the HTML document using a link tag.
External CSS sets styles for elements once and applies them consistently
across multiple web pages, ensuring a unified design.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div class="main">
<h1 class="TW">
Topper World
</h1>
<p id="Topper ">
A computer science portal
</p>
</div>
</body>
</html>
©Topperworld
CSS
CSS
.main {
text-align: center;
}
.TW {
font-size: 60px;
color: green;
}
#Topper {
font-size: 25px;
color: skyblue;
};
Output:
©Topperworld
CSS
➔ Advantages of External CSS
⚫ Improved maintainability and code organization.
⚫ Enhanced reusability across multiple HTML files.
⚫ Efficient caching and faster page load times.
➔ Disadvantages of External CSS
⚫ Pages may not render correctly until the external CSS is loaded.
⚫ Uploading or linking to multiple CSS files may increase your site’s
download time, affecting its overall performance.
⚫ Large-scale projects may face versioning and caching challenges when
using external CSS
©Topperworld
