Scribd
Upload
6 views42 pages

Shreya

HTML, or Hyper Text Markup Language, is essential for creating web pages and applications, utilizing hypertext to link documents and markup to format text. The document outlines the history of HTML from its inception in 1991 through various versions, highlighting key features and tags, including semantic structure, media support, and form elements. Additionally, it describes the syntax and usage of HTML tags, attributes, and various controls for user input.

Uploaded by

shahajipatil317
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
6 views42 pages

Shreya

HTML, or Hyper Text Markup Language, is essential for creating web pages and applications, utilizing hypertext to link documents and markup to format text. The document outlines the history of HTML from its inception in 1991 through various versions, highlighting key features and tags, including semantic structure, media support, and form elements. Additionally, it describes the syntax and usage of HTML tags, attributes, and various controls for user input.

Uploaded by

shahajipatil317
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/ 42

Introduction To Html-

HTML is an acronym which stands for Hyper Text Markup Language which
is used for creating web pages and web applications. Let's see what is meant
by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link
within it, is a hypertext. Whenever you click on a link which brings you to a
new webpage, you have clicked on a hypertext. HyperText is a way to link two
or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to


apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables,
links, etc

History Of Html-

HTML 1.0 (1991): The first version of HTML, known as HTML 1.0, was
introduced by Tim Berners-Lee in 1991. It included basic elements for
structuring a document, such as headings, paragraphs, and links.

HTML 2.0 (1995): The Internet Engineering Task Force (IETF) took over the
development of HTML, and HTML 2.0 was released in 1995. This version
introduced new features like tables and text alignment.

HTML 3.0 (1997): The World Wide Web Consortium (W3C) took over the
HTML standardization process. HTML 3.0 included more features like applets,
scripting, and support for style sheets.
HTML 4.0 (1997-1999): HTML 4.0, released in 1997, brought further
improvements, including support for scripting languages (like JavaScript) and
the introduction of the Document Object Model (DOM). HTML 4.01, a minor
revision, was released in 1999.
XHTML (2000): Extensible Hypertext Markup Language (XHTML) was
introduced as a reformulation of HTML using XML syntax. XHTML 1.0 was
published in 2000, emphasizing a stricter and cleaner coding style.
HTML5 (2014): HTML5, the latest major version of HTML, was officially
standardized by the W3C in 2014. It brought significant enhancements,
including new semantic elements (header, nav, article, etc.), multimedia
support without plugins (audio and video), and improved APIs for JavaScript.
Features of html-

1) Simple and User-Friendly-HTML is easy to use and learn.HTML tags


make it easy for people and browsers to read the content efficiently.

2) Semantic Structure-There are several HTML tags for their specialized


uses.These HTML tags are defines their uses and purposes.Like <footer> ,
<header>, <article> etc.

 3)SEO (Search Engine Optimization)-HTML tags also help in the SEO of


websites.HTML tags such as title, meta with description, header, etc. help in
the SEO of our website.
4)Media Support-With the help of HTML elements, we can run media like
audio, video, and display images on web pages

5)Platform Independent-It means HTML can be run on any device which has
a basic web browser.Even on our mobile devices, we have chrome, firefox,
opera mini, etc. browsers so we can run HTML easily on any device.

6)Used with other languages-Another important and useful feature of HTML


is that we can use it in conjunction with other languages such as CSS or
JavaScript.We use HTML with other languages to create interactive and
dynamic web pages.

Html Tags-All HTML tags must enclosed within < > these brackets.Every tag in
HTML perform different tasks.If you have used an open tag <tag>, then you
must use a close tag </tag> (except some tags)

Syntax-<tag> content </tag>


