Scribd
Upload
9 views37 pages

Unit-1 WT

HTML, or Hypertext Markup Language, is the standard markup language for creating web pages, using tags to structure content and define elements like headings, paragraphs, and images. It consists of components such as the doctype declaration, HTML tag, head section for metadata, and body section for visible content. HTML supports both standalone and paired tags, and can be enhanced with CSS and JavaScript for styling and interactivity.

Uploaded by

MAMIDI SURYA SHANKAR PRADEEP 21985A0415
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views37 pages

Unit-1 WT

HTML, or Hypertext Markup Language, is the standard markup language for creating web pages, using tags to structure content and define elements like headings, paragraphs, and images. It consists of components such as the doctype declaration, HTML tag, head section for metadata, and body section for visible content. HTML supports both standalone and paired tags, and can be enhanced with CSS and JavaScript for styling and interactivity.

Uploaded by

MAMIDI SURYA SHANKAR PRADEEP 21985A0415
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

HTML:

 HTML, or Hypertext Markup Language, is the standard markup language used for
creating web pages and other types of electronic documents that can be displayed in a
web browser.

 HTML provides a way to structure content and define the various elements that make up
a web page, such as headings, paragraphs, images, links, and more.

 HTML uses a series of tags to define each element on a web page.

 A tag is a keyword or phrase surrounded by angle brackets, such as <p> for a paragraph

or <img> for an image.

 Tags can also include attributes, which provide additional information about an element,
such as the source of an image or the URL for a hyperlink.

 HTML documents are made up of several components, including the following:

1. Doctype declaration: The doctype declaration tells the browser which version of HTML
is being used.
2. HTML tag: The HTML tag is used to wrap all the content of a web page and indicate that
the document is an HTML file.
3. Head section: The head section contains metadata about the document, such as the title of
the page and links to stylesheets.
4. Body section: The body section contains the main content of the web page, such as text,
images, and links.

 HTML is a versatile language that can be used to create a wide range of web pages and
documents, from simple static pages to complex web applications with dynamic content
and interactivity.

 It is a foundational technology for the web, and is often used in conjunction with other
technologies such as CSS for styling and JavaScript for adding interactivity.

Here are some basic rules to keep in mind when writing HTML code:

1. Always start with a doctype declaration at the beginning of your HTML file to specify
the version of HTML you are using. For example, <!DOCTYPE html> is used for
HTML5.
2. Use the <html> tag to enclose all of your HTML code.
3. The <head> section of your HTML document is used to contain information about the
document, such as the title, author, and meta data. Use the <title> tag to define the title of
your document.
4. Use the <body> tag to contain the visible content of your HTML document.
5. Use appropriate HTML tags to mark up your content. For example, use <h1> to <h6>
tags to define headings, <p> tags for paragraphs, <ul> and <ol> tags for lists, <a> tags for
links, etc.
6. Always use closing tags for all HTML elements, unless they are self-closing tags. For
example, <img> tags are self-closing.
7. Use attributes to specify additional information about an HTML element. For example,
the <a> tag uses the href attribute to specify the link URL.
8. Use indentation and white space to make your HTML code easier to read and maintain.
9. Always validate your HTML code using a validator such as the W3C Markup Validation
Service to ensure that it is well-formed and conforms to the HTML standard.
10. Use comments to explain your code and provide additional information for other
developers who may read your code in the future. Use the <!-- --> syntax to add
comments in your HTML code.

DIFFERENT TYPES OF TAGS:

There are two types of tags. They are:

1. Standalone tags
2. Paired tags

STANDALONE TAG:

A standalone tag, also known as a self-closing tag, is an HTML tag that doesn't require a closing
tag. Instead, the tag is closed by adding a forward slash (/) at the end of the opening tag.

Here are some examples of self-closing tags:

 <br /> : used to insert a line break


 <hr /> : used to insert a horizontal rule
 <img /> : used to embed images in the document
 <input /> : used to create input fields for forms
 <meta /> : used to define metadata for the document

 In HTML5, it is not necessary to include a slash at the end of self-closing tags, as they are
