UNIT – IV: Cascading Style Sheets (CSS)
Introduction to CSS (Cascading Style Sheets)
Cascading Style Sheets (CSS) is a styling language used to control the presentation, layout and visual design of HTML documents. While HTML focuses on structuring content, CSS is responsible for determining how that content appears to users. By separating content from design, CSS makes web development more efficient, maintainable and scalable.
One of the major advantages of CSS is the ability to apply consistent styling across multiple web pages using a single external stylesheet. This reduces redundancy and simplifies updates. CSS works by selecting HTML elements and applying property–value pairs, such as color: blue; or font-size: 20px;. It also supports responsive design, allowing layouts to adapt to various screen sizes.
The term “cascading” means that style rules follow a hierarchy, giving priority to more specific rules. Overall, CSS enhances user experience by enabling visually appealing, modern and professional websites.
Example:
<html>
<head>
<style>
h1 { color: red; }
p { font-size: 18px; }
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This paragraph uses CSS styling.</p>
</body>
</html>Features of CSS
CSS offers a wide set of features that make it an essential technology for modern web design:
- Separation of structure and style: Enables designers to manage layout and design independently from HTML content.
- Reusability: External stylesheets allow a single file to control the appearance of an entire website.
- Fine-grained control: Advanced selectors including class selectors, ID selectors and attribute selectors.
- Responsive design: Media queries let pages adapt to desktops, tablets and mobile devices.
- Formatting options: Fonts, colors, spacing, backgrounds, animations and transitions.
- Powerful layout mechanisms: Flexbox and Grid for building complex, responsive layouts efficiently.
- Browser compatibility: Supported by all modern browsers, making it a universal styling solution.
Example Feature – Media Query:
@media screen and (max-width: 600px) {
body { background-color: lightgray; }
}Basic HTML + CSS Example
Here is a simple example showing HTML code with basic CSS applied.
Example – Basic Styling in HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: #333333;
font-size: 16px;
}
/* Responsive feature example */
@media screen and (max-width: 600px) {
h1 {
font-size: 20px;
color: red;
}
}
</style>
</head>
<body>
<h1>CSS Feature Example</h1>
<p>This paragraph demonstrates basic CSS styling applied to HTML elements.</p>
</body>
</html>Core Syntax of CSS
CSS follows a simple but powerful syntax consisting of selectors and declaration blocks:
- A CSS rule begins with a selector that identifies the HTML elements to which the rule applies.
- This is followed by a declaration block, enclosed in curly braces, containing one or more property–value pairs.
- Each property defines what aspect of the element to style, such as color or padding.
- Each value specifies how that property should appear.
- A colon separates properties from values, and semicolons separate multiple declarations.
- Rules can be written inline, internally within a
<style>tag, or externally in a separate stylesheet.
General Syntax:
selector {
property: value;
property: value;
}Example:
p {
color: blue;
font-size: 16px;
}Types of CSS
CSS can be applied in three main ways:
Inline CSS
Applied directly within an HTML element using the style attribute. It is easy to use but not recommended for large projects since it mixes styling with structure.
Internal CSS
Written inside the <style> tag within the <head> section of an HTML document. It is useful when styling is needed for a single page only.
External CSS
Stored in a separate .css file and linked using the <link> tag. This is the most efficient and preferred type, as it maintains consistency across multiple pages and reduces redundancy.
Example – All Three Types:
<!-- Inline CSS -->
<p style="color: green;">Inline Style</p>
<!-- Internal CSS -->
<style>
h1 { color: purple; }
</style>
<!-- External CSS -->
<link rel="stylesheet" href="style.css">Style Sheets and HTML
CSS works alongside HTML by allowing developers to attach multiple stylesheets to enhance visual presentation. HTML provides the structure, while CSS adds design and layout. Style sheets are linked using the <link> tag. HTML elements reference CSS using selectors like class and ID attributes. Classes allow multiple elements to share styling, while IDs uniquely identify a specific element.
Example:
<!-- HTML -->
<p class="note">This is an important note.</p>
<!-- CSS -->
.note {
background-color: yellow;
padding: 10px;
}Style Rule Cascading and Inheritance
Cascading means CSS resolves conflicts based on the specificity of selectors and rule order. Inline styles have highest priority, followed by internal and external styles. More specific selectors override less specific ones. Inheritance allows child elements to adopt certain properties from their parents, such as font-size and color. Layout properties like margin and padding do not inherit by default.
Example:
div { color: blue; } /* inherited */
#special { color: red; } /* more specific */Text Properties
CSS provides text properties like color, font-family, font-size, text-align, text-decoration, font-weight, and line-height. These properties help create readable, attractive text formatting. text-align controls alignment, font-weight creates bold text, and line-height improves spacing.
Example:
p {
color: #333;
font-family: Arial;
font-size: 18px;
text-align: justify;
line-height: 1.6;
}CSS Box Model
The CSS Box Model describes how every element is displayed. It consists of content, padding, border and margin. Padding creates space inside the element, border surrounds it and margin adds space outside. The total size of an element includes all these components.
Example:
div {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 15px;
}Normal Flow Box Layout
Normal flow is the default layout of HTML elements. Block elements stack vertically, while inline elements flow horizontally. Understanding normal flow helps predict page layout before advanced techniques like Flexbox or Grid are applied.
Example:
div {
border: 1px solid gray;
margin: 10px 0;
}Positioning and Other Useful Style Properties
CSS offers five positioning types:
- Static: Follows normal flow.
- Relative: Shifts elements slightly.
- Absolute: Positions elements relative to a containing block.
- Fixed: Attaches elements to the viewport.
- Sticky: Behaves like a mix of relative and fixed.
Example:
#box {
position: absolute;
top: 50px;
left: 100px;
background-color: lightblue;
}Additional useful properties include display, overflow, z-index, and opacity.
Features of CSS3
CSS3 added many advanced features such as:
- Rounded corners (
border-radius) - Gradients (
linear-gradient,radial-gradient) - Box shadows (
box-shadow) - Animations and transitions
- Flexbox and Grid layouts
- Transformations (
transform) - Media queries for responsive design
Example:
.box {
width: 200px;
height: 200px;
background: linear-gradient(red, yellow);
border-radius: 20px;
transition: 0.5s;
}
.box:hover {
transform: scale(1.1);
}Assignment / Practice Questions
- Explain the concept of CSS and its importance in web development.
- Describe the different features of CSS with suitable examples.
- Write the core syntax of CSS and explain its components.
- What are the different types of CSS? Explain with examples.
- Discuss how HTML and CSS work together to create a webpage.
- Explain Cascading and Inheritance in CSS with examples.
- List and explain any five text properties in CSS with code examples.
- Describe the CSS Box Model and illustrate all its components.
- Explain normal flow layout with examples.
- Describe different types of CSS positioning with examples.
- Discuss any six advanced features introduced in CSS3.
- Create a webpage using external CSS that demonstrates text formatting and box model properties.