ROHIT ADINATH SHELKE URN:2024-B-26052006
ASSIGNMENT 3:
Q1. Difference between Internal and External Stylesheets (5 Marks)
De nition:
CSS can be applied in three ways — inline, internal, or external. Internal and external stylesheets
are mainly used to manage styles ef ciently.
Internal Stylesheet:
• Written inside the <style> tag in the <head> section of an HTML le.
• Affects only that speci c HTML page.
• Example:
<style>
• body { background-color: lightblue; }
• h1 { color: darkblue; }
• </style>
•
External Stylesheet:
• Written in a separate .css le and linked using the <link> tag.
• Can style multiple HTML pages at once.
• Example:
<link rel="stylesheet" href="[Link]">
Difference Table:
Feature Internal CSS External CSS
Inside HTML Separate CSS
Location
le le
Reusability One page only Multiple pages
Performance Slower if large Faster (cached)
fi
fi
fi
fi
fi
fi
fi
ROHIT ADINATH SHELKE URN:2024-B-26052006
Maintainabilit
Harder Easier
y
Q2. Basic Structure and Components of Flexbox Layout Model (5 Marks)
De nition:
Flexbox (Flexible Box Layout) is a CSS layout model designed for aligning and distributing space
within a container.
Structure:
1. Flex Container – The parent element with display: flex;.
2. Flex Items – The child elements inside the container.
Key Properties:
• display: flex; → Enables exbox.
• flex-direction: → Sets direction (row, column).
• justify-content: → Aligns items horizontally (center, space-between).
• align-items: → Aligns items vertically (center, flex-start).
• flex-wrap: → Controls wrapping of items.
Example:
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
Q3. Media Queries for Responsive Designs (5 Marks)
De nition:
Media queries are CSS techniques used to apply styles based on device features such as screen
width, height, or orientation.
Syntax:
@media (condition) {
/* CSS rules */
}
fi
fi
fl
ROHIT ADINATH SHELKE URN:2024-B-26052006
Use:
They help create responsive websites that adjust layout across devices.
Example:
body {
background-color: white;
}
@media (max-width: 600px) {
body {
background-color: lightgrey;
}
}
✅ On small screens (width ≤ 600px), the background becomes light grey.
Purpose:
• Adjusts font sizes, layouts, and images for phones, tablets, and desktops.
Q4. Advantages of CSS Frameworks like Bootstrap and Foundation (5 Marks)
De nition:
CSS frameworks are prewritten collections of CSS and JS les that help design responsive,
consistent web layouts quickly.
Advantages:
1. Faster Development: Ready-made grid systems and components.
2. Responsive Design: Built-in media queries for different screen sizes.
3. Consistency: Uniform look across browsers.
4. Customization: Easy to modify variables (colors, fonts).
5. Cross-browser Compatibility.
Examples:
• Bootstrap: For quick layouts, responsive navbars, buttons, and forms.
• Foundation: More exible and semantic for larger projects.
When to Use:
• Use frameworks → for quick projects or prototypes.
fi
fl
fi
ROHIT ADINATH SHELKE URN:2024-B-26052006
• Use custom CSS → when you need unique designs or lightweight performance.
Q5. Creating Simple CSS Animations (5 Marks)
De nition:
CSS animations allow elements to change styles smoothly over time using keyframes.
Key Properties:
• animation-name: Name of animation.
• animation-duration: How long the animation runs.
• animation-timing-function: Speed curve (ease, linear, ease-in).
• animation-iteration-count: Number of times animation repeats.
Example (Hover Effect):
@keyframes glow {
from { background-color: lightblue; }
to { background-color: skyblue; }
}
button {
animation-name: glow;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
button:hover {
background-color: dodgerblue;
}
Explanation:
• The button smoothly changes its background color.
• The hover effect triggers when the user moves the mouse over it.
fi