automatically recognized as self-closing.

 So, <br> and <br /> are equivalent in HTML5. However, it is still a good practice to
include the slash for backwards compatibility with older versions of HTML.
Example for creating an html page:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Welcome to my webpage!</h1>

<p>This is my first HTML page.</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

</body>

</html>
This code creates a simple HTML page with a title, a heading, a paragraph, and an unordered
list.

 The <!DOCTYPE html> tag declares the document type as HTML5.

 The <html> tag encloses the entire document, and the <head> tag contains metadata about
the document, including the title of the page.

 The <body> tag contains the visible content of the page, including the heading, paragraph,
and list.

 The heading is created using the <h1> tag, and the paragraph is created using the <p> tag.

 The list is created using the <ul> tag, and each list item is created using the <li> tag.

 This is a very basic example, and there are many other HTML tags and attributes that can
be used to create more complex web pages.

PAIRED TAGS:

Paired tags, also known as opening and closing tags, are HTML tags that require a starting tag
and an ending tag to define a range of content or functionality.

The content to be enclosed is placed between the opening and closing tags. The closing tag is
marked by adding a forward slash (/) before the tag name.

Here are some examples of paired tags:

 <h1> and </h1>: used to define a main heading

 <p> and </p>: used to define a paragraph of text

 <ul> and </ul>: used to define an unordered list

 <ol> and </ol>: used to define an ordered list


 <li> and </li>: used to define a list item

 <table> and </table> : used to define a table of data

 <tr> and </tr>: used to define a table row

 <td> and </td>: used to define a table data cell

 <form> and </form> : used to define a form for user input

 <input> and </input> : used to define an input field for a form

Here's an example of how paired tags are used in HTML:

<!DOCTYPE html>

<html>

<head>

<title>Paired Tag Example</title>

</head>

<body>

<h1>Welcome to my website</h1>

<p>Here's some text in a paragraph</p>

<ul>

<li>List item 1</li>

<li>List item 2</li>

</ul>
</body>

</html>

In this example, the <h1> tag is used to define the main heading, and the content "Welcome to my
website" is placed between the opening and closing tags.

Similarly, the <p> tag is used to define a paragraph of text, and the content "Here's some text in a
paragraph" is enclosed between the opening and closing tags.

Finally, the <ul> tag is used to define an unordered list, and the two list items are enclosed between <li>
and </li> tags.

BASIC HTML TAGS:

1. <html>: indicates the beginning and end of an HTML document.


2. <head>: contains metadata about the document, such as the title and links to external
stylesheets.
3. <title>: specifies the title of the document, which is displayed in the browser's title bar.
4. <body>: contains the visible content of the document, such as text, images, and links.
5. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: used for headings of varying sizes, with <h1> being
the largest and <h6> being the smallest.
6. <p>: used to define a paragraph of text.
7. <a>: creates a hyperlink to another webpage or document.
8. <img>: used to embed an image in the document.
9. <ul>, <ol>, <li>: used to create unordered and ordered lists with list items.
10. <table>, <tr>, <td>: used to create a table with rows and cells of data.
11. <form>, <input>, <button>: used to create forms for user input, with input fields and
buttons for submitting data.
Example of how to use some of the basic HTML tags to create a simple webpage:

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to my webpage!</h1>

<p>This is my first HTML page.</p>

<h2>My favorite things</h2>

<ul>

<li>Chocolate</li>

<li>Coffee</li>

<li>Music</li>

</ul>

<h2>My top 3 websites</h2>

<ol>
<li><a href="https://www.google.com/">Google</a></li>

<li><a href="https://www.youtube.com/">YouTube</a></li>

<li><a href="https://www.github.com/">GitHub</a></li>

</ol>

<h2>A cute kitten</h2>

<img src="https://placekitten.com/200/200">

</body>

</html>

 <html> and </html> enclose the entire HTML document.

 <head> and </head> contain the metadata of the document, including the title of the
