Q)Client-Server Computing Explained

1. What is Client-Server Computing?

Client-server computing is a network architecture where two
types of computers work together:
• Client: A device or software that requests services or
resources.
• Server: A powerful device or software that provides
those services or resources.
Example:
• When you use a browser (client) to access a website,
your browser sends a request to the web server hosting
the website. The server processes the request and
sends back the data (e.g., HTML, CSS files).
Hindi Style (English Alphabets):
Client-server computing ek aisa architecture hai jisme do
components milke kaam karte hain:
• Client: Jo service ya resource maangta hai.
• Server: Jo service ya resource provide karta hai.
Example: Jab aap browser se ek website kholte ho, toh
browser client hai aur website ka server request ka jawab
deta hai.

2. How Does Client-Server Computing Work?

 1. Request: The client sends a request to the server over a
network (like the internet).
2. Processing: The server processes the request and
retrieves the necessary data.
3. Response: The server sends the data back to the client.
4. Display: The client displays the response to the user.
Example:
• You log in to Facebook.
o The client (your app/browser) sends your username
and password to the Facebook server.
o The server checks your details in its database and
sends back the homepage if your details are
correct.
Hindi Style (English Alphabets):
1. Request: Client server ko request bhejta hai (internet ke
zariye).
2. Processing: Server us request ko process karta hai aur
data retrieve karta hai.
3. Response: Server response client ko wapas bhejta hai.
4. Display: Client data ko user ko dikhata hai.
Example:
 • Jab aap Facebook login karte ho, app/browser request
bhejta hai.
• Server database check karta hai aur homepage wapas
bhejta hai agar details sahi hain.

3. Types of Client-Server Computing

1. One-Tier Architecture:
o The client and server are on the same machine.
o Example: Standalone applications like Microsoft
Word.
2. Two-Tier Architecture:
o The client and server are on separate machines.
o Example: Banking systems where an app
communicates with a database server.
3. Three-Tier Architecture:
o Involves three layers:
▪ Client
▪ Application Server
▪ Database Server
o Example: E-commerce websites like Amazon.
4. N-Tier Architecture:
 o Has multiple layers for scalability and modularity.
o Example: Complex systems like Netflix.
Hindi Style (English Alphabets):
1. One-Tier Architecture:
o Client aur server ek hi machine pe hote hain.
o Example: MS Word jaisa standalone software.
2. Two-Tier Architecture:
o Client aur server alag-alag machines pe hote hain.
o Example: Banking apps.
3. Three-Tier Architecture:
o Isme teen layers hoti hain:
▪ Client
▪ Application Server
▪ Database Server
o Example: Amazon jaise e-commerce websites.
4. N-Tier Architecture:
o Multiple layers hoti hain scalability ke liye.
o Example: Netflix jaise complex systems.

4. Example of Client-Server Model

 • Client: Your smartphone or computer using Gmail.
• Server: Google’s email servers store your emails and
send/receive them when you use Gmail.
Process:
1. You open Gmail (client).
2. Gmail sends a request to Google’s server for your inbox.
3. Server processes and sends back your emails.
4. You see the emails on your screen.
Hindi Style (English Alphabets):
• Client: Aapka smartphone ya computer jo Gmail use
karta hai.
• Server: Google ka email server jo aapke emails store
karta hai aur bhejta hai.
Process:
1. Aap Gmail kholte ho (client).
2. Gmail server ko inbox ke liye request bhejta hai.
3. Server request process karta hai aur emails bhejta hai.
4. Aapke screen pe emails dikhte hain.
Q) What is HTML?
Definition
HTML (HyperText Markup Language) is the standard
language used to create and design web pages. It tells a
browser how to display content like text, images, links, and
videos on a webpage.
Simple Explanation
HTML is like the "skeleton" of a website. Just like our body
needs a skeleton for structure, a webpage needs HTML to
structure and organize its content.
Example:
If a webpage is like a book, HTML is the language that
defines the chapters, headings, paragraphs, and images in it.
Hindi Style (English Alphabets):
HTML (HyperText Markup Language) ek standard language
hai jo webpages banane ke liye use hoti hai. Yeh browser ko
batata hai ki content (jaise text, images, links) kaise dikhana
hai.
Simple Explanation:
HTML ek website ka "skeleton" hai. Jaisa humare sharir ko
structure ke liye skeleton chahiye, waise hi webpage ko
structure ke liye HTML chahiye.
Example:
Agar ek webpage ek kitab hai, toh HTML us kitab ke
chapters, headings, paragraphs, aur images define karta hai.

Why is HTML Important?

1. Foundation of Websites
Every website starts with HTML. Without HTML, a browser
wouldn't know how to display anything.
2. Easy to Learn
HTML is beginner-friendly and forms the base for learning
other web development languages like CSS and JavaScript.
3. Compatibility
HTML works on all browsers, so you can build websites
accessible to everyone.
4. Search Engines
Search engines like Google use HTML tags to understand the
content of a webpage, which helps with SEO (Search Engine
Optimization).
Hindi Style (English Alphabets):
1. Foundation of Websites: Har website ki shuruaat HTML
se hoti hai. HTML ke bina browser kuch dikhana nahi jaanta.
2. Easy to Learn: HTML seekhna asaan hai aur yeh CSS aur
JavaScript jaise languages seekhne ke liye base banata hai.
3. Compatibility: HTML har browser pe kaam karta hai, isse
websites sabke liye accessible banti hain.
4. Search Engines: Google jaise search engines HTML tags
use karke webpage ka content samajhte hain, jo SEO mein
help karta hai.

Basic Example of HTML

Here’s a simple HTML code that creates a basic webpage:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage using HTML.</p>
<a href="https://www.google.com">Click here to visit
Google</a>
</body>
</html>
Explanation of the Code
1. <!DOCTYPE html>: Declares that this is an HTML
document.
2. <html>: The root of the webpage.
3. <head>: Contains metadata like the title of the page.
4. <title>: Sets the title of the webpage (appears on the
browser tab).
5. <body>: Contains the visible content of the webpage.
6. <h1>: A heading tag for the title.
7. <p>: A paragraph tag for text.
8. <a>: Creates a hyperlink (a clickable link).
Output
• Heading: "Welcome to My Website"
• Paragraph: "This is a simple webpage using HTML."
• Link: A clickable link to Google.