Tag Description-
<!DOCTYPE...> -This tag defines the document type and HTML version.
<html>-This tag encloses the complete HTML document and mainly comprises
of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.
<head>- This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
<title> -The <title> tag is used inside the <head> tag to mention the
document title.
<body> -This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.
<h1 to h6> -This tag represents the heading.
<p> -This tag represents a paragraph.
Heading Tags-
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and<h6>. While displaying any heading, browser
adds one line before and one line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag-
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag
as shown below in the example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Output-
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag-
Whenever you use the <br /> element, anything following it starts from the
next line. This tag is an example of an empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
</p>
</body>
</html>
Output-
Hello
You delivered your assignment on time.
Thanks
Center tag-
You can use <center> tag to put any content in the center of the page or any
table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Output-
This text is not in the center.
This text is in the center
Html Attributes-
An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two
parts: a name and a value:The name is the property you want to set. For
example, the paragraph <p> element in the example carries an attribute
whose name is align, which you can use to indicate the alignment of paragraph
on the page. Attribute names and attribute values are case-insensitive.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
</body>
</html>
Output-
This is left aligned
This is center aligned
List Type-
1. Unordered List (<ul>)-An unordered list is used for listing items without
any specific order. It's typically rendered with bullet points.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>

2. Ordered List (<ol>)-An ordered list is used for listing items in a specific
order. The items in an ordered list are usually displayed with numbers or
letters.
<ol>
<li>First step</li>
<li>Second step</li>

<li>Third step</li>

</ol>

Essential Table Tags


<table>: The container tag for the entire table.
<tr>: Defines a table row.
<td>: Defines a table cell (data cell).
<th>: Defines a table header cell. Content in <th> is typically bold and
centered.

Common Table Attributes=

border: Specifies the border thickness of the table. (e.g., border="1")

cellpadding: Defines the space between the cell content and its borders. (e.g.,
cellpadding="5")

cellspacing: Defines the space between cells. (e.g., cellspacing="5")

width and height: Specify the width and height of the table.

align: Determines the alignment of the table on the page (e.g., left, center,
right).

colspan: Used within <td> or <th> to specify how many columns a cell should
span.

rowspan: Used within <td> or <th> to specify how many rows a cell should
span.

Example with Attributes

<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Table</title>
</head>
<body>
<h2>My Favorite Fruits</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Color</th>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple</td>
</tr>
</table>
</body>
</html>

Html Image tag-


The HTML <img> tag is used to embed images in web pages. It's a self-closing
tag, meaning it does not need a closing tag. Here's a basic description of the
<img> tag along with its commonly used attributes:
Basic Syntax:
<img src="url" alt="description">
Attributes:
src (required): Specifies the URL (path) of the image.
Example: <img src="image.jpg"> or
<img src="http://www.example.com/image.jpg">
alt (recommended): Provides alternative text for the image if it cannot be
displayed for any reason. This is also important for accessibility, as screen
readers use this text to describe the image to visually impaired users.
Example: <img src="image.jpg" alt="A description of the image">
width and height: Specify the width and height of the image in pixels. It's a
good practice to define these to ensure that the page layout is stable even
when the images are not yet loaded
<img src="https://www.example.com/path/to/image.jpg" alt="Beautiful
landscape" width="500" height="300" title="Landscape Image">
HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page.
It can create hyperlink to other web page as well as files, location, or any URL.
The "href" attribute is the most important attribute of the HTML a tag. and
which links to destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other
words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

<a href="second.html">Click for Second Page</a>


Html attributes
o HTML attributes are special words which provide additional
information about the elements or attributes are the modifier of the
HTML element.
o Each element or tag can have attributes, which defines the behaviour of
that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is
recommended by W3C that it should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give
space between two attributes.

Syntax
1. <element attribute_name="value">content</element>

HTML Form-An HTML form is a section of a document which contains


controls such as text fields, password fields, checkboxes, radio buttons, submit
button, menus etc.An HTML form facilitates the user to enter data that is to be
sent to the server for processing such as name, email address, password,
phone number, etc. Syntax-
1. <form>
2. //Form elements
3. </form>
HTML <input> element-

The HTML <input> element is fundamental form element. It is used to create


form fields, to take input from user. We can apply different input filed to gather
different information form user. Following is the example to show the simple
text input.

Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>

Output:

HTML TextField Control-