webpage.
 <title> and </title> specify the title of the webpage, which appears in the browser's title
bar.
 <body> and </body> contain the visible content of the webpage.

 <h1> and </h1> create a main heading.

 <p> and </p> create a paragraph of text.

 <h2> and </h2> create subheadings.


 <ul> and </ul> create an unordered list.

 <li> and </li> create list items.

 <ol> and </ol> create an ordered list.

 <a> and </a> create hyperlinks to other webpages.

 <img> creates an image, and src specifies the location of the image.
COLOR AND IMAGE IMPLEMENTATION IN HTML:

To add color and images to an HTML page, you can use the following tags and attributes:

1. Setting Background Color: To set the background color of a web page, you can use the
bgcolor attribute in the <body> tag. You can specify the color using a color name or a hex

code. For example, to set the background color to yellow, you can use:
<body bgcolor="yellow">

2. Adding Color to Text: To add color to text, you can use the <font> tag with the color attribute.
For example, to set the color of some text to red, you can use:

<font color="red">This text is red</font>

3. Adding Images: To add an image to a web page, you can use the <img> tag with the src attribute.
The src attribute specifies the location of the image file. For example, to add an image file named
"example.jpg" to a web page, you can use:

<img src="example.jpg">

4. Adding Color to Background of Text: To set the color of the background behind text, you can use
the <span> tag with the style attribute. For example, to set the background color behind some text
to blue, you can use:

<span style="background-color: blue;">This text has a blue background</span>

5. Adding Background Image: To set a background image for a web page, you can use the
background-image property in CSS. You can specify the location of the image file and set it as the
background image for the entire page or for a specific element. For example, to set a background
image for the entire page, you can use:

<style>
body {
background-image: url("example.jpg");
}
</style>

This sets the image file named "example.jpg" as the background image for the entire web page.

STANDRAD HTML DOCUMENT STRUCTURE:

A standard HTML document structure typically consists of the following basic elements:

1. Document Type Declaration (DTD): This is the first line of an HTML document that
specifies the version of HTML being used, as well as the document type. The most
commonly used DTD is the HTML5 doctype, which looks like this: <!DOCTYPE html>.
2. HTML element: This is the root element of an HTML document and contains all the
other elements of the page. It is enclosed within opening and closing html tags.
3. Head element: This element contains the metadata of the document, such as the page title,
stylesheets, scripts, and other information that is not visible on the page itself. The head
element is enclosed within opening and closing head tags.
4. Body element: This is the main content of the document and contains all the visible
elements, such as text, images, videos, and other multimedia. The body element is
enclosed within opening and closing body tags.
Here is an example of a basic HTML document structure:

<html>

<head>

<title>My Page</title>

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

</head>

<body>

<h1>Welcome to my page</h1>

<p>This is my first HTML document.</p>

<img src="image.jpg" alt="An image">

</body>

</html>

BASIC TEXT MARKUP:

HTML provides several basic text markup elements that are used to format and style text on a
web page. Here are some of the most commonly used markup elements:

1. Heading tags: There are six levels of heading tags in HTML, ranging from h1 (the main
heading) to h6 (the smallest subheading). Headings provide a way to structure the content
of a web page and make it easier to read and navigate.
2. Paragraphs: The p tag is used to enclose paragraphs of text. This tag adds spacing and
indentation to the text, making it easier to read.
3. Bold and italic text: The b and i tags are used to make text bold and italic, respectively.
These tags are often used for emphasis or to highlight important information.
4. Lists: There are two types of lists in HTML: ordered lists ( ol) and unordered lists (ul).
Ordered lists are numbered, while unordered lists use bullet points. List items are
enclosed in li tags.
5. Links: The a tag is used to create links to other web pages or resources. The href attribute
is used to specify the URL of the target resource.

Here is an example of how these text markup elements might be used in an HTML document:

<html>

<head>

<title>Text Markup Example</title>

</head>

<body>

<h1>Heading 1</h1>

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

<p><b>This text is bold.</b></p>

