UNIT :2(Web Designing)
Q1) What is CSS and what are the ways to create CSS, CSS Properties,CSS
Styling?
CSS (Cascading Style Sheets) is a language used to style the appearance of a webpage. It tells the
browser how HTML elements (like text, buttons, images, etc.) should look. Think of HTML as the
structure or skeleton, and CSS as the clothing or design that makes it attractive.
Ways to Create CSS
1. Inline CSS
o Add CSS directly inside the HTML element using the style attribute.
o Best for quick, one-time styling.
2. Internal CSS
o Add a <style> tag in the <head> section of the HTML file.
o Useful for styling a single page.
<head>
<style>
h1 {
color: green; font-size: 30px;
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
3. External CSS
o Link an external CSS file to your HTML using the <link> tag.
o Best for large projects to maintain consistent styling across multiple pages.
4. CSS in JavaScript (Dynamic Styling)
o Use JavaScript to apply styles dynamically.
CSS Properties
CSS properties are rules that define how an element should look. For example:
Color: Changes text or background color.
Font-size: Makes text bigger or smaller.
Margin: Adds space outside an element.
Padding: Adds space inside an element.
Border: Creates lines around an element.
CSS Styling Basics
Here are common areas where CSS is used:
1. Background Styling
You can change the background of any element (color, image, etc.):
body {
background-color: lightblue;
div {
background-image: url("image.jpg"); background-size: cover;
2. Text Formatting
You can control how text appears, such as its color, size, and alignment:
h1 {
color: red; font-size: 32px; text-align: center;
3. Controlling Fonts
CSS lets you choose the type of font, size, and style:
p{
font-family: "Arial", sans-serif; font-size: 18px; font-weight: bold; font-style: italic;
4. Spacing and Borders
You can control the space around and inside an element or add borders:
div {
margin: 20px; padding: 10px;
div {
border: 2px solid black; border-radius: 10px;
}
Q2) CSS Working with Block Elements and Objects
Block elements are HTML elements that take up the full width of the browser (like a block).
Examples: <div>, <p>, <h1> to <h6>, <ul>, and <section>.
CSS can style block elements to control:
1. Size (width, height)
2. Position (centered, left, right, etc.)
3. Spacing (margin, padding)
4. Appearance (background, border, etc.)
Example: A Block Element Without CSS
<div>
This is a block element.
</div>
Example: Styling the Block Element with CSS
div {
width: 50%; height: 100px; background-color: lightgray; margin: 20px auto;
CSS Works with Objects (Like Images or Buttons)
CSS also styles smaller objects like images and buttons, which can behave as inline-block elements (they
take the size of their content but respect block properties).
Example: Styling an Image Object
.html
<img src="image.jpg" alt="Example" />
.css
img {
width: 200px; height: auto; border: 5px solid blue; margin: 10px;
}
Example: Styling a Button Object
.html
<button>Click Me</button>
.css
button {
background-color: green; color: white; padding: 10px 20px;
border-radius: 5px; border: none; cursor: pointer;
Q3) Working of CSS with Lists and Tables.?
1. Styling Lists
CSS can be used to style ordered (<ol>) and unordered (<ul>) lists. You can control bullet styles, spacing,
and text appearance.
<ul class="custom-list">
<li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
</ul>
<style>
.custom-list {
list-style-type: square; padding: 10px; margin: 20px;
.custom-list li {
color: blue; font-size: 18px;
</style>
2. Styling Tables
CSS can style table borders, text alignment, and spacing between rows and columns.
<table class="styled-table">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
<style>
.styled-table {
border-collapse: collapse; width: 100%;
.styled-table th, .styled-table td {
border: 1px solid black; padding: 10px; text-align: left;
.styled-table th {
background-color: #f2f2f2;
</style>
Q4) Difference Between Class and ID in CSS
Q5) What is Box Model?
CSS Box Model
The box model is the structure of how every HTML element is displayed. It has 4 parts:
1. Content: The actual text or image inside the element.
2. Padding: Space between content and border.
3. Border: The line around the padding and content.
4. Margin: Space outside the border, separating elements.
Example Code: .html
<div class="box">Hello, World!</div>
<style>
.box {
width: 200px; padding: 20px; border: 5px solid black; background-color: lightblue;
</style>
Explanation of Properties
1. Border Properties: Define the thickness, style, and color of the border
2. Padding Properties: Creates space inside the border.
3. Margin Properties: Creates space outside the border
Q6) What is Grouping, Dimension , Display, Positioning?
These are key concepts in CSS that control the structure, appearance, and layout of elements on a
webpage.
1. Grouping in CSS
CSS grouping allows you to apply the same styles to multiple elements at once by separating their
selectors with a comma.
Example:.html
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<style>
h1, p {
color: blue; font-family: Arial, sans-serif;
</style>
2. Dimensions in CSS
Dimensions set the height and width of an element's content box. They can be defined in units like px, %,
em, vh, etc.
Example: .html
<div class="box">This is a box</div>
<style>
.box {
width: 300px; height: 150px; }
</style>
3. Display in CSS
The display property controls how an element is rendered on the page.
Common Values:
block: Takes up the full width of the container.
inline: Stays in line with other elements, like text.
inline-block: Inline like text but allows setting width/height.
none: Hides the element.
Example: .html
<div class="block">Block Element</div>
<span class="inline">Inline Element</span>
<style>
.block {
display: block; background: lightblue; padding: 10px;
.inline {
display: inline; background: lightgreen; padding: 5px;
</style>
4. Positioning in CSS
The position property controls how an element is positioned in the document.
Common Values:
static: Default position, flows naturally in the document.
relative: Positioned relative to its normal position.
absolute: Positioned relative to the nearest positioned ancestor.
fixed: Positioned relative to the viewport (does not scroll with the page).
sticky: Switches between relative and fixed based on scroll.
Example:
<div class="relative">Relative Position</div>
<div class="absolute">Absolute Position</div>
<style>
.relative {
position: relative;top: 20px; left: 20px; background: lightpink; padding: 10px;
}
.absolute {
position: absolute;
// same content of .relative
</style>
Q7) What is Floating, Align, Pseudo Class, Navigation Bar, Image Sprites,
Attribute Selector?
1. Floating in CSS
The float property is used to position an element to the left or right within its container, allowing other
elements to wrap around it. It is commonly used for creating layouts, such as text wrapping around an
image.
Example:.html
<img src="image.jpg" class="float-left" alt="Image">
<p>This text will wrap around the floated image on the left.</p>
<style>
.float-left {
float: left; /* Floats the image to the left */
margin-right: 20px; /* Adds space between the image and text */
</style>
2. Align in CSS
The text-align property is used to set the horizontal alignment of inline elements inside a block element,
like text or images.
Example: .html
<div class="centered">
<p>This text is centered horizontally.</p>
</div>
<style>
.centered {text-align: center; }
</style>
Common Values:
left: Aligns content to the left.
right: Aligns content to the right.
center: Centers content.
justify: Stretches content to fill the container
3. Pseudo-classes in CSS
A pseudo-class is a keyword added to a selector that specifies a special state of the element. It is often
used to define how elements should look when they are in certain states, like when hovered over or
clicked.
Example:.html
<a href="#" class="link">Hover over me!</a>
<style>
.link:hover {
color: red; /* Changes color when hovered */
</style>
Common Pseudo-classes:
:hover: Activates when the element is hovered over.
:active: Activates when the element is clicked.
:focus: Activates when the element is in focus (e.g., input fields).
:first-child: Targets the first child element of a parent.
4. Navigation Bar in CSS
A navigation bar (nav bar) is a menu of links that allows users to navigate between different sections or
pages on a website. It is commonly styled with display: flex or inline-block to align items horizontally.
Example:
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li> <li><a href="#">About</a></li>
<li><a href="#">Services</a></li> <li><a href="#">Contact</a></li>
</ul>
</nav>
<style>
.navbar ul {
list-style-type: none; padding: 0;
.navbar li {
display: inline-block; margin-right: 20px;
.navbar a {
text-decoration: none; color: black;
.navbar a:hover {
color: red;
</style>
5. Image Sprites in CSS
Image sprites combine multiple images into a single image file to reduce the number of HTTP requests,
which improves page load time. Specific sections of the sprite are shown by adjusting the background-
position property.
Example:
<div class="sprite-icon"></div>
<style>
.sprite-icon {
width: 50px; height: 50px;
background-image: url('sprite.png'); background-position: 0px 0px;
</style>
In this case, sprite.png might contain several icons, and you adjust the background-position to show
different parts of it for different elements.
6. Attribute Selector in CSS
The attribute selector allows you to select elements based on the presence or value of an attribute.
Example:
<input type="text" placeholder="Enter your name" />
<input type="password" placeholder="Enter password" />
<style>
input[type="text"] {
border: 1px solid blue;
input[type="password"] {
border: 1px solid red;
</style>
Common Syntax:
[attribute]: Selects elements with the specified attribute, regardless of value.
[attribute="value"]: Selects elements with a specific attribute value.
[attribute~="value"]: Selects elements whose attribute contains a specific word.
Q8) What are the CSS Color?
n CSS, the color property is used to define the color of text and text-related elements. It can be applied
to various HTML elements like paragraphs, headings, links, and more. CSS supports different ways to
specify colors, which include:
1. Color Names:
You can use predefined color names that are supported by all browsers. There are 147 color names, such
as red, blue, green, black, white, etc.
Example:
h1 {
color: red;
2. RGB (Red, Green, Blue):
Colors can be specified using the RGB model, which defines colors by specifying the amount of red,
green, and blue light. The values range from 0 to 255.
Example:
p{
color: rgb(255, 0, 0); /* Red color */
In this case, rgb(255, 0, 0) means full red, no green, and no blue.
3. RGBA (Red, Green, Blue, Alpha):
The RGBA color model is similar to RGB but adds an alpha channel to control opacity (transparency). The
alpha value can range from 0 (completely transparent) to 1 (completely opaque).
Example:
div {
color: rgba(0, 128, 0, 0.5); /* Semi-transparent green */
4. Hexadecimal Colors:
You can specify colors in a hexadecimal format, starting with # followed by six characters (0-9, A-F)
representing the red, green, and blue components in a base-16 (hex) system.
Example:
h2 {
color: #0000FF; /* Blue color */
5. HSL (Hue, Saturation, Lightness):
The HSL color model defines colors by three components:
Hue (H): The type of color (measured in degrees from 0 to 360).
Saturation (S): The intensity of the color (0% to 100%).
Lightness (L): The lightness of the color (0% to 100%).
Example:
h3 {
color: hsl(120, 100%, 50%); /* Green color */
6. HSLA (Hue, Saturation, Lightness, Alpha):
HSLA is like HSL but adds an alpha channel for opacity.
Example:
footer {
color: hsla(240, 100%, 50%, 0.3); /* Semi-transparent blue */
