Faculty of Engineering Sciences and Technology (FEST)
Bachelor of Technology
Course Name - : Front-end Web Development
Course Code - 23EB4203
Semester – 1st
Introduction to CSS
Types of CSS (Cascading Style Sheets)
1. Inline CSS
Definition:
Inline CSS means writing the CSS directly inside an HTML element’s style attribute.
It applies the style only to that specific element.
Syntax:
<tagname style="property: value;">
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Welcome to CSS</h1>
<p style="font-size: 18px; color: green;">This is styled using Inline CSS.</p>
</body>
</html>
Advantages:
• Very quick for single element styling.
• Useful for testing or debugging.
Disadvantages:
• Not reusable.
• Makes the HTML messy and hard to maintain.
• Difficult to apply the same style to multiple elements.
2. Internal CSS (Embedded CSS)
Definition:
Internal CSS means writing CSS inside the <style> tag in the <head> section of your HTML
document.
It affects only that particular HTML file.
Syntax:
<style>
selector {
property: value;
}
</style>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: darkred;
text-align: center;
}
p{
color: darkgreen;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
Advantages:
• Styles are centralized for that one page.
• Easier to modify than inline CSS.
Disadvantages:
• Cannot be reused for multiple HTML pages.
• Still not efficient for large websites with many pages.
3. External CSS
Definition:
External CSS means writing all the CSS code in a separate .css file and linking it to your
HTML page using the <link> tag.
It is the most common and recommended method for professional web design.
Syntax (in HTML file):
<link rel="stylesheet" href="[Link]">
Example:
HTML File ([Link]):
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This is an example of external CSS styling.</p>
</body>
</html>
CSS File ([Link]):
h1 {
color: purple;
text-align: center;
}
p{
font-size: 18px;
color: darkblue;
}
Advantages:
• Reusable across multiple web pages.
• Clean HTML structure — CSS is separated.
• Easier to maintain and update styles.
• Improves website performance by caching.
Disadvantages:
• Requires an additional file.
• Slight delay in loading the stylesheet (very minimal).
Comparison Table
Feature Inline CSS Internal CSS External CSS
Location Inside the HTML tag Inside <style> tag in Separate .css file
<head>
Scope One element One HTML page Multiple HTML
pages
Ease of Difficult Moderate Easy
Maintenance
Reusability No No Yes
Performance Slower for large sites Medium Best
Example <p <style> p { color:red; } p { color:red; } in
style="color:red;"> </style> [Link]
CSS Selector
1. Class Selector (.classname)
Definition:
A class selector is used to select one or more HTML elements that have the same class
attribute.
It begins with a dot (.) followed by the class name.
Syntax:
.classname {
property: value;
}
Example:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: white;
background-color: darkblue;
padding: 5px;
}
</style>
</head>
<body>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a normal paragraph.</p>
</body>
</html>
Output:
• The first paragraph will have white text on a dark blue background.
• The second paragraph remains unchanged.
You can apply the same class to multiple elements.
2. ID Selector (#idname)
Definition:
The ID selector is used to style a specific element that has a unique ID. It begins with a hash
symbol (#) followed by the ID name.
Syntax:
#idname {
property: value;
}
Example:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
#main-title {
color: darkred;
text-align: center;
font-size: 24px;
}
</style>
</head>
<body>
<h1 id="main-title">Welcome to My Website</h1>
<h2>Subheading (Not styled)</h2>
</body>
</html>
Output:
• The <h1> heading with ID main-title becomes dark red, centered, and large.
• The <h2> remains unchanged.
Important: IDs must be unique — use them for one element per page.
3. Universal Selector (*)
Definition:
The universal selector selects every element on the HTML page. It is represented by an
asterisk (*).
Syntax:
*{
property: value;
}
Example:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
*{
font-family: Arial, sans-serif;
color: darkgreen;
}
</style>
</head>
<body>
<h1>Heading Example</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>
Output:
• All elements (h1, p, div, etc.) use Arial font and dark green color.
Commonly used for resetting or applying global styles.
4. Descendant Selector (Space)
Definition:
The descendant selector selects an element that is inside another element (not necessarily
a direct child).
It uses a space between the parent and child selectors.
Syntax:
parent child {
property: value;
}
Example:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<div>
<p>This paragraph is inside a div.</p>
</div>
<p>This paragraph is outside the div.</p>
</body>
</html>
Output:
• The first paragraph (inside <div>) appears blue and italic.
• The second paragraph (outside <div>) stays normal.
Descendant selectors are very useful for targeting nested elements.
Summary Table
Selector Type Symbol Example Selects
Class Selector . .note { color: red; } Elements with class “note”
ID Selector # #header { text-align: center; } Element with ID “header”
Universal Selector * * { margin: 0; } All elements
Descendant Selector (space) div p { color: blue; } <p> inside <div>