<p><i>This text is italic.</i></p>

<h2>Heading 2</h2>

<ul>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

</ul>

<p><a href="https://www.example.com">This is a link</a></p>


</body>

</html>

IMAGES:

To include images in an HTML document, you can use the img tag. The img tag is a self-closing
tag, which means it doesn't need a closing tag.

Here is the basic syntax for the img tag:

<img src="image_url" alt="alternate_text">

The src attribute specifies the URL of the image file, while the alt attribute provides alternate

text for the image. The alt attribute is important for accessibility, as it allows visually impaired
users to understand the content of the image.

Here is an example of how to use the img tag to display an image on a web page:

<html>

<head>

<title>Image Example</title>

</head>

<body>

<h1>My Image</h1>

<img src="https://www.example.com/images/myimage.jpg" alt="A beautiful image">

</body>

</html>
In this example, the img tag is used to display an image with the src attribute set to the URL of

the image file, and the alt attribute set to a brief description of the image. When the page is
loaded, the browser will download the image from the specified URL and display it on the page.

HYPERTEXT LINKS:

Hypertext links, also known as hyperlinks or links, are a fundamental feature of the web that
allow users to navigate between different pages and resources on the internet.

In HTML, links are created using “a” tag.

Here is the basic syntax for creating a link in HTML:

<a href="target_url">link_text</a>

The href attribute specifies the target URL of the link, while the link text is enclosed in the a tag.
When the user clicks on the link, the browser will navigate to the specified URL.

Here is an example of how to create a link to the Google homepage:

<!DOCTYPE html>

<html>

<head>

<title>Link Example</title>

</head>

<body>

<h1>My Links</h1>

<p><a href="https://www.google.com">Go to Google</a></p>

</body>
</html>

In this example, the a tag is used to create a link to the Google homepage, with the href attribute set to
https://www.google.com and the link text set to "Go to Google". When the user clicks on the link, the

browser will navigate to the Google homepage.

LISTS:

There are three types of lists in HTML: ordered lists, unordered lists, and definition lists.

Unordered Lists

Unordered lists are used to group related items in no particular order. To create an unordered list,
use the ul tag and enclose the list items with li tags. Here's an example:

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

This will create a bulleted list with three items:

 Item 1
 Item 2
 Item 3
Ordered Lists

Ordered lists are used to group related items in a specific order. To create an ordered list, use the
ol tag and enclose the list items with li tags. Here's an example:

<ol>

<li>First Item</li>

<li>Second Item</li>

<li>Third Item</li>

</ol>

This will create a numbered list with three items:

1. First Item
2. Second Item
3. Third Item

You can also change the numbering style of an ordered list by using the type attribute. For
example:

<ol type="A">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>
This will create an alphabetical list with three items:

A. Item 1

B. Item 2

C. Item 3

Definition Lists

Definition lists are used to group related terms and their definitions. To create a definition list,
use the dl tag and enclose the term in a dt tag and its definition in a dd tag. Here's an example:

<dl>

<dt>Term 1</dt>

<dd>Definition 1</dd>

<dt>Term 2</dt>

<dd>Definition 2</dd>

<dt>Term 3</dt>

<dd>Definition 3</dd>

</dl>

This will create a definition list with three terms and their definitions:

Term 1 : Definition 1

Term 2 : Definition 2

Term 3 : Definition 3
You can also add nested lists inside li tags to create sub-lists in both ordered and unordered lists.

TABLES:

Tables in HTML are used to display data in rows and columns. Here is the basic structure of an HTML
table:

<table>

<tr>

<th>Column 1 Heading</th>

<th>Column 2 Heading</th>

</tr>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

The table tag is used to create a table, and each row is created using the tr tag. Within each row,
the th tag is used to create column headers, and the td tag is used to create cells.
In the example above, the first row contains the column headers "Column 1 Heading" and
"Column 2 Heading". The second and third rows contain data in the two columns.

By default, the content of a table is left-aligned. However, you can change the alignment of the
table data using the align attribute on the td or th tags, or by applying CSS styles to the table.