Hindi Style (English Alphabets):

Basic Example of HTML:
Yeh ek simple code hai jo ek basic webpage banata hai:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Meri Pehli Website</title>
</head>
<body>
<h1>Meri Website Mein Swagat Hai</h1>
<p>Yeh ek simple HTML webpage hai.</p>
<a href="https://www.google.com">Google jaane ke liye
yahaan click karein</a>
</body>
</html>
Code ka Explanation:
1. <!DOCTYPE html>: Yeh batata hai ki document HTML ka
hai.
2. <html>: Webpage ka root element hai.
3. <head>: Metadata rakhta hai jaise title.
4. <title>: Browser tab mein dikhne wala title set karta hai.
5. <body>: Jo content user ko dikhai dega, wo yahan hota
hai.
 6. <h1>: Heading ke liye tag.
7. <p>: Paragraph ke liye tag.
8. <a>: Ek hyperlink banata hai (click karne wala link).
Output:
• Heading: "Meri Website Mein Swagat Hai"
• Paragraph: "Yeh ek simple HTML webpage hai."
• Link: Ek clickable link Google ke liye.

Why Learn HTML First?

1. Easy Start: It’s the easiest coding language for
beginners.
2. Foundation for Web Development: Learning HTML
opens the door to advanced topics like CSS, JavaScript,
and frameworks.
3. Practical Use: You can create webpages and even your
own portfolio.
Hindi Style (English Alphabets):
1. Easy Start: Beginners ke liye sabse asaan coding
language hai.
2. Foundation for Web Development: HTML seekhne ke
baad aap CSS, JavaScript aur frameworks jaise
advanced topics seekh sakte ho.
 3. Practical Use: Aap webpages aur apna khud ka
portfolio bana sakte ho.

Q) HTML

HTML (HyperText Markup Language) uses tags to structure

and display content on the web. Tags are enclosed in angle
brackets < > and often come in pairs: an opening tag <tag>
and a closing tag </tag>. Some tags are self-closing,
meaning they don’t require a closing tag.
Here's a categorized list of common HTML tags:

1. Basic Structure Tags

These define the skeleton of an HTML document:
• <html>: Defines the HTML document.
• <head>: Contains metadata (not visible to users).
• <title>: Sets the page's title (shown in the browser tab).
• <body>: Contains the content displayed on the
webpage.
2. Text Formatting Tags
Used to style or format text:
• <h1> to <h6>: Headings, <h1> is the largest, <h6> is the
smallest.
• <p>: Paragraph.
• <b> or <strong>: Bold text.
• <i> or <em>: Italic text.
• <u>: Underlined text.
• <small>: Smaller text.
• <mark>: Highlighted text.
• <br>: Line break (self-closing).
• <hr>: Horizontal line (self-closing).

3. Links and Media

• <a>: Anchor tag to create hyperlinks.
html
CopyEdit
<a href="https://example.com">Visit Example</a>
• <img>: Adds images (self-closing).
html
CopyEdit
<img src="image.jpg" alt="Description of image">
• <video>: Embeds videos.
html
CopyEdit
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
• <audio>: Embeds audio.
html
CopyEdit
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>

4. Lists
• Ordered list (numbered): <ol>, with <li> for each item.
html
CopyEdit
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
• Unordered list (bulleted): <ul>, with <li> for each item.
html
CopyEdit
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

5. Tables
Used to create tables:
html
CopyEdit
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

6. Forms
Used to collect user inputs:
html
CopyEdit
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

7. Semantic Tags
These improve the meaning of content:
• <header>: Defines a header.
• <footer>: Defines a footer.
 • <section>: Defines sections of content.
• <article>: Represents an article.
• <nav>: Navigation links.
• <aside>: Sidebar or related content.
• <main>: Main content of the page.

8. Multimedia and Interactive Tags

• <iframe>: Embeds external content (like YouTube
videos).
html
CopyEdit
<iframe src="https://example.com"></iframe>
• <canvas>: For drawing graphics using JavaScript.
• <svg>: Scalable Vector Graphics for shapes and
drawings.

1. XML: Document Type Definition (DTD)

What is DTD?
• DTD stands for Document Type Definition.
 • It defines the rules and structure for an XML
document.
• DTD specifies which elements, attributes, and their
relationships are allowed in the XML file. It ensures the
XML is valid (follows the rules).
Example of DTD
a) Standalone DTD (Internal DTD)
The DTD is embedded inside the XML file:
xml
CopyEdit
<!DOCTYPE note [
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Ayush</to>
<from>Shobhit</from>
<heading>Reminder</heading>
<body>Don't forget the project meeting!</body>
</note>
b) External DTD
The DTD is defined in a separate file:
File: note.dtd
xml
CopyEdit
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
File: note.xml
xml
CopyEdit
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Ayush</to>
<from>Shobhit</from>
<heading>Reminder</heading>
<body>Don't forget the project meeting!</body>
</note>
Why Use DTD?
• To ensure the XML file has a proper structure.
• Makes it easier to share and validate XML documents.

Q). XML Schemas

What is XML Schema?

English:
XML Schema is like a rulebook for your XML file. It
defines:
1. What tags (elements) are allowed.
2. What type of data (e.g., text, numbers, dates) each
tag can contain.
3. Whether a tag is required or optional.
It is more advanced and powerful than DTD because:
• It supports data types (like numbers, strings, etc.).
• It is written in XML format, so it’s easier to
understand.
Hindi (WhatsApp style):
XML Schema ek rulebook ki tarah hai jo batata hai ki:
 1. XML file me kaunse tags (elements) allowed hain.
2. Har tag ke andar kaunsa data (e.g., text, number,
date) hoga.
3. Koi tag zaruri hai ya optional.
Yeh DTD se zyada advanced hai kyunki:
• Data types ko support karta hai (e.g., numbers,
strings, etc.).
• Yeh XML ke format me likha jata hai, jo samajhne me
asaan hota hai.