The type="text" attribute of input tag creates textfield control also known as
single line textfield control. The name attribute is optional, but it is required
for the server side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Output:

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The
size of <textarea> can be specify either using "rows" or "cols" attribute or by
CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>

Output:

Label Tag in Form

It is considered better to have label in form. As it makes the code


parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need
to have for attribute in label tag that must be same as id attribute of input tag.

1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

Output:
HTML Password Field Control

The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

Output:

HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>
It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control

The radio button is used to select one option from multiple options. It is used
for selection of gender, quiz questions etc.If you use one name for all the radio
buttons, only one radio button can be selected at a time.Using radio buttons
for multiple options, you can only choose a single option at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female
<br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
Note: These are similar to radio button except it can choose multiple
options at a time and radio button can select one button at a time, and its
display.

Output:

Submit button control

HTML <input type="submit"> are used to add a submit button on web page.
When user clicks on submit button, then form get submit to the server.

Syntax:

1. <input type="submit" value="submit">

The type = submit , specifying that it is a submit button


The value attribute can be anything which we write on button on web page.

Example:

1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Output:

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a


form. This element is used with <legend> element which provide caption for
the grouped elements.

Example:

1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>

Output:

HTML Form Example

Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br/
<input type="radio" id="gender" name="gender" value="female"/>Female
<br/>
<input type="radio" id="gender" name="gender" value="others"/>others
<br/>
20. <br>Enter your Address:<br>
21. <textarea></textarea><br>
22. <input type="submit" value="sign-up">
23. </fieldset>
24. </form>
25. </body>
26. </html> Output:
Html Frameset-
The <frameset> tag in HTML is used to define the frameset. The <frameset>
element contains one or more frame elements. It is used to specify the number
of rows and columns in frameset with their pixel of spaces. Each element can
hold a separate document.
Syntax:
<frameset cols = "pixels|%|*">
 cols: The cols attribute is used to create vertical frames in a web browser.
This attribute is basically used to define the no. of columns and their size
inside the frameset tag.
 rows: The rows attribute is used to create horizontal frames in the web
browser. This attribute is used to define the no. of rows and their size
inside the frameset tag.
 border: This attribute of frameset tag defines the width of the border of
each frame in pixels. Zero value is used for no border.
 frameborder: This attribute of frameset tag is used to specify whether a
three-dimensional border should be displayed between the frames or not
for this use two values 0 and 1, where 0 defines no border and value 1
signifies for yes there will be a border.
 framespacing: This attribute of frameset tag is used to specify the amount
of spacing between the frames in a frameset. This can take any integer
value as a parameter which basically denotes the value in pixel
 Eg-
 1]
<!DOCTYPE html>
<html>
<head>
<title>frameset attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src = "attr1.png" />
<frame name = "main" src = "gradient3.png" />
<frame name = "bottom" src = "col_last.png" />
</frameset>
</html>

2] <!DOCTYPE html>
<html>
<head>
<title>frameset attribute</title>
</head>

<frameset cols = "30%, 40%, 30%">


<frame name = "top" src = "attr1.png" />
<frame name = "main" src = "gradient3.png" />
<frame name = "bottom" src = "col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
3]
<!DOCTYPE html>
<html>
<head>
<title>Nested Frameset Example</title>
</head>
<frameset rows="20%, 80%">
<frame src="frame_top.html">
<frameset cols="25%, 75%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
</frameset>
</html>
Limitations Of Html-
1. Static Nature
HTML is a static language. It defines the structure and presentation of web
content but cannot produce dynamic interactions by itself. As a result, creating
interactive web applications, like online games or real-time chat systems, can
be challenging with HTML alone. For dynamic functionalities, Web developers
often turn to JavaScript, a scripting language that complements HTML’s static
nature.
2. Complexity in Structure
Creating and maintaining the structure of HTML documents is complex,
mainly for large-scale projects. As webpages grow in complexity, managing
nested HTML elements is challenging. This complexity may lead to errors.
3. Limited Security
HTML alone does not provide strong security features. It can’t protect against
various web weaknesses, like cross-site scripting (XSS) or SQL injection. These
security weaknesses can lead to data hacking. Additional measures have to be
taken, such as server-side scripting, to protect websites.
4. Code Length
Creating a simple webpage using pure HTML can result in many lines of code.
Especially if you’re coding for complex structures. This can lead to code
repetition, maintenance challenges, and increased load times for web pages.
Basics Of CSS-

What is CSS?

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

h1 {

color: white;

text-align: center;

p{

font-family: verdana;

font-size: 20px;

</style>
</head>

<body>

<h1>My First CSS Example</h1>

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

</body>

</html>

CSS Syntax

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by


semicolons.

Each declaration includes a CSS property name and a value, separated by a


colon.

Multiple CSS declarations are separated with semicolons, and declaration


blocks are surrounded by curly braces.

Types Of CSS-

There are three types of CSS which are given below:


 Inline CSS
 Internal or Embedded CSS
 External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached
to the element is known as inline CSS. This kind of style is specified within an
HTML tag using the style attribute.
Example: This example shows the application of inline-css.

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<h1 style="color: blue; text-align: center;">Welcome to My Website</h1>

<p style="font-size: 16px; line-height: 1.5;">

This is a paragraph of text with inline CSS styles. The font size is set to 16
pixels,

and the line height is set to 1.5 times the font size.

</p>

</body>

</html>

Internal or Embedded CSS: This can be used when a single HTML document
must be styled uniquely. The CSS rule set should be within the HTML file in the
head section i.e. the CSS is embedded within the <style> tag inside the head
section of the HTML file.
Example: This example shows the application of internal-css.

<!DOCTYPE html>

<html>
<head>

<title>Internal CSS</title>

<style>

.main {

text-align: center;

.GFG {

color: #009900;

font-size: 50px;

font-weight: bold;

.geeks {

font-style: bold;

font-size: 20px;

</style>

</head>

<body>

<div class="main">

<div class="GFG">Welcome To CSS</div>

<div class="geeks">
A computer science portal for geeks

</div>

</div>

</body>

</html>

External CSS: External CSS contains separate CSS files that contain only style
properties with the help of tag attributes (For example class, id, heading, …
etc). CSS property is written in a separate file with a .css extension and should
be linked to the HTML document using a link tag. It means that, for each
element, style can be set only once and will be applied across web pages.
Example: The file given below contains CSS property. This file saves with .css
extension. For Ex: geeks.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
Below is the HTML file that is making use of the created external style sheet.
 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.
 html

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="geeks.css" />

</head>

<body>

<div class="main">

<div class="GFG">GeeksForGeeks</div>

<div id="geeks">

A computer science portal for geeks

</div>

</div>

</body>

</html>

Output:
Importance Of CSS-

1. Visual Styling: CSS allows web developers to control the presentation and
appearance of web pages. It provides a wide range of styling options such
as colors, fonts, layouts, backgrounds, borders, and more. With CSS, you
can make your website visually attractive, consistent, and aligned with
your branding.

2. Separation of Content and Design: CSS enables the separation of content


from design. By keeping the structure and content of a website separate
from its styling, it becomes easier to make changes and updates. This
separation enhances code readability, maintainability, and reusability,
allowing developers to make modifications efficiently.

3. Consistency and Efficiency: CSS allows developers to define styles once


and apply them to multiple elements across a website. By using classes
and IDs, CSS enables the creation of reusable styles that can be applied to
various elements. This not only ensures consistency in design but also
improves development efficiency by reducing code duplication.

4. Browser Compatibility: CSS provides a standardized way of styling web


pages, ensuring compatibility across different web browsers. With CSS,
you can write code that works consistently across major browsers,
reducing the need for browser-specific hacks or workarounds.
5. Animation and Interactivity: CSS includes powerful animation and
transition capabilities that enable developers to add interactive and
engaging elements to web pages.

6. Print Styling: CSS also plays a role in print styling, allowing developers to
define specific styles for when web pages are printed. This is particularly
useful for generating printer-friendly versions of web content, ensuring
that printed documents maintain a consistent and professional
appearance.

CSS Selectors-A CSS selector selects the HTML element(s) you want to
style.
The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific


element.

The id of an element is unique within a page, so the id selector is used to select


one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {
text-align: center;

color: red;

</style>

</head>

<body>

<p id="p1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

Output-

Hello World!

This paragraph is not affected by the style.

Note: An id name cannot start with a number!


The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed
by the class name.
Example

In this example all HTML elements with class="center" will be red and
center-aligned:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>
Output-

Red and center-aligned heading

Red and center-aligned paragraph.

In this example only <p> elements with class="center" will be red and center-
aligned:

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>


</body>

</html>

Output-

This heading will not be affected

This paragraph will be red and center-aligned.

In this example the <p> element will be styled according to class="center" and
to class="large":

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

text-align: center;

color: red;

p.large {

font-size: 300%;
}

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

<p class="center large">This paragraph will be red, center-aligned, and in


a large font-size.</p>

</body>

</html>

Output-

This heading will not be affected

This paragraph will be red and center-aligned.

This paragraph will be red, center-aligned, and in a large font-size.

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style
definitions.

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.


<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

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

</body>

</html>

Output-

Hello World!
Smaller heading!
This is a paragraph.

Eg-2]
<!DOCTYPE html>

<html>

<head>

<title>Group Selector Example</title>

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

</head>

<body>

<h1>Heading One</h1>

<h2>Heading Two</h2>

<p>Paragraph One</p>

<p>Paragraph Two</p>

<div>Div content</div>

</body>

</html>

CSS(style.css)-

/* Group selector for h1, h2, and p elements */

h1, h2, p {

color: green;

font-family: Arial, sans-serif;

/* Separate style for div element */


div {

color: blue;

font-family: 'Times New Roman', serif;

CSS Properties-

A CSS property assign a style or behavior to an HTML element.

 color: Sets the text color.


 background-color: Sets the background color.
 Eg.

body {

color: #333; /* dark gray text color */

background-color: #f5f5f5; /* light gray background color */

 font-family: Sets the font for text.


 font-size: Sets the size of the font.
 font-weight: Sets the thickness of the font.

Eg.

h1 {

font-family: 'Arial', sans-serif;

font-size: 24px;

font-weight: bold;

 margin: Sets the margin outside an element.


 padding: Sets the padding inside an element.
 width / height: Sets the width/height of an element.

Eg.

div {

margin: 10px;

padding: 20px;

width: 300px;

height: 150px;

 border: Sets the border properties (width, style, and color).


 border-radius: Rounds the corners of an element.

Eg-

div {

border: 2px solid #ccc; /* 2px solid border with light gray color */

border-radius: 5px; /* 5px border radius for rounded corners */

Advantages And Limitations Of CSS-

CSS plays an important role, by using CSS you simply got to specify a repeated
style for element once & use it multiple times as because CSS will
automatically apply the required styles.
The main advantage of CSS is that style is applied consistently across variety of
sites. One instruction can control several areas which is advantageous.
Web designers needs to use few lines of programming for every page
improving site speed.
Cascading sheet not only simplifies website development, but also simplifies
the maintenance as a change of one line of code affects the whole web site and
maintenance time.
It is less complex therefore the effort are significantly reduced.
It has the power for re-positioning. It helps us to determine the changes
within the position of web elements who are there on the page.
Easy for the user to customize the online page
It reduces the file transfer size.

Limitations-
 With CSS, what works with one browser might not always work with
another. The web developers need to test for compatibility, running the
program across multiple browsers.
 After making the changes we need to confirm the compatibility if they
appear. The similar change affects on all the browsers.
 The programming language world is complicated for non-developers
and beginners. Different levels of CSS i.e. CSS, CSS 2, CSS 3 are often
quite confusing.
 Browser compatibility (some styles sheet are supported and some are
not).
 CSS works differently on different browsers. IE and Opera supports CSS
as different logic.

You might also like