You can also add borders to a table by using the border attribute on the table tag. For example:

<table border="1">

This will add a border around the table.

In addition, you can merge cells using the colspan and rowspan attributes. The colspan attribute is
used to span a cell across multiple columns, and the rowspan attribute is used to span a cell across
multiple rows. Here is an example:

<table>

<tr>

<th colspan="2">Column Heading</th>

</tr>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td rowspan="2">Row 2, Column 1</td>

<td>Row 2, Column 2</td>


</tr>

<tr>

<td>Row 3, Column 2</td>

</tr>

</table>

In this example, the first row contains a cell that spans two columns using the colspan attribute. The
second row contains two cells in separate columns, and the third row contains a cell that spans two rows
using the rowspan attribute.

FORMS:

Forms are an essential part of interactive web applications, allowing users to submit data and
interact with the website. HTML forms are created using the form tag, which encloses all the
form elements.

Here is a basic example of an HTML form:

<form action="/submit-form" method="POST">

<label for="name">Name:</label>

<input type="text" id="name" name="name"><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email"><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password"><br>


<input type="submit" value="Submit">

</form>

 In this example, we have created a form with three input fields for name, email, and
password.

 The for attribute on the label tag associates the label with the input field using the id
attribute.

 This helps users to know what data to enter in each field.

 The name attribute is used to identify the input field when the form is submitted.

 The input tag creates the actual form elements.

 The action attribute on the form tag specifies the URL where the form data will be
submitted.

 The method attribute specifies the HTTP method used to submit the form data, either
"GET" or "POST". In this example, we have used the "POST" method.

 The type attribute on the input tag specifies the type of input field. In this example, we
have used the type="text" for the name field, type="email" for the email field, and
type="password" for the password field.

 The input tag also has a value attribute, which is used to set the default text for the submit
button.

Other common form elements include:

 textarea for multi-line text input

 select for drop-down menus

 radio for selecting one option from a group of options

 checkbox for selecting one or more options from a group of options


Form elements can also have various attributes like required, disabled, placeholder, etc. that can be
used to control the behavior and appearance of the input fields.

When a user submits a form, the data is sent to the server as a URL encoded string or as a JSON
object depending on the content type specified in the form tag. The server-side code can then
process the data and respond accordingly.

HTML5:

HTML5 is the latest version of the HTML standard, and it is designed to provide enhanced
support for multimedia and interactive content. It was developed by the World Wide Web
Consortium (W3C) and was released in October 2014.

HTML5 introduces several new features and enhancements over its predecessor, HTML4. Some
of the key features of HTML5 include:

1. Semantic markup: HTML5 includes new elements that are designed to provide more
meaningful and descriptive markup for content. For example, <header>, <footer>, <nav>,
and <article> are some of the new semantic elements that provide better structure and
organization to web pages.
2. Video and audio support: HTML5 includes built-in support for playing video and audio
files without the need for third-party plugins like Flash. The <video> and <audio> elements
make it easy to embed media content directly into web pages.
3. Canvas: HTML5 introduces the <canvas> element, which allows developers to create
dynamic and interactive graphics and animations using JavaScript.
4. Geolocation: HTML5 provides a way for web applications to access a user's geographic
location using the Geolocation API.
5. Offline web applications: HTML5 includes support for creating web applications that can
be used offline. The Offline Web Applications API allows developers to store application
data on the client-side, so the application can continue to function even when the user is
offline.
6. Web storage: HTML5 includes support for two new client-side storage options:
localStorage and sessionStorage. These storage options allow developers to store data on
the client-side that can be accessed and updated by the application.
7. Form enhancements: HTML5 introduces several enhancements to forms, including new
form elements, input types, and attributes. These enhancements make it easier to create
more user-friendly and accessible forms.

HTML5 has become the standard for modern web development, and it is widely supported by
modern web browsers. It has enabled the development of rich and interactive web applications
that can run seamlessly across multiple devices and platforms.