Example of XML Schema

Schema File: note.xsd
xml
CopyEdit
<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
 <xs:element name="from" type="xs:string"/>
<xs:element name="message" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
XML File: note.xml
xml
CopyEdit
<note xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"
xsi:noNamespaceSchemaLocation="note.xsd">
<to>Ayush</to>
<from>Shobhit</from>
<message>Reminder for project meeting.</message>
</note>

Why Use XML Schema?

English:
1. Ensures data is in the correct format (e.g., numbers
for age).
 2. Allows specifying optional or mandatory fields.
3. Supports namespaces for better organization.
4. Better integration with modern tools and software.
Hindi (WhatsApp style):
1. Data ka format sahi ensure karta hai (jaise, age me
sirf number).
2. Batata hai kaunsa field zaruri hai aur kaunsa
optional.
3. Namespace ko support karta hai, jo organization
better banata hai.
4. Modern tools aur software ke saath better work karta
hai.

Q) What are Object Models?

English:
Object Models are representations of data in an XML
document. These models help you interact with XML data in
a structured way. They allow you to access, modify, and
navigate the elements of an XML document as if they were
objects in a program.
In simpler terms, object models convert XML data into a
format that your program can easily work with. There are two
main types of object models for processing XML:
1. DOM (Document Object Model)
2. SAX (Simple API for XML)

1. DOM (Document Object Model)

English:
DOM is a way to load the entire XML document into
memory as a tree-like structure, with each XML element as
a node in the tree. This makes it easy to access, modify, or
delete any part of the XML document.
How DOM works:
• Tree structure: The entire XML file is loaded into
memory, and it is represented as a tree of nodes (like
branches and leaves).
• Read and Write: You can modify or update the XML
content.
Example of DOM:
xml
CopyEdit
<person>
<name>Ayush</name>
<age>21</age>
<email>[email protected]</email>
</person>
In DOM, this XML would be represented as a tree with the
following structure:
less
CopyEdit
person
├── name (Ayush)
├── age (21)
└── email ([email protected])
English Example with JavaScript:
javascript
CopyEdit
// Parsing the XML with DOMParser
const xmlString =
`<person><name>Ayush</name><age>21</age><email>ay
[email protected]</email></person>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString,
"application/xml");
// Accessing XML content
console.log(xmlDoc.getElementsByTagName("name")[0].tex
tContent); // Output: Ayush
Hindi (WhatsApp style):
DOM ek tarika hai jisme poora XML document ko memory
mein load kiya jata hai aur usse ek tree-like structure mein
represent kiya jata hai. Har XML element ko ek node ke roop
mein socha jata hai. Isse aap XML document ke kisi bhi hisse
ko easily access, modify, ya delete kar sakte hain.
DOM kaise kaam karta hai:
• Tree structure: Poora XML file memory mein load hota
hai, aur woh tree jaisa dikhta hai.
• Read aur Write: Aap XML content ko modify ya update
kar sakte hain.
DOM Example (JavaScript):
javascript
CopyEdit
// XML ko parse karna DOMParser ke saath
const xmlString =
`<person><name>Ayush</name><age>21</age><email>ay
[email protected]</email></person>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString,
"application/xml");

// XML content ko access karna

console.log(xmlDoc.getElementsByTagName("name")[0].tex
tContent); // Output: Ayush

2. SAX (Simple API for XML)

English:
SAX is an event-driven, read-only model that reads the XML
document line by line (or element by element) and
processes it as it goes. It’s faster and more memory-
efficient than DOM but cannot modify the document. SAX
is better for large XML files.
How SAX works:
• Event-driven: As SAX reads the XML, it triggers events
like startElement, endElement, characters, etc., which
you can handle with custom code.
• No tree structure: Unlike DOM, SAX doesn't build a
tree. It processes the XML sequentially.
Example of SAX:
xml
CopyEdit
<person>
<name>Ayush</name>
<age>21</age>
<email>[email protected]</email>
</person>
In SAX, this XML would be processed line-by-line:
1. Start with <person>
2. Read <name>Ayush</name>
3. Process content inside <name>
4. Continue to <age>21</age>
5. Process content inside <age>
6. Continue to <email>[email protected]</email>
7. Finish with </person>
English Example with Python (SAX):
python
CopyEdit
import xml.sax

class MyHandler(xml.sax.ContentHandler):
def startElement(self, name, attrs):
 print(f"Start Element: {name}")
def characters(self, content):
print(f"Content: {content.strip()}")
def endElement(self, name):
print(f"End Element: {name}")

parser = xml.sax.make_parser()
parser.setContentHandler(MyHandler())
xml_data =
"""<person><name>Ayush</name><age>21</age><email>a
[email protected]</email></person>"""
import io
parser.parse(io.StringIO(xml_data))
Output:
mathematica
CopyEdit
Start Element: person
Start Element: name
Content: Ayush
End Element: name
Start Element: age
Content: 21
End Element: age
Start Element: email
Content: [email protected]
End Element: email
End Element: person
Hindi (WhatsApp style):
SAX ek event-driven, read-only model hai jo XML document
ko line-by-line (ya element-by-element) padhke process
karta hai. Yeh DOM se zyada fast aur memory-efficient hai,
lekin XML ko modify nahi kar sakta. SAX large XML files ke
liye accha hai.
SAX kaise kaam karta hai:
• Event-driven: Jab SAX XML ko padhta hai, to events
trigger hoti hain jaise startElement, endElement,
characters, etc., jinko aap handle kar sakte hain apne
code se.
• No tree structure: DOM ke unlike, SAX XML ko
sequentially process karta hai, bina tree banaye.
SAX Example (Python):
python
CopyEdit
import xml.sax
class MyHandler(xml.sax.ContentHandler):
def startElement(self, name, attrs):
print(f"Start Element: {name}")
def characters(self, content):
print(f"Content: {content.strip()}")
def endElement(self, name):
print(f"End Element: {name}")

