󾠯

unit 2 wt

❓ Why do we use CSS? Explain different selectors in CSS.

We use CSS in web development to make web pages look good and organized. CSS helps us control
how elements on a web page, like text, images, and buttons, are displayed. Here's why we use CSS:

1. Separation of concerns: CSS allows us to keep the design separate from the content. It means we
can change the look and feel of a website without changing the underlying structure of the web page.

2. Consistent styling: CSS helps us apply consistent styles across multiple web pages. We can define
the styles once and apply them to different elements throughout the website. It ensures that
everything looks cohesive and follows the same design guidelines.

3. Easy maintenance: With CSS, making changes to the appearance of a website becomes easier.
Instead of modifying each web page individually, we can update the CSS file and automatically see
the changes applied everywhere it is used.

4. Responsive design: CSS allows us to create websites that adapt to different screen sizes. We can
make web pages look good on desktops, tablets, and mobile phones by using CSS techniques like
media queries and flexible layouts.

Different selectors in CSS:

Selectors are like "targeting tools" that help us select specific elements on a web page and apply styles to
them. Here are some selectors explained with examples:

1. Element Selector: It targets elements based on their tag names. For example, if we want to apply
styles to all paragraphs, we use the selector p .

2. Class Selector: It targets elements based on their class names. For example, if we have a class
called "highlight" and we want to apply styles to all elements with that class, we use the selector
.highlight .

unit 2 wt 1
 3. ID Selector: It targets a specific element based on its unique ID attribute. For example, if we have an
element with the ID "logo" and want to apply styles to it, we use the selector #logo .

4. Descendant Selector: It targets elements that are inside another element. For example, if we want to
select all p elements inside a div , we use the selector div p .

5. Child Selector: It targets elements that are direct children of another element. For example, if we want
to select all li elements that are direct children of a ul , we use the selector ul > li .

6. Attribute Selector: It targets elements based on their attribute values. For example, if we want to
select all input elements with the attribute type="text" , we use the selector input[type="text"] .

7. Pseudo-class Selector: It targets elements based on a specific state or condition. For example,
:hover targets an element when the user hovers over it, :nth-child(n) targets elements based on
their position within a parent container.

By using these selectors, we can pick the elements we want to style and apply specific styles to them. It
helps us create visually appealing and well-designed web pages.

❓ Write and explain any five form objects that are required for obtaining user details for a typical
online user registration process.

In a typical online user registration process, there are several form objects used to obtain user details.
Here are five common form objects:

1. Text Input:

Explanation: Text input is used to collect short text-based information from users, like their name,
email address, or phone number. Users can type in their details using a keyboard.

Example: <input type="text" name="name" placeholder="Enter your name">

2. Password Input:

Explanation: Password input is used to collect passwords or any sensitive information that should
be hidden for security. When you type your password, it appears as asterisks or dots to keep it
confidential.

Example: <input type="password" name="password" placeholder="Enter your password">

3. Radio Buttons:

Explanation: Radio buttons allow you to choose only one option from a set of choices. They are
often used when there are mutually exclusive options, like selecting your gender.

Example:

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other

4. Checkbox:

Explanation: Checkboxes are used when you can select one or more options from a list of
choices. They are commonly used for preferences or interests where multiple selections are
allowed.

unit 2 wt 2
 Example:

<input type="checkbox" name="interests" value="music"> Music

<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="reading"> Reading

5. Select Dropdown:

Explanation: Select dropdowns provide a list of options, and you can choose only one option from
the given list. They are used when there are many options available, and it saves space on the
form.

Example:

<select name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select>

These five form objects are commonly used in online user registration processes to collect various user
details. They provide a structured way to gather information from users and are essential components of
many web forms.

❓ Explain various formatting tags of HTML.

HTML provides various formatting tags that allow you to control the appearance and structure of text and
content on a web page. Here are explanations of some commonly used formatting tags in HTML:

1. Heading Tags ( <h1> to <h6> ):

Explanation: Heading tags are used to create headings and subheadings on a web page. They
help organize and structure the content by indicating the importance and hierarchy of the
headings.

Example: <h1>This is the main heading</h1>

2. Paragraph Tag ( <p> ):

Explanation: The paragraph tag is used to create paragraphs of text on a web page. It helps
separate blocks of text and provides a clear structure to improve readability.

Example: <p>This is a paragraph of text.</p>

3. Bold Tag ( <b> ) and Strong Tag ( <strong> ):

Explanation: These tags are used to make text appear bold. They add emphasis and highlight
important content. The <strong> tag carries more semantic meaning than the <b> tag.

Example: <b>This text is bold.</b>

4. Italic Tag ( <i> ) and Emphasis Tag ( <em> ):

Explanation: These tags are used to make text appear italicized. They provide emphasis and
convey a sense of importance. The <em> tag carries more semantic meaning than the <i> tag.

unit 2 wt 3
 Example: <i>This text is italicized.</i>

5. Underline Tag ( <u> ):

Explanation: The underline tag is used to underline text. It adds a horizontal line beneath the
enclosed text.

Example: <u>This text is underlined.</u>

6. Superscript Tag ( <sup> ) and Subscript Tag ( <sub> ):

Explanation: The superscript tag is used to display text in a smaller size and above the normal
line, typically used for exponents or footnotes. The subscript tag is used to display text in a
smaller size and below the normal line, often used for chemical formulas or mathematical
notation.

Example:

E = mc² <!-- Superscript -->

H₂O <!-- Subscript -->

These formatting tags provide a way to structure and style the text and content in an HTML document.
They help convey meaning, emphasize important information, and improve the overall presentation of the
web page. Remember to use them appropriately and sparingly to maintain clarity and accessibility.

❓ Explain CSS with proper example.

CSS (Cascading Style Sheets) is a styling language used to describe the appearance and formatting of
HTML elements on a web page. It allows you to control the colors, layout, fonts, and other visual aspects
of the content. Here's an explanation of CSS with a proper example:
Imagine you have an HTML file with some text. You want to change the colors, sizes, and styles of the
text to make it more appealing. That's where CSS comes in.

In the HTML file, you use <style> tags inside the <head> section. Inside the <style> tags, you write CSS
rules.
CSS rules have two parts: selectors and declarations.

1. Selectors: Selectors target the elements you want to style. For example:

h1 targets all the big headings in your HTML.

p targets all the paragraphs.

.highlight targets elements with a specific class, like <p class="highlight"> .

2. Declarations: Declarations are like instructions for how the selected elements should look. For
example:

color: blue changes the color of the text to blue.

font-size: 24px makes the text bigger.

text-align: center centers the text.

Now, let's put it all together with an example:

unit 2 wt 4
 <!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
h1 {
color: blue;
font-size: 24px;
text-align: center;
}

p {
color: red;
font-size: 16px;
}

.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<p class="highlight">This paragraph is highlighted.</p>
</body>
</html>

In this example:

The <style> tags contain our CSS rules.

The h1 rule makes the heading blue, bigger, and centered.

The p rule makes paragraphs red and a bit smaller.

The .highlight rule adds a yellow background and makes the text bold to the paragraph with the
"highlight" class.

When you open the HTML file in a web browser, the text will appear according to the CSS rules. The
heading will be blue, big, and centered. The paragraphs will be red and a bit smaller. The paragraph with
the "highlight" class will also have a yellow background and bold text.
CSS helps make your web pages attractive by controlling the style and appearance of the HTML
elements. It's like applying makeup to the text, making it look more appealing and engaging.

❓ Explain basic elements of HTML.

1. <html> : The <html> element is the main container of an HTML document. It wraps around all other

elements and represents the entire webpage.

2. <head> : The <head> element contains important information about the webpage, but it doesn't appear
on the actual page. It holds elements like the webpage title, links to stylesheets or scripts, and other
settings.

3. <title> : The <title> element sets the title of the webpage. It appears in the browser's title bar or tab,
giving a brief description of the page's content.

unit 2 wt 5
 4. <body> : The <body> element represents the main content area of the webpage. It contains all the
visible content that you see on the webpage, such as text, images, links, and other elements.

5. <h1> to <h6> (Heading Elements): These elements create headings and subheadings. <h1> is the
biggest heading, and <h6> is the smallest. They help structure and organize the content, making it
easier for users to navigate and understand the page.

6. <p> (Paragraph Element): The <p> element is used to create paragraphs of text. It represents a block
of text with proper spacing and indentation, making it easier to read and comprehend.

7. <a> (Anchor Element): The <a> element creates hyperlinks, also known as clickable links. It allows

you to link to other web pages, documents, or specific parts within the same page. Users can click on
these links to navigate to different locations.

8. <img> (Image Element): The <img> element is used to display images on a webpage. It requires a

source (src) attribute that specifies the URL or file path of the image. This way, you can include
pictures and graphics to enhance the visual appeal of your page.

9. <ul> (Unordered List) and <li> (List Item): The <ul> element creates an unordered (bullet) list, while
the <li> element represents individual items within that list. You can use this to create lists without
any particular order or sequence.

10. <ol> (Ordered List): The <ol> element creates an ordered (numbered) list. Each item within the list is
represented by the <li> element and is given a sequential number. This helps create lists with a
specific order or sequence.

11. <div> (Division Element): The <div> element is a versatile container used to group and style other

elements. It acts as a division or section within the webpage, allowing you to organize and structure
the content based on different sections or blocks.

These basic HTML elements provide the foundation for creating webpages. By using these elements, you
can structure your content, add text, images, links, headings, and lists. They help create well-organized
and visually appealing webpages that are easy to understand and navigate.

❓ How to create a dynamic web page and also write a code for dynamic web page

To create a dynamic web page, you can use a combination of HTML, CSS, and JavaScript. HTML
provides the structure, CSS handles the presentation, and JavaScript adds interactivity and dynamic
behavior. Here's an example code for a simple dynamic web page:

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Web Page</title>
<style>
/* CSS for styling */
.dynamic-text {
color: blue;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Welcome to the Dynamic Web Page!</h1>

<p class="dynamic-text">Click the text to change it dynamically.</p>

unit 2 wt 6
 <script>
// JavaScript for dynamic behavior
const dynamicText = document.querySelector('.dynamic-text');

dynamicText.addEventListener('click', function() {
dynamicText.textContent = 'Text changed dynamically!';
dynamicText.style.color = 'red';
});
</script>
</body>
</html>

Explanation:

1. The HTML structure: The HTML file contains the basic structure with <html> , <head> , and <body>

tags. Inside the <body> tag, we have a heading ( <h1> ) and a paragraph ( <p> ) element.

2. CSS for styling: The <style> tags within the <head> section contain CSS styles. In this example, we
have a CSS class named .dynamic-text that sets the color, font size, and cursor style for the dynamic
text.

3. JavaScript for dynamic behavior: Inside the <script> tags, we use JavaScript to add interactivity. We
select the dynamic text element using document.querySelector('.dynamic-text') and add an event
listener to it.

4. Event listener and dynamic changes: When the dynamic text is clicked, the event listener function is
triggered. In this case, it changes the text content of the dynamic text element to "Text changed
dynamically!" and updates its color to red.

When you open the HTML file in a web browser, you'll see a heading, a paragraph, and the dynamic text.
Clicking on the dynamic text will trigger the JavaScript function, changing the text and color dynamically.
This is a simple example to demonstrate the concept of a dynamic web page. With JavaScript, you can
create more complex interactions, fetch data from APIs, update content based on user input, and much
more.

❓ Describe hypertext link in detail.

A hypertext link, commonly known as a hyperlink or simply a link, is a fundamental element of the web
that allows users to navigate between different web pages or locations within a web page. It is a clickable
element that connects one piece of content to another, enabling seamless navigation and
interconnectedness on the internet. Let's delve into the details of a hypertext link:

1. Syntax and Attributes:

In HTML, a hyperlink is created using the <a> (anchor) element.

The basic syntax of an anchor tag is <a href="URL">Link Text</a> , where:

href attribute specifies the destination or target of the link. It can be an absolute URL (e.g.,

https://example.com) or a relative URL (e.g., page.html) indicating a location within the same
website.

The text between the opening and closing anchor tags ( <a> and </a> ) represents the visible
link text that users can click on.

2. Types of Links:

unit 2 wt 7
 External Links: These links navigate users to a different website or domain. The href attribute
contains the complete URL of the external resource.

Internal Links: These links direct users to different pages within the same website or domain. The
href attribute may specify a relative URL that points to the desired page or resource within the

site.

Email Links: These links open the default email client with a pre-filled email address. The href

attribute contains the email address preceded by "mailto:" (e.g., href="

<mailto:[email protected]>" ).

Anchor Links: Also known as page jumps or scroll-to links, these links enable users to jump to a
specific section or element within the same page. The href attribute contains an anchor name
preceded by a hash symbol (e.g., href="#section1" ).

3. Link Behavior and Styling:

By default, hyperlinks are displayed as underlined text with a distinct color, typically blue,
indicating they are clickable.

CSS can be used to customize the appearance of links, such as changing the color, removing the
underline, or applying different styles on hover or when clicked.

Pseudo-classes like :hover , :visited , :active , and :focus can be used to apply specific styles to
different states of the link.

4. Accessibility Considerations:

Hyperlinks are essential for navigating websites, and it is crucial to ensure they are accessible to
all users.

Including descriptive and meaningful link text helps users understand the purpose or destination
of the link, particularly for users who rely on screen readers or have visual impairments.

Adding alternative text ( alt attribute) to images used as links provides context for non-visual
users.

Hyperlinks play a vital role in web navigation, enabling users to explore content, access related resources,
and establish interconnected relationships across web pages. They form the foundation of the World Wide
Web, connecting information and facilitating seamless browsing experiences for users.

❓ Short notes on Frames

- Understanding the concept of frames in web design
- Creating framesets and defining frame elements
- Implementing navigation within frames

Frames in web design allow you to divide a webpage into separate sections or windows, each displaying
a different HTML document. This technique lets you create layouts where certain parts of the webpage
remain fixed while other sections can be scrolled independently. Here's what you need to know:

1. Concept of Frames:

Frames enable you to create a webpage layout with multiple sections, like a navigation menu or
header that stays constant while the content changes.

Frames allow you to display different web pages simultaneously within a single browser window.

unit 2 wt 8
 2. Creating Framesets and Defining Frame Elements:

Frames are defined using the <frameset> and <frame> elements.

The <frameset> element is used to define the overall structure of frames. It specifies the number
of rows or columns and their sizes.

Within the <frameset> element, you use <frame> elements to define each individual frame and its
contents.

Here's an example of a frameset with two frames, one on top and one below:
In this example, the frameset is divided into two columns of equal width. The first frame displays
the "menu.html" page, while the second frame displays the "content.html" page.

<frameset cols="*,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>

3. Implementing Navigation within Frames:

Navigation within frames involves loading content into specific frames.

Links or form submissions can be set to load their content into a particular frame by specifying the
target attribute with the frame's name.

Here's an example of a link targeting a specific frame:

<a href="page.html" target="contentFrame">Click me</a>

In this example, when the link is clicked, the "page.html" content will load into the frame named
"contentFrame".

To link to a specific frame from outside the frameset, you can use the target attribute with the
frame's name defined in the <frame> element.

Here's an example of a link from outside the frameset targeting a specific frame:

<a href="page.html" target="contentFrame">Click me</a>

In this example, when the link is clicked, the "page.html" content will load into the frame named
"contentFrame".

Frames have certain drawbacks, including accessibility issues for users with disabilities, challenges with
search engine optimization, and difficulties in creating responsive designs for different devices. Therefore,
modern web design practices tend to favor other techniques like CSS grid, flexbox, or responsive design
to achieve similar layout effects.

❓ Short notes on ajax.

1. Asynchronous Communication:

unit 2 wt 9
 Ajax allows web browsers to communicate with servers in the background without needing to
reload the entire webpage.

This asynchronous communication means that you can send and receive data without interrupting
or blocking other operations on the webpage.

2. XMLHttpRequest Object:

Ajax relies on the XMLHttpRequest (XHR) object, which is built into web browsers, to send and
receive data asynchronously.

The XHR object provides methods and properties to make requests to a server, handle the
server's response, and work with the received data.

3. Data Exchange and Manipulation:

Ajax enables exchanging data between the browser and the server without refreshing the entire
webpage.

You can send data to the server for processing or retrieve data from the server and display it on
the webpage.

The received data can be dynamically manipulated and inserted into specific parts of the
webpage without reloading the whole page.

4. Benefits of Ajax:

Improved User Experience: Ajax allows for smoother and more interactive web experiences by
updating specific sections of a webpage without the need to reload the entire page.

Enhanced Performance: Asynchronous requests reduce the server load and bandwidth
consumption by fetching only the necessary data, leading to faster and more efficient web
applications.

Real-time Updates: Ajax enables real-time updates on webpages, such as live chat, notifications,
and dynamic content loading.

Responsiveness: Ajax allows for quick user interactions and seamless data retrieval, making web
applications feel more responsive and interactive.

5. Ajax Frameworks and Libraries:

There are several frameworks and libraries available that simplify working with Ajax, such as
jQuery, Axios, and the Fetch API.

These tools provide easy-to-use functions and methods that handle Ajax requests and responses,
abstracting away some of the complexities of the underlying XHR object.

Here's an example using the Fetch API, a built-in web API for making Ajax requests:

fetch('<https://api.example.com/data>')
.then(response => response.json())
.then(data => {
// Manipulate and use the received data here
console.log(data);
})
.catch(error => {
// Handle errors
console.error('An error occurred:', error);
});

unit 2 wt 10
 Ajax has revolutionized web development by enabling dynamic and interactive web applications. It allows
for seamless data exchange, real-time updates, and improved user experiences. By fetching and
manipulating data in the background, Ajax enhances performance and responsiveness, making web
applications feel more fluid and engaging.

❓ short notes on ajax based web application.

Ajax (Asynchronous JavaScript and XML) is a web development technique that allows web
applications to communicate with a server in the background without refreshing the entire webpage.

Ajax-based web applications provide a smoother and more interactive user experience by updating
specific parts of a webpage without reloading the whole page.

With Ajax, web applications can send and receive data from the server without interrupting the user's
interactions on the webpage.

Ajax is commonly used to build web applications with dynamic features like real-time updates, live
data retrieval, and interactive interfaces.

Key components of an Ajax-based web application include:

JavaScript: Ajax heavily relies on JavaScript to handle the communication with the server and
dynamically modify the webpage's content.

XMLHttpRequest (XHR) Object: The XHR object is used to send and receive data
asynchronously between the web browser and the server. It enables exchanging data in different
formats like XML, JSON, HTML, or plain text.

Server-Side Technologies: Server-side technologies like PHP, Python, Ruby, or Java handle the
requests from the web browser, process the data, and send back the response.

DOM Manipulation: Ajax allows JavaScript to dynamically update specific parts of the webpage,
adding, removing, or modifying content without reloading the entire page.

Benefits of Ajax-based web applications:

Improved User Experience: Ajax makes web applications feel smoother and more interactive by
updating specific parts of the webpage without requiring a full page refresh.

Real-Time Updates: Ajax enables real-time updates, like live chat or notifications, where new
information can be displayed without manual page reloads.

Performance Optimization: Ajax reduces server load and improves bandwidth efficiency by
fetching only the necessary data, leading to faster and more efficient web applications.

Responsive Interactions: Ajax enables quick user interactions, like instant search suggestions or
autocomplete, making web applications feel more responsive.

Seamless Form Submission: Ajax allows form submissions without refreshing the page, providing
a seamless and uninterrupted user experience.

Popular Ajax frameworks and libraries, such as jQuery, Axios, and Fetch API, simplify working with
Ajax by providing ready-to-use functions and tools, making it easier to implement Ajax-based
features.

unit 2 wt 11
 Example:
Let's say you have a web application where users can search for products. With Ajax, you can implement
a search feature that fetches and displays search results without refreshing the entire page.

// Attach an event listener to the search input field

document.getElementById('searchInput').addEventListener('input', function() {
var searchTerm = this.value;

// Send an Ajax request to the server

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = xhr.responseText;

// Update the search results on the webpage

document.getElementById('searchResults').innerHTML = response;
}
};
xhr.open('GET', '/search?term=' + searchTerm, true);
xhr.send();
});

In this example, as the user types in the search input field, an Ajax request is sent to the server with the
search term. The server processes the request and sends back the search results. With Ajax, the search
results are dynamically updated on the webpage without a page refresh.
Ajax-based web applications provide a more dynamic and engaging user experience by allowing
seamless communication with the server, real-time updates, and interactive features that enhance the
overall usability of the web application.

❓ Creating tables and forms

To create tables and forms in HTML, you can follow the following guidelines:
Creating Tables:

1. Start by using the <table> element to define a table.

2. Inside the <table> element, use the <tr> (table row) element to define each row in the table.

3. Within each <tr> element, use the <td> (table data) element to define the cells in that row.

4. You can also use the <th> (table header) element instead of <td> to define header cells, typically
used for the first row or column of the table.

5. Add content within the <td> or <th> elements to populate the cells with text, images, or other HTML
elements.

6. Use CSS to style the table, such as setting the border, background color, alignment, and other visual
properties.

Example:

<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>

unit 2 wt 12
 <tr>
<td>Apple</td>
<td>$0.99</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.75</td>
<td>8</td>
</tr>
</table>

Creating Forms:

1. Use the <form> element to define a form.

2. Inside the <form> element, use various form elements to collect user input, such as <input> ,
<textarea> , <select>, and <button> .

3. The <input> element is the most commonly used form element and can have different types, such as
text, password, checkbox, radio, etc.

4. Provide appropriate labels for each form element using the <label> element.

5. Use the name attribute to give each form element a unique name, which will be used to identify the
input when the form is submitted.

6. Add a submit button using the <button> element with the type="submit" attribute to trigger the form
submission.

Example:

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>

<button type="submit">Submit</button>
</form>

In this example, a simple form is created with three input fields: Name, Email, and Message. The <label>

elements provide labels for each field, and the <input> and <textarea> elements allow users to enter their
information. The required attribute ensures that the user must fill out the required fields before submitting
the form. Finally, the <button> element triggers the form submission when clicked.
Remember to adjust the table and form elements as per your specific requirements and add appropriate
CSS styling to enhance the visual appearance of the tables and forms.

❓ Working with images and links

Working with Images:

1. To display an image on a webpage, use the <img> element.

unit 2 wt 13
 2. The <img> element requires the src attribute, which specifies the path or URL to the image file.

3. Use the alt attribute to provide alternative text for the image, which is displayed if the image cannot
be loaded or for accessibility purposes.

4. Adjust the size of the image using the width and height attributes or by applying CSS styles.

5. You can add a caption or additional information about the image using the <figcaption> element
(typically used within a <figure> element).

Example:

<img src="path/to/image.jpg" alt="Description of the image">

Working with Links:

1. To create a hyperlink, use the <a> element.

2. Specify the destination URL using the href attribute within the <a> element.

3. Use the link text or an image within the <a> element to provide a clickable element.

4. You can use the target attribute to specify how the linked page should be opened, such as in a new
tab or the same window.

5. Apply CSS styles to customize the appearance of the link.

Example:

<a href="<https://www.example.com>">Click here</a> to visit the website.

Example with an Image Link:

<a href="<https://www.example.com>">
<img src="path/to/image.jpg" alt="Description of the image">
</a>

In this example, a hyperlink is created with the text "Click here" linking to the website
"https://www.example.com". In the second example, an image is used as the clickable element, and when
clicked, it will take the user to the specified URL.
Remember to replace the image path, image description, link URL, and link text with your own content to
create functioning images and links on your webpage.

❓ Using external, internal, and inline styles

When working with styles in HTML, you have three options: external stylesheets, internal styles, and inline
styles. Here's an explanation of each:
External Stylesheets:

External stylesheets allow you to define styles in a separate CSS file and link it to your HTML
document.

unit 2 wt 14
 Create a CSS file with a .css extension, such as "styles.css".

In the HTML document, use the <link> element in the <head> section to connect the CSS file to your
HTML file.

The href attribute in the <link> element specifies the path to the CSS file.

Define the styles in the CSS file using CSS selectors and property-value pairs.

External stylesheets provide the advantage of separating style definitions from the HTML structure,
allowing for easier maintenance and consistency across multiple pages.

Example of linking an external stylesheet:

<head>
<link rel="stylesheet" href="styles.css">
</head>

Internal Styles:

Internal styles allow you to define styles within the <style> element directly in the HTML document.

Place the <style> element within the <head> section of your HTML file.

Inside the <style> element, define your CSS rules using selectors and property-value pairs.

The styles defined within the <style> element will apply to the HTML document in which it is defined.

Internal styles are useful when you have specific styles that apply only to a particular HTML
document.

Example of internal styles:

<head>
<style>
/* CSS rules go here */
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>

Inline Styles:

Inline styles allow you to apply styles directly to individual HTML elements using the style attribute.

Add the style attribute to an HTML element and specify the desired styles within double quotes.

Inline styles override any external or internal styles applied to the element.

Inline styles are useful for quick, one-off styling that applies only to specific elements.

Example of inline styles:

<p style="color: red; font-size: 18px;">This is a red paragraph with a font size of 18 pixels.</p>

In this example, the <p> element has inline styles applied directly to it, specifying the text color as red and
the font size as 18 pixels.

unit 2 wt 15
 Remember that the order of precedence for styles is inline styles > internal styles > external stylesheets.
Inline styles have the highest priority and will override any conflicting styles defined in internal or external
stylesheets.

unit 2 wt 16