ADVANTAGES OF HTML5:

1. Improved multimedia support: HTML5 provides built-in support for playing audio and
video content, which eliminates the need for third-party plugins like Flash. This makes it
easier for developers to create rich media experiences for their users.
2. Mobile-friendly: HTML5 is designed to be mobile-friendly and provides a responsive
design, which enables web applications to adapt to different screen sizes and resolutions.
3. Better accessibility: HTML5 introduces new semantic elements, which improve the
accessibility of web pages for users with disabilities. The new elements provide more
meaningful markup for content, which makes it easier for screen readers and other
assistive technologies to understand the content of the web page.
4. Offline support: HTML5 provides support for creating web applications that can be used
offline. This makes it possible for users to access web applications even when they are
not connected to the internet.
5. Improved performance: HTML5 includes several features that improve the performance
of web applications. For example, the new canvas element provides a high-performance
way to render graphics and animations.

DISADVANTAGES OF HTML5:

1. Compatibility issues: Older web browsers may not support all of the features of HTML5,
which can make it difficult to create web applications that work across all browsers and
devices.
2. Security vulnerabilities: HTML5 introduces new features and APIs, which can create new
security vulnerabilities that need to be addressed by developers.
3. Lack of standardization: The HTML5 specification is still evolving, and there is not yet a
complete set of standards for all of the new features and APIs.
4. Steep learning curve: HTML5 introduces several new features and APIs, which can
require developers to learn new skills and techniques to take advantage of these features.
5. Lack of support for some features: While HTML5 provides many new features and APIs,
there are still some features that are not yet supported, which can limit the functionality
of web applications.
Here is an example of HTML5 code that creates a simple webpage with a heading, a paragraph, an image,
and a video:

<!DOCTYPE html>

<html>

<head>

<title>My HTML5 Page</title>

</head>

<body>
<h1>Welcome to my HTML5 Page</h1>

<p>This is a paragraph of text on my page.</p>

<img src="image.jpg" alt="My image">

<video width="320" height="240" controls>

<source src="video.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

</body>

</html>

 In this example, the <!DOCTYPE html> declaration at the beginning of the code indicates that
this is an HTML5 document.
 The <html> element is the root element of the document, and the <head> element contains
metadata about the document, including the page title.

 The <body> element contains the main content of the page, including a heading ( <h1>), a
paragraph (<p>), an image ( <img>), and a video (<video>).

 The src attribute of the <img> and <video> elements specifies the location of the image and video
files, and the alt attribute of the <img> element provides alternative text for the image.

 The <video> element also includes a controls attribute, which displays video controls (e.g. play,
pause, volume) to the user.
CSS BASIC SYNTAX:

CSS, or Cascading Style Sheets, is a language used to style and format web pages. It is used to
define the layout, typography, colors, and other visual aspects of a webpage. Here are the basic
syntax rules for CSS:

1. Selectors: CSS selectors are used to target HTML elements that you want to style. For
example, to target all the headings on a webpage, you would use the selector h1, h2, h3, h4,
h5, h6.

2. Declaration Block: A declaration block consists of one or more property-value pairs,


enclosed in curly braces. For example:

h1 {

font-size: 24px;

color: red;

In this example, font-size and color are properties, and 24px and red are their corresponding values.

3. Properties: CSS properties are used to define the visual properties of an HTML element.
For example, font-size is a property that defines the size of the text.
4. Values: CSS values are used to set the value of a property. For example, 24px is a value
that sets the font size to 24 pixels.
5. Comments: CSS supports single-line and multi-line comments. Single-line comments
start with // and end with a line break. Multi-line comments start with /* and end with */.
Here is an example of CSS syntax:

/* This is a multi-line comment */

h1 {

font-size: 24px; /* This is a single-line comment */

color: red;

In this example, the selector is h1, the declaration block is enclosed in curly braces, and there are two
property-value pairs, font-size: 24px and color: red.

LEVELS OF CASCADING STYLESHEETS:

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language. CSS has three levels of implementation, each with its
own set of features:

1. CSS Level 1: This is the first version of CSS, and it provides the basic styling
capabilities. It includes properties such as font-size, color, and background, and it allows
for the separation of document content from document presentation. CSS Level 1 was
released in 1996.
2. CSS Level 2: This is the second version of CSS and it introduced many new features,
including support for media-specific stylesheets, positioning, and advanced selectors.
CSS Level 2 was released in 1998.
3. CSS Level 3: This is the most recent version of CSS and it includes many new features
such as multiple backgrounds, flexible box layout, grid layout, and animations. CSS
Level 3 is divided into several modules, such as Selectors, Box Model, Backgrounds and
Borders, Text Effects, and more. Each module can be used independently, allowing
developers to pick and choose which features they want to use. CSS Level 3 was released
in 1999, but its modules have been released at different times, and the standard is still
evolving.

In addition to these levels, there are also CSS frameworks and preprocessors that build on top of
CSS to provide additional functionality and simplify the styling process. Some examples of CSS
frameworks include Bootstrap, Foundation, and Materialize. CSS preprocessors such as Sass,
Less, and Stylus allow for the use of variables, functions, and other programming constructs to
generate CSS code.

STYELE SPECIFICATION FORMAT IN CSS:

The style specification format in CSS consists of three parts: the selector, the
property, and the value. Here's how it works:

1. Selector: This is the element or elements to which you want to apply a


particular style. Selectors can be based on HTML elements (e.g., p, h1, div),
class or ID attributes (e.g., .my-class, #my-id), or other attributes (e.g.,
[title="my title"]). Selectors can also be combined to target specific elements
more precisely (e.g., h1.my-class).
2. Property: This is the aspect of the element's style that you want to define.
Properties include things like color, font-size, background-image, border, and
many others. There are many different properties in CSS that can be used to
customize the appearance of HTML elements.
3. Value: This is the specific setting that you want to apply to the property. For
example, if you want to change the color of an element's text, you would use
the color property and set its value to a specific color (e.g., color: blue;). Values
can be in many different formats, depending on the property being set (e.g., hex
codes, color names, pixel measurements, etc.).

Here's an example of how all of these parts come together in a CSS style rule:

h1 {
color: blue;
font-size: 24px;
}

In this example, the selector is "h1" (meaning this style rule will apply to all h1 elements), and
the properties being set are "color" (with a value of "blue") and "font-size" (with a value of
"24px").

When this rule is applied, all h1 elements on the page will be blue and have a font size of 24
pixels.

CSS provides several different selector forms that allow you to target specific HTML elements,
attributes, or groups of elements. Here are some of the most common selector forms in CSS:

1. Type Selector: This targets all elements of a certain type (e.g., p, h1, div).

p{
/* Styles for all <p> elements */
}
2. Class Selector: This targets elements that have a specific class attribute (denoted by a dot
before the class name).

.my-class {
/* Styles for all elements with class="my-class" */
}
3. ID Selector: This targets a single element with a specific ID attribute (denoted by a hash
before the ID name).
cs

#my-id {
/* Styles for the element with id="my-id" */
}
4. Attribute Selector: This targets elements with a specific attribute value (e.g., [href],
[type="text"], [target="_blank"]).
css

a[href] {
/* Styles for all <a> elements with an href attribute */
}
5. Descendant Selector: This targets elements that are descendants of a specific parent
element.

ul li {
/* Styles for all <li> elements that are descendants of a <ul> element */
}
6. Child Selector: This targets elements that are direct children of a specific parent element.

ul > li {
/* Styles for all <li> elements that are direct children of a <ul> element */
}
7. Adjacent Sibling Selector: This targets elements that are immediately following a specific
sibling element.

h1 + p {
/* Styles for all <p> elements immediately following an <h1> element */
}
8. General Sibling Selector: This targets elements that are siblings of a specific element.

h1 ~ p {
/* Styles for all <p> elements that are siblings of an <h1> element */
}
There are many more types of selectors in CSS, but these are some of the most commonly used ones. By
combining different selector forms and using them with specific property-value pairs, you can create a
wide variety of styles for your HTML elements.

THE BOX MODEL:


The box model is a fundamental concept in CSS that describes how HTML elements are
represented as rectangular boxes on a web page. The box model consists of four parts:

1. Content: This is the actual content of the element, such as text or an image.
2. Padding: This is the space between the content and the border of the element. Padding
can be set for each side of the element using the padding property.
3. Border: This is the line that surrounds the padding and content of the element. Borders
can be set for each side of the element using the border property.
4. Margin: This is the space between the border of the element and other elements on the
page. Margins can be set for each side of the element using the margin property.
Certainly, here's a diagram of the box model in CSS:
 This diagram shows the four components of the box model (margin, border, padding, and
content), with the content in the center and each subsequent layer surrounding it.

 The margin is the outermost layer, followed by the border, padding, and content.

 The width of an element is the sum of the content width, padding, border, and margin.

Here is an example of how the box model works:

<div class="box">
This is some content.
</div>

.box {
padding: 20px;
border: 1px solid black;
margin: 10px;
}

 In this example, the div element is given a class of "box" and is styled using CSS.

 The padding property sets 20 pixels of space between the content and the border of the
element. The border property sets a 1-pixel-thick black border around the element.

 The margin property sets 10 pixels of space between the border of the element and other
elements on the page.

 The total width of the element in this example would be the sum of the content width
(which is determined by the size of the text), the left and right padding (20px each), the
left and right border (1px each), and the left and right margin (10px each).
 This is important to keep in mind when designing web pages, as it affects how elements
are positioned and interact with other elements on the page.

CONFLICT RESOLUTION:
In CSS, conflicts can arise when two or more styles are applied to the same element and
the styles have conflicting values. For example, if one style sets the font size to 16px and
another style sets the font size to 14px, there is a conflict and the browser needs to
decide which style to apply.

To resolve conflicts in CSS, the following rules are applied:

1. Specificity: Styles with a more specific selector take precedence over less specific
selectors. For example, a style with an ID selector ( #example ) is more specific than
a style with a class selector (.example ).
2. Order of Appearance: If two styles have the same specificity, the one that appears
later in the code takes precedence. So if two styles have the same specificity and
apply to the same element, the one that appears last in the CSS file will be
applied.
3. Importance: You can use the !important declaration to give a style precedence
over other styles, regardless of specificity or order of appearance. This should be
used sparingly, as it can make your code difficult to maintain.
Here is an example of how specificity works in CSS:

<style>
/* This rule has a class selector and a type selector */
h1.example {
color: red;
}

/* This rule has an ID selector and a type selector */


#example h1 {
color: blue;
}
</style>

<!-- This will be red, because the first rule has a more specific selector -->
<h1 class="example">Hello World</h1>

<!-- This will be blue, because the second rule has a more specific selector -->
<div id="example">
<h1>Hello World</h1>
</div>

EXAMPLE FOR CONFLICT RESOLUTION

<div id="example" class="container">


This is some text.
</div>
#example {
color: red;
}

.container {
color: blue;
}

In this example, the div element has an ID of "example" and a class of "container".

The first style rule sets the color of the text inside the div to red, while the second style rule sets
the color to blue.

Because the id selector has a higher specificity than the class selector, the color of the text will
be red, even though the second style rule comes after the first rule in the CSS file.

If we want the text to be blue instead, we can change the order of the rules or increase the
specificity of the .container selector:

.container {

color: blue;

#example {

color: red;
}

In this updated example, the .container selector comes first in the CSS file, so it takes precedence over the
#example selector. Alternatively, we could increase the specificity of the .container selector by adding

another selector:

div.container {
color: blue;
}

#example {
color: red;
}

In this updated example, the selector div.container has a higher specificity than the #example selector, so
the text will be blue. By understanding how conflicts are resolved in CSS and following best practices for
writing styles, we can ensure that our web pages are consistent and predictable.

You might also like