parser = xml.sax.make_parser()
parser.setContentHandler(MyHandler())
xml_data =
"""<person><name>Ayush</name><age>21</age><email>a
[email protected]</email></person>"""
import io
parser.parse(io.StringIO(xml_data))
Output:
mathematica
CopyEdit
Start Element: person
Start Element: name
Content: Ayush
End Element: name
Start Element: age
Content: 21
End Element: age
Start Element: email
Content: [email protected]
End Element: email
End Element: person

Comparison: DOM vs SAX

Feature DOM SAX
Uses less memory
Memory Uses more memory
(processes line-by-
Usage (entire document)
line)
Speed Slower for large files Faster for large files
Cannot modify the
Modification Can modify the XML
XML
Small to medium
Best For Large files
files
Summary
English:
• DOM is a memory-intensive, tree-based model that
loads the entire document into memory and allows for
read/write operations.
• SAX is an event-driven model that reads the document
sequentially, making it more memory-efficient and
faster for large files but doesn’t allow modifications.
Hindi (WhatsApp style):
• DOM ek memory-intensive, tree-based model hai jo
poora document memory mein load karta hai aur
read/write operations allow karta hai.
• SAX ek event-driven model hai jo document ko
sequentially padhta hai, isliye yeh large files ke liye
zyada memory-efficient aur fast hai, lekin modifications
allow nahi karta.

UNIT -2 (CSS)
Q) What is CSS? (Cascading Style Sheets)
CSS is a language used to style and format the layout of web
pages. It controls the design, such as colors, fonts, spacing,
and positioning of elements on a webpage. Without CSS,
websites would look plain and unstyled.
Types of CSS
There are three types of CSS:
1. Inline CSS
o Written directly in an HTML element using the style
attribute.
o Example:
html
CopyEdit
<h1 style="color: blue;">Hello World</h1>
2. Internal CSS
o Defined in the <style> tag inside the <head>
section of an HTML document.
o Example:
html
CopyEdit
<html>
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
3. External CSS
o Written in a separate .css file, linked to the HTML
file.
o Example:
html
CopyEdit
<link rel="stylesheet" href="styles.css">

Properties in CSS
CSS properties define how the elements should be styled.
Here are some common properties:
1. Color
o Defines the color of text or background.
o Example:
css
CopyEdit
p{
color: green;
}
2. Font-family
o Specifies the font of text.
o Example:
css
CopyEdit
h1 {
font-family: Arial, sans-serif;
}
3. Margin
o Defines the space outside the element.
 o Example:
css
CopyEdit
div {
margin: 20px;
}
4. Padding
o Defines the space inside the element, between the
content and border.
o Example:
css
CopyEdit
div {
padding: 10px;
}
5. Background-color
o Sets the background color of an element.
o Example:
css
CopyEdit
body {
background-color: lightblue;
}
6. Border
o Adds a border around an element.
o Example:
css
CopyEdit
p{
border: 2px solid black;
}

Example of a Simple Webpage with CSS

Here’s an example of a basic webpage with HTML and CSS:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Webpage</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: darkblue;
font-family: 'Arial', sans-serif;
}
p{
color: green;
font-size: 16px;
border: 2px solid black;
padding: 10px;
}
</style>
</head>
<body>
 <h1>Welcome to My Webpage!</h1>
<p>This is a simple webpage styled with CSS.</p>
</body>
</html>

Basic Things to Know About CSS

1. Selectors
o Used to select the HTML element(s) to style. For
example:
▪ p {} targets all <p> tags.
▪ #id {} targets an element with a specific id.
▪ .class {} targets all elements with a specific
class.
2. Cascading Rule
o CSS stands for "Cascading" because multiple rules
can apply to a single element. The rules "cascade"
from the most specific to the most general.

WhatsApp-style Hindi Explanation

CSS kya hai?
CSS ek language hai jo web pages ko style karne ke liye use
hota hai. Matlab, jo elements (jaise text, images, buttons)
tum dekhte ho, unka design control karta hai CSS. Jaise
color, font, spacing, aur positioning.
CSS ke types:
1. Inline CSS:
HTML mein hi directly likha jata hai style attribute se.
Example:
<h1 style="color: blue;">Hello World</h1>
2. Internal CSS:
HTML ke <head> section mein likha jata hai <style> tag
ke andar.
Example:
html
CopyEdit
<style>
h1 {
color: red;
}
</style>
3. External CSS:
Alag se ek .css file mein likha jata hai aur HTML ke saath
link hota hai.
Example:
<link rel="stylesheet" href="styles.css">
CSS Properties:
1. Color: Text ka rang set karta hai.
2. Font-family: Text ka font set karta hai.
3. Margin: Element ke bahar ka space define karta hai.
4. Padding: Element ke andar ka space define karta hai.
5. Background-color: Element ka background color set
karta hai.
6. Border: Element ke aas-paas ek border create karta hai.
CSS ka basic knowledge:
• Selectors se hum decide karte hain kaunse HTML
elements ko style karna hai.
• Cascading rule se agar multiple CSS rules ek hi
element pe lag rahe hain, toh sabse specific rule kaafi
hota hai.

Q) CSS Styling

1. Background Styling
In CSS, you can style the background of an element using
several properties, including color, images, gradients, and
more. Let’s look at the most commonly used background
properties:
• background-color
Sets the background color of an element.
css
CopyEdit
div {
background-color: lightblue;
}
• background-image
Sets an image as the background of an element. You
can use URLs for external images or local file paths.
css
CopyEdit
div {
background-image: url('background.jpg');
}
• background-size
Controls the size of the background image.
css
CopyEdit
div {
 background-image: url('background.jpg');
background-size: cover; /* Makes sure the image covers the
whole area */
}
• background-repeat
Determines whether the background image should
repeat.
css
CopyEdit
div {
background-image: url('background.jpg');
background-repeat: no-repeat; /* Prevents image repetition
*/
}
• background-position
Positions the background image.
css
CopyEdit
div {
background-image: url('background.jpg');
background-position: center; /* Positions image at the
center */
}
• background
A shorthand property to combine all background-
related properties.
css
CopyEdit
div {
background: lightblue url('background.jpg') no-repeat
center/cover;
}

2. Text Formatting
CSS allows you to format the text in many ways, including
controlling font style, size, alignment, color, and more.
• font-family
Specifies the font type for text. You can list multiple
fonts as fallbacks.
css
CopyEdit
p{
font-family: 'Arial', sans-serif;
}
 • font-size
Controls the size of the text.
css
CopyEdit
p{
font-size: 18px;
}
• font-weight
Controls the thickness of the text (bold, normal, etc.).
css
CopyEdit
p{
font-weight: bold;
}
• font-style
Specifies the style of the text (italic, normal, etc.).
css
CopyEdit
p{
font-style: italic;
}
 • text-align
Aligns the text inside an element (left, right, center).
css
CopyEdit
p{
text-align: center;
}
• line-height
Sets the distance between lines of text.
css
CopyEdit
p{
line-height: 1.5;
}
• text-transform
Controls the capitalization of text (uppercase,
lowercase, capitalize).
css
CopyEdit
p{
text-transform: uppercase;
}
• color
Sets the color of the text.
css
CopyEdit
p{
color: red;
}
• letter-spacing
Sets the spacing between letters.
css
CopyEdit
p{
letter-spacing: 2px;
}
• text-decoration
Adds decorations like underline, line-through, or none.
css
CopyEdit
a{
text-decoration: underline;
}

3. Controlling Layout and Formatting

CSS also provides various ways to control the layout and
formatting of elements, including spacing, borders, and
positioning.
• margin
Defines the space outside an element (outside the
border).
css
CopyEdit
div {
margin: 20px; /* Adds space outside the element */
}
• padding
Defines the space inside an element (between the
content and the border).
css
CopyEdit
div {
padding: 10px; /* Adds space inside the element */
}
 • border
Adds a border around an element. You can specify the
width, style, and color.
css
CopyEdit
div {
border: 2px solid black; /* Creates a solid black border */
}
• width & height
Control the dimensions of an element.
css
CopyEdit
div {
width: 300px;
height: 200px;
}
• display
Specifies how elements are displayed in the layout
(block, inline, flex, etc.).
css
CopyEdit
div {
 display: flex; /* Use flexbox to control child elements */
}
• position
Controls the position of an element on the page (static,
relative, absolute, fixed).
css
CopyEdit
div {
position: absolute;
top: 50px;
left: 100px;
}
• overflow
Controls the content overflow when it exceeds the
bounds of the element.
css
CopyEdit
div {
overflow: auto; /* Adds scrollbars if content overflows */
}
WhatsApp-style Hindi Explanation
1. Background Styling
CSS se hum element ke background ko style kar sakte hain.
Jaise ki background-color, background-image, ya gradients.
Example:
css
CopyEdit
div {
background-color: lightblue; /* Background color set karta
hai */
background-image: url('image.jpg'); /* Image set karta hai */
background-size: cover; /* Image ko pura area cover karne
ke liye set karta hai */
}
2. Text Formatting
CSS se text ko format karne ke liye kai properties hain:
• font-family se font set karte hain.
• font-size se text ka size control karte hain.
• font-weight se bold karte hain.
• text-align se text ko left, right ya center mein align karte
hain.
• line-height se line ke beech ka space badhate hain.
Example:
css
CopyEdit
p{
font-family: 'Arial', sans-serif;
font-size: 18px;
color: red;
text-align: center;
line-height: 1.5;
}
3. Controlling Layout
Layout ko control karne ke liye hum margin, padding,
border, width, height, aur position properties use karte
hain.
• margin: Element ke bahar ka space.
• padding: Element ke andar ka space.
• border: Border add karte hain.
• width & height: Element ki size set karte hain.
• position: Element ki position set karte hain.
Example:
css
CopyEdit
div {
margin: 20px;
padding: 10px;
border: 2px solid black;
width: 300px;
height: 200px;
}

Q) Working with Lists :

In HTML, there are three main types of lists:

1. Ordered Lists (<ol>)
o Displays items in a numbered order.
o Example:
html
CopyEdit
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
2. Unordered Lists (<ul>)
o Displays items with bullet points.
o Example:
html
CopyEdit
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
3. Definition Lists (<dl>)
o Displays terms and their definitions.
o Example:
html
CopyEdit
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
 <dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Styling Lists with CSS

You can customize lists with CSS using properties like list-
style, padding, margin, etc.
• Changing List Style
You can change the default bullet or numbering style
using list-style-type.
css
CopyEdit
ul {
list-style-type: square; /* Changes the bullet to a square */
}
• Removing Bullets
To remove the default bullets, use list-style-type: none.
css
CopyEdit
ul {
list-style-type: none; /* Removes bullets */
}
• Customizing List with Images
You can also use an image as a bullet point.
css
CopyEdit
ul {
list-style-image: url('bullet.png'); /* Uses an image as a
bullet */
}
• Spacing and Indentation
Use padding and margin to control the space around list
items.
css
CopyEdit
ul {
margin: 20px;
padding: 10px;
}
Q) Working with Tables

HTML tables are used to display data in rows and columns.

Here's how to work with tables:
• Basic Table Structure
A table consists of the <table>, <tr>, <td>, and <th>
elements:
o <table>: Defines the table.
o <tr>: Defines a row in the table.
o <td>: Defines a cell (data).
o <th>: Defines a header cell.
Example of a table:
html
CopyEdit
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
 <tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>

Styling Tables with CSS

• Table Borders
Use border to add borders to your table and cells.
css
CopyEdit
table, th, td {
border: 1px solid black; /* Adds border to table and cells */
border-collapse: collapse; /* Ensures borders don’t overlap
*/
}
• Padding and Text Alignment
Use padding to add space inside cells, and text-align to
align text inside the cells.
css
CopyEdit
th, td {
padding: 10px; /* Adds space inside cells */
text-align: center; /* Centers text */
}
• Table Background Color
Use background-color to add colors to table rows or
cells.
css
CopyEdit
th {
background-color: #f2f2f2; /* Light gray background for
header */
}
• Alternating Row Colors
You can add alternating colors to rows for better
readability.
css
CopyEdit
tr:nth-child(even) {
background-color: #f2f2f2; /* Adds alternating background
color */
}

Example: Complete List and Table

Here’s an example that includes both lists and a table styled
with CSS:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Lists and Tables</title>
<style>
/* Styling for Lists */
ul {
list-style-type: square; /* Changes the bullet to square */
margin: 20px;
padding: 10px;
}

/* Styling for Tables */

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9; /* Alternating row colors */
 }
</style>
</head>
<body>

<!-- Unordered List -->

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>

<!-- Table -->

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
 <td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>

</body>
</html>

WhatsApp-style Hindi Explanation

1. Working with Lists
HTML mein teen tareeke ke lists hoti hain:
1. Ordered List (<ol>): Numbered list.
2. Unordered List (<ul>): Bullet point list.
3. Definition List (<dl>): Terms aur unke definitions.
Example:
html
CopyEdit
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
2. Styling Lists with CSS
• List Style Type: List ke bullet ka style change karte hain.
css
CopyEdit
ul {
list-style-type: square; /* Square bullet points */
}
• Remove Bullets: Agar bullets ko hataana ho toh:
css
CopyEdit
ul {
list-style-type: none; /* Removes bullets */
}
3. Working with Tables
HTML mein tables banane ke liye <table>, <tr>, <td>, aur
<th> tags use hote hain.
Example of a table:
html
CopyEdit
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>
4. Styling Tables with CSS
 • Table Border:
css
CopyEdit
table, th, td {
border: 1px solid black;
border-collapse: collapse; /* Border overlap nahi hoga */
}
• Padding aur Alignment:
css
CopyEdit
th, td {
padding: 10px;
text-align: center;
}

Q) Class Id & Class in CSS :

Class in CSS: In CSS, a class is a way to apply styles to
multiple elements on a web page. A class is defined with a
period (.) followed by the class name. You can apply a class
to any HTML element using the class attribute.
Class ID in CSS: The "Class ID" isn't a standard term in CSS.
However, if you're referring to the "ID" in CSS, it’s a unique
identifier for an element, which is defined with a hash (#)
followed by the ID name. Unlike classes, IDs are meant to be
unique to each page and can only be applied to one
element.
Example:
css
CopyEdit
/* Class */
.button {
background-color: blue;
color: white;
}

/* ID */
#header {
font-size: 24px;
color: black;
}
html
CopyEdit
<!-- Applying class and ID -->
<button class="button">Click Me</button>
<div id="header">Welcome to the Page</div>
Key Differences:
• Classes can be used multiple times on a page, while
IDs should be used only once.
• Classes are selected using a dot (.) while IDs use a hash
(#).

Q) CSS box model :

The CSS Box Model is a fundamental concept in web design

that defines how elements on a webpage are structured and
how their size is calculated. Every element in CSS can be
thought of as a box, which consists of four parts: content,
padding, border, and margin. Understanding how these parts
work helps in controlling the layout of a webpage.
Box Model Components
1. Content:
 o This is the actual area where the text or images are
placed. It’s the innermost part of the box.
o Property: width, height
2. Padding:
o The space between the content and the border. It
creates space inside the box, but still inside the
element.
o Property: padding
3. Border:
o The line surrounding the padding (and content).
You can customize the border's width, color, and
style.
o Property: border
4. Margin:
o The space outside the border. It creates distance
between this element and others around it.
o Property: margin
Types of Box Models
There are two types of box models:
1. Content-box (default):
 o The width and height properties apply only to the
content area. Padding, border, and margin are
added outside of the width/height you set.
2. Border-box:
o The width and height properties include the
content, padding, and border. This means when
you set width: 100px, it includes padding and
borders.
Example:
css
CopyEdit
/* Example of Box Model using content-box */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}

Diagram:
First Diagram :

Second Diagram :

Hindi (in English):

Box Model CSS mein ek important concept hai, jo define
karta hai ki webpage ke elements kaise arrange hote hain aur
unki size kaise calculate hoti hai. Har element ko hum ek box
ke roop mein samajh sakte hain, jisme 4 parts hote hain:
content, padding, border, aur margin.
Box Model ke Components
1. Content:
o Ye wahi area hai jahan text ya images rakhe jaate
hain. Ye box ka andar ka hissa hota hai.
o Property: width, height
2. Padding:
o Ye content aur border ke beech ka space hota hai.
Ye space andar hota hai, lekin element ke andar hi.
o Property: padding
3. Border:
o Ye padding (aur content) ke around ek line hoti hai.
Border ka width, color aur style change kiya ja
sakta hai.
o Property: border
4. Margin:
o Ye border ke bahar ka space hota hai. Ye doosre
elements se distance banata hai.
o Property: margin
Box Model Types
1. Content-box (Default):
o Isme width aur height sirf content area ke liye hoti
hai. Padding, border, aur margin alag se add kiye
jaate hain.
2. Border-box:
o Isme width aur height content, padding, aur border
ko include karte hain. Matlab agar aap width: 100px
set karte hain, toh isme padding aur borders bhi
included hote hain.
Example:
css
CopyEdit
/* Box Model ka example content-box ke sath */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}
1. CSS Advanced Grouping
What is it? CSS grouping allows you to apply the same
styles to multiple elements at once, without repeating your
code. You can group selectors to target multiple elements
that share the same styling.
How to do it: You can group selectors by separating them
with commas.
Example:
css
CopyEdit
h1, h2, h3 {
color: blue;
font-family: Arial, sans-serif;
}
This will apply the same color and font to all <h1>, <h2>, and
<h3> elements.
Hindi Explanation: CSS mein grouping ka matlab hai ek hi
style ko kai elements par apply karna bina code ko repeat
kiye. Aap selectors ko comma se separate karke group kar
sakte hain.
2. CSS Dimensions:
What is it? Dimensions refer to the size of elements, such
as width and height. CSS provides properties like width,
height, min-width, max-width, min-height, and max-height to
control these.
Example:
css
CopyEdit
.box {
width: 300px;
height: 200px;
min-width: 150px;
max-height: 500px;
}
This sets the width to 300px, but it can never be smaller than
150px and will never exceed 500px in height.
Hindi Explanation: Dimensions ka matlab hai elements ka
size. Aap CSS ke width, height, min-width, max-width, min-
height, max-height properties se element ka size control kar
sakte hain.
Q) CSS Display Property:
The display property in CSS defines how an element is
displayed on the webpage. It controls the layout behavior of
elements in relation to other elements around it. The display
property is one of the most important CSS properties
because it can drastically change how elements are
positioned and arranged.
Common Values for display Property:
1. block
o What it does: Makes the element a block-level
element. Block-level elements take up the full
width of their parent container and appear on a
new line.
o Examples of block elements: <div>, <p>, <h1>,
etc.
Example:
css

div {
display: block;
width: 100%;
background-color: lightblue;
}
o Behavior: The div will take up the full width of the
container and push the next element below it.
2. inline
o What it does: Makes the element an inline
element. Inline elements only take up as much
width as their content and do not start on a new
line.
o Examples of inline elements: <span>, <a>,
<strong>, etc.
Example:
css
CopyEdit
span {
display: inline;
color: red;
}
o Behavior: The span element will stay in the same
line as the surrounding text.
3. inline-block
 o What it does: Makes the element behave like an
inline element, but allows you to set width and
height (unlike inline elements).
Example:
css
CopyEdit
.box {
display: inline-block;
width: 150px;
height: 100px;
background-color: lightgreen;
}
o Behavior: The element behaves like an inline
element but can still be sized (width and height).
4. none
o What it does: Hides the element entirely. The
element will not take up any space in the layout.
Example:
css
CopyEdit
.hidden {
 display: none;
}
o Behavior: The element will not appear on the page,
and it will not affect the layout.
5. flex
o What it does: Makes the element a flex container.
This is used for creating flexible layouts where the
children of this element are flex items, and you can
control their alignment and distribution.
Example:
css
CopyEdit
.container {
display: flex;
justify-content: space-between;
}
o Behavior: The child elements inside .container will
be arranged in a row (by default) with space
between them.

CSS Positioning: Explained in Simple Terms

CSS positioning controls the placement of an element on a
webpage. It determines how an element is positioned in
relation to other elements. By changing the position
property, you can control whether an element stays in its
default position, moves relative to its normal place, or stays
fixed to a certain spot on the page.
Types of Positioning in CSS:
1. static (default)
o What it does: This is the default positioning for all
elements. The element is positioned according to
the normal flow of the document (from top to
bottom and left to right).
o Example:
css
CopyEdit
.static {
position: static;
top: 10px; /* This will not work */
left: 20px; /* This will not work */
}
▪ Behavior: The top and left properties do not
affect the position because it’s static.
2. relative
 o What it does: The element is positioned relative to
its normal position. It can be moved around using
top, right, bottom, and left properties.
o Example:
css
CopyEdit
.relative {
position: relative;
top: 20px; /* Moves 20px down from its normal position */
left: 30px; /* Moves 30px right from its normal position */
}
▪ Behavior: The element is moved 20px down
and 30px to the right, but it still occupies its
original space in the layout.
3. absolute
o What it does: The element is positioned relative to
its nearest positioned ancestor (any ancestor with
a position other than static). If no positioned
ancestor exists, it is positioned relative to the initial
containing block (usually the <html> element).
o Example:
css
CopyEdit
.absolute {
position: absolute;
top: 50px;
left: 50px;
}
▪ Behavior: The element will be placed 50px
from the top and 50px from the left of its
nearest positioned ancestor.
4. fixed
o What it does: The element is positioned relative to
the viewport (the visible area of the web page), not
its parent or any other ancestor. This means it stays
in the same position even when you scroll the page.
o Example:
css
CopyEdit
.fixed {
position: fixed;
bottom: 10px; /* 10px from the bottom of the page */
right: 20px; /* 20px from the right edge of the page */
}
 ▪ Behavior: The element stays fixed at the
bottom-right corner of the viewport, even
when you scroll.
5. sticky
o What it does: The element is treated as relative
until it reaches a specified point (usually defined by
top, bottom, left, or right), after which it becomes
fixed and stays in place while scrolling.
o Example:
css
CopyEdit
.sticky {
position: sticky;
top: 0;
}
▪ Behavior: The element will scroll with the
page until it reaches the top of the viewport, at
which point it will stay stuck at the top.

Examples in Action:
Relative Positioning Example:
html
CopyEdit
<div class="relative">This is a relative element</div>
CSS:
css
CopyEdit
.relative {
position: relative;
top: 50px;
left: 50px;
background-color: lightblue;
}
• The .relative element will move 50px down and 50px to
the right, but it will still occupy the space it originally
would have in the document flow.
Fixed Positioning Example:
html
CopyEdit
<div class="fixed">I stay fixed at the bottom-right
corner!</div>
CSS:
css
CopyEdit
.fixed {
position: fixed;
bottom: 10px;
right: 10px;
background-color: lightgreen;
}
• The .fixed element will stay in the same position at the
bottom-right corner of the viewport, even when the
page is scrolled.

In Hindi (in English alphabets):

CSS Positioning: Simplified
CSS positioning ka kaam hai kisi element ko webpage par
kahan position karna hai, yeh decide karna. Jab hum
position property ko change karte hain, toh hum element ki
position ko control kar sakte hain ki woh apne default
position par rahe, ya move ho, ya ek specific point par fix ho
jaye.
Positioning Ke Types:
1. static (default)
 o Kya karta hai: Yeh default positioning hai. Element
normal document flow ke according position hota
hai.
o Example:
css
CopyEdit
.static {
position: static;
top: 10px; /* Yeh kaam nahi karega */
left: 20px; /* Yeh bhi kaam nahi karega */
}
2. relative
o Kya karta hai: Yeh element ko apni normal position
ke relative position par rakhta hai. Hum top, left,
right, bottom properties se move kar sakte hain.
o Example:
css
CopyEdit
.relative {
position: relative;
top: 20px; /* 20px neeche move karega */
 left: 30px; /* 30px daayein move karega */
}
3. absolute
o Kya karta hai: Yeh element apne nearest
positioned ancestor (koi ancestor jiska position
static ke alawa kuch ho) ke relative position par
place hota hai.
o Example:
css
CopyEdit
.absolute {
position: absolute;
top: 50px;
left: 50px;
}
4. fixed
o Kya karta hai: Yeh element viewport ke relative
position par rehta hai. Matlab, page scroll hone ke
baad bhi element apni position par rehta hai.
o Example:
css
CopyEdit
.fixed {
position: fixed;
bottom: 10px; /* Bottom se 10px door */
right: 20px; /* Right se 20px door */
}
5. sticky
o Kya karta hai: Yeh element initially relative hota hai
jab tak ek specific point pe nahi pohuchta, aur phir
woh fixed ho jaata hai aur scroll karte waqt apni
position pe stick ho jaata hai.
o Example:
css
CopyEdit
.sticky {
position: sticky;
top: 0;
}
Is tarah se CSS positioning aapko webpage par elements ko
precise tarike se position karne mein madad karti hai.

1. Floating (CSS Float)

The float property in CSS is used to position elements to the
left or right of their container, allowing text or other elements
to wrap around them.
Values of Float:
1. left: Floats the element to the left side of its container.
2. right: Floats the element to the right side of its
container.
3. none: Default value; no floating is applied.
4. inherit: Inherits the float value from the parent element.
Example:
html
CopyEdit
<div class="container">
<img src="image.jpg" class="float-left" alt="example
image">
<p>This text will wrap around the floated image.</p>
</div>
css
CopyEdit
.float-left {
float: left;
 margin-right: 10px;
}
Clear Property:
The clear property is used to stop elements from wrapping
around a floated element.
css
CopyEdit
.clearfix {
clear: both; /* Stops wrapping on both sides */
}

2. Align
The text-align property in CSS aligns the text horizontally
within its container.
Values of Text Alignment:
1. left: Aligns text to the left.
2. right: Aligns text to the right.
3. center: Centers the text.
4. justify: Stretches the text so that each line has equal
width.
Example:
html
CopyEdit
<p class="center">This is centered text.</p>
css
CopyEdit
.center {
text-align: center;
}
Vertical Alignment:
You can use the vertical-align property for inline elements or
table cells.
css
CopyEdit
.vertical {
vertical-align: middle;
}

3. Pseudo-class
A pseudo-class is a keyword added to selectors that
specifies a special state of the element.
Common Pseudo-classes:
 1. :hover: Applies styles when the user hovers over an
element.
2. :focus: Applies styles when an element is focused.
3. :first-child: Targets the first child of an element.
4. :last-child: Targets the last child of an element.
5. :nth-child(n): Targets the nth child of an element.
Example:
html
CopyEdit
<a href="#" class="hover">Hover over me</a>
css
CopyEdit
.hover:hover {
color: red;
text-decoration: underline;
}

4. Navigation Bar
A navigation bar (navbar) is a section of a website that
contains links for navigation.
Example of a Simple Navbar:
html
CopyEdit
<nav>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
css
CopyEdit
.navbar {
list-style-type: none;
background-color: #333;
padding: 10px;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 10px 20px;
}
.navbar a:hover {
background-color: #575757;
}

5. Image Sprites
Image sprites combine multiple images into one image file,
reducing the number of HTTP requests for faster loading.
How to Use Image Sprites:
1. Use background-position to display different parts of
the sprite image.
2. Set the width and height of the element to match the
desired sprite.
Example:
html
CopyEdit
<div class="icon icon-home"></div>
<div class="icon icon-contact"></div>
css
CopyEdit
.icon {
background-image: url('sprites.png');
background-repeat: no-repeat;
display: inline-block;
}
.icon-home {
background-position: 0 0;
width: 50px;
height: 50px;
}
.icon-contact {
background-position: -50px 0;
width: 50px;
height: 50px;
}
6. Attribute Selector
Attribute selectors allow you to style elements based on
their attributes and attribute values.
Syntax:
1. [attribute]: Selects elements with the specified
attribute.
2. [attribute="value"]: Selects elements with the specified
attribute and value.
3. [attribute^="value"]: Selects elements with attributes
that start with the specified value.
4. [attribute$="value"]: Selects elements with attributes
that end with the specified value.
5. [attribute*="value"]: Selects elements with attributes
that contain the specified value.
Example:
html
CopyEdit
<input type="text" class="field">
<input type="password" class="field">
css
CopyEdit
input[type="text"] {
 border: 2px solid blue;
}
input[type="password"] {
border: 2px solid red;
}

In Hindi (in English Alphabets)

1. Floating
CSS float property ka use kisi element ko left ya right
position karne ke liye hota hai aur text ya doosre elements ko
uske around wrap karne ke liye.
Example:
css
CopyEdit
.float-left {
float: left;
margin-right: 10px;
}

2. Align
Text alignment ka kaam hai text ko horizontally ya vertically
align karna.
Example:
css
CopyEdit
.center {
text-align: center; /* Center alignment */
}

3. Pseudo-class
Pseudo-class ek special state ko represent karta hai, jaise
:hover, :focus.
Example:
css
CopyEdit
a:hover {
color: red;
}

4. Navigation Bar
Navigation bar ek website ka section hota hai jo links provide
karta hai.
Example:
css
CopyEdit
.navbar {
background-color: #333;
list-style: none;
overflow: hidden;
}

5. Image Sprites
Multiple images ko ek hi file mein combine karke sprites
banaya jaata hai.
Example:
css
CopyEdit
.icon-home {
background-position: 0 0;
}
6. Attribute Selector
Attributes ke basis par elements ko style karne ke liye use
hota hai.
Example:
css
CopyEdit
input[type="password"] {
border: 2px solid red;
}