DHTML

Introduction to DHTML
• DHTML, or Dynamic HTML, is a technology that differs from traditional HTML.
DHTML combines HTML, CSS, JavaScript, and the Document Object Model
(DOM) to create dynamic content.
• It uses the Dynamic Object Model to modify settings, properties, and methods.
• DHTML is not a technology; rather, it is the combination of three different
technologies, client-side scripting (JavaScript or VBScript), cascading style sheets
and document object model.
Purpose of DHTML
• DHTML has the ability to change a webpages look, content and style once the
document has loaded on our demand without changing or deleting everything
already existing on the browser’s webpage.
• DHTML can change the content of a webpage on demand without the browser
having to erase everything else, i.e. being able to alter changes on a webpage even
after the document has completely loaded.
Key Features of DHTML
• Tags and their properties can be changed using DHTML.
• It is used for real-time positioning.
• Dynamic fonts can be generated using DHTML.
• It is also used for data binding.
• It makes a webpage dynamic and be used to create animations, games,
applications along with providing new ways of navigating through websites.
• The functionality of a webpage is enhanced due to the usage of low-bandwidth
effect by DHTML.
• DHTML also facilitates the use of methods, events, properties, and codes.
Advantages:
• Size of the files are compact in compared to other interactional media like Flash or
Shockwave, and it downloads faster.
• It is supported by big browser manufacturers like Microsoft and Netscape.
• Highly flexible and easy to make changes.
• Viewer requires no extra plug-ins for browsing through the webpage that uses
DHTML, they do not need any extra requirements or special software to view it.
• User time is saved by sending less number of requests to the server. As it is possible
to modify and replace elements even after a page is loaded, it is not required to create
separate pages for changing styles which in turn saves time in building pages and
also reduces the number of requests that are sent to the server.
• It has more advanced functionality than a static HTML. it is capable of holding more
content on the web page at the same time.
Disadvantages:
• It is not supported by all the browsers. It is supported only by recent browsers
such as Netscape 6, IE 5.5, and Opera 5 like browsers.
• Learning of DHTML requires a lot of pre-requisites languages such as HTML,
CSS, JS, etc should be known to the designer before starting with DHTML which
is a long and time-consuming in itself.
• Implementation of different browsers are different. So if it worked in one browser,
it might not necessarily work the same way in another browser.
• Even after being great with functionality, DHTML requires a few tools and
utilities that are some expensive. For example, the DHTML text editor,
Dreamweaver. Along with it the improvement cost of transferring from HTML to
DHTML makes cost rise much higher.
Difference between HTML and DHTML:
• HTML is a markup language while DHTML is a collection of technologies.
• HTML is used to create static webpages while DHTML is capable of creating dynamic
webpages.
• DHTML is used to create animations and dynamic menus but HTML not used.
• HTML sites are slow upon client-side technologies whereas DHTML sites are
comparatively faster.
• Web pages created using HTML are rather simple and have no styling as it uses only one
language whereas DHTML uses HTML, CSS, and Javascript which results in a much
better and way more presentable webpage.
• HTML cannot be used as server side code but DHTML used as server side code.
• DHTML needs database connectivity but not in case of HTML.
• Files in HTML are stored using .htm or .html extension while DHTML uses .dhtm
extension.
• HTML requires no processing from the browser but DHTML does.
Basic Components of DHTML
• HTML
• CSS
• JavaScript
• DOM Manipulation (Refer Module 3 for DOM)
XHTML Introduction
• XHTML or EXtensible HyperText Markup Language is a mix of HTML and
XML, very similar to HTML but stricter. It’s like a rulebook for creating web
pages that browsers easily understand.
Key Features of XHTML
• XML-based markup language
• Strict syntax rules
• Cross-platform and device compatibility
• Extensibility and integration with other XML languages
XHTML Syntax Basics
• Case sensitivity: All tags must be in lowercase
• Proper nesting of tags
• Requirement of a root <html> element
• Mandatory closing of all tags
XHTML Document Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Sample XHTML Document</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
Semantic Structure
• Meaning and importance of semantics in XHTML
• Examples:
- <h1> for headings
- <p> for paragraphs
- <em> and <strong> for emphasis and importance
- <ul> and <ol> for lists
 Key Differences Between HTML and XHTML
HTML XHTML
1. Hypertext mark-up language - - > HTML Extensible Hypertext Mark-up Language - - > XHTML.
2. Tim Berners created in 1991 World wide web consortium or W3C created in 2000

4. It is an extension of standard generalized markup language or It is a combination of extensible markup language XML and
SGML hypertext markup language HTML
5. It stored in a document file format It stored as a markup language format
It is not case sensitive as there is no mandatory rule to write It is case-sensitive, and every tag and attribute used inside
6. the entire mark up in uppercase or lower case. It can also be must be in lowercase.
a combination of both.

7. It is not mandatory to add document label < DOCTYPE >at the It is mandatory to add a document label < DOCTYPE > at the
top of every page. We can even skip it. beginning of the page.
It is mandatory to close all the tags in strict residing order as
8. We can close any tag anytime and anywhere as per our needs they were declared.
9. We can add attributes without any quotes. It is mandatory to add quotes on every attribute we declare
10. ,html and .htm are the extensions used by HTML .xhtml, .xml and .xht are the file extensions used by XHTML

11 Lewd structure is used It contains a very strict structure, and the developer cannot
go out of the bounds of these structures.
XHTML Attribute Syntax
• Rules for attributes:
- All attribute values must be enclosed in quotes
- Attribute names are case-sensitive
• Examples:
<img src="image.jpg" alt="Sample Image" />
<a href="https://example.com">Visit Example</a>
Introduction to CSS
Introduction
• CSS (Cascading Style Sheets) is a language designed to simplify the process of
making web pages presentable.
• It allows you to apply styles to HTML documents, describing how a webpage
should look by prescribing colors, fonts, spacing, and positioning.
• CSS provides developers and designers with powerful control over the
presentation of HTML elements.
• HTML uses tags and CSS uses rulesets. CSS styles are applied to the HTML
element using selectors.
• CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
Why CSS?
• Saves Time: Write CSS once and reuse it across multiple HTML pages.
• Easy Maintenance: Change the style globally with a single modification.
• Search Engine Friendly: Clean coding technique that improves readability for
search engines.
• Superior Styles: Offers a wider array of attributes compared to HTML.
• Offline Browsing: CSS can store web applications locally using offline cache,
allowing offline viewing.
CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the corresponding
elements. A style rule set includes a selector and a declaration block.
• Selector: Targets specific HTML elements to apply styles.
• Declaration: Combination of a property and its corresponding value.

// HTML Element
<h1>Introduction to CSS</h2>

// CSS Style
h1 { color: blue; font-size: 12px; }
Where -
Selector - h1
Declaration - { color: blue; font-size: 12px; }
Example
p{
color: blue;
text-align: center;
}
• CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
• In this example, all paragraph element (<p> tag) will be centre-aligned, with a
blue text color.
Web Page without CSS
<!DOCTYPE html>
<html>

<head>
<title>Simple Web Page</title>
</head>

<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>

</html>
Web Page with CSS
h1 {
<!DOCTYPE html> color: olivedrab;
<html> border-bottom: 1px dotted darkgreen;
<head> }
<title>Simple web page</title>
p{
<style> font-family: sans-serif;
main { color: orange;
width: 600px; }
</style>
height: 200px; </head>
padding: 10px;
background: beige; <body>
<main>
} <h1>My first Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>
CSS Selectors
• CSS selectors target the HTML elements on your pages, allowing you to add
styles based on their ID, class, type, attribute, and more.
• This guide will help you to understand the intricacies of CSS selectors and their
important role in enhancing the user experience of your web pages.
• Understanding these selectors—such as the universal selector, attribute selector,
pseudo-class selector, and combinator selectors—enables more efficient and
dynamic web design.
Types of CSS Selectors
CSS Selectors Description

Simple Selectors It is used to select the HTML elements based

on their element name, id, attributes, etc

Universal Selector Selects all elements on the page.

Targets elements based on their attribute

Attribute Selector values.

Pseudo-Class Selector Selects elements based on their state or

position, such as :hover for hover effects.

Combine selectors to specify relationships

Combinator Selectors between elements, such as descendants ( ) or
child (>).

Selects specific parts of an element, such

Pseudo-Element Selector as ::before or ::after.
Simple Selectors

Simple Selector Description

Element Selector Selects HTML elements based

on their tag names.

Id Selector Targets an HTML element with a

specific id attribute.

Class Selector Selects elements with a

particular class attribute.
Element Selector
• The element selector selects HTML elements based on the element name (or tag)
for example p, h1, div, span, etc.
CSS:
h1 {
color: red;
font-size: 3rem;
}
p{
color: white;
background-color: gray;
}
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<h1>Sample Heading</h1>
<p>This is Content inside first paragraph</p>
<div id="div-container">
This is a div with id div-container
</div>
<p class="paragraph-class">
This is a paragraph with class paragraph-class
</p>
</body>
</html>
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..

#para1 {
text-align: center;
color: red;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
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.

Syntax:

.center {
text-align: center;
color: red;
}
Example:
<!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>
Example:
<!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>
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same • It will be better to group the selectors, to minimize the code.
style definitions.
• To group selectors, separate each selector with a comma.
• Look at the following CSS code (the h1, h2, and p elements have the
same style definitions): h1, h2, p {
h1 {
text-align: center;
text-align: center;
color: red; color: red;
}
}
h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
Example:
<!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>
CSS Colors
• Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS Color Names
In CSS, a color can be specified by using a predefined color name: (CSS/HTML supports 140
standard colors names)
E.g.
• Tomato
• Orange
• DodgerBlue
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray
CSS Background Color
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
The Internet is a vast network that connects computers all over the world. Through the Internet,
people can share information and communicate from anywhere with an Internet connection.
</p>

</body>
</html>
CSS Text Color
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">The origins of the Internet date back to research that enabled the time-sharing of
computer resources and the development of packet switching in the 1960s which led to the design of computer
networks for data communication.</p>
<p style="color:MediumSeaGreen;">Most traditional communication media, including telephone, radio,
television, paper mail, and newspapers, are reshaped, redefined, or even bypassed by the Internet, giving birth to
new services such as email, Internet telephone, Internet television, online music, digital newspapers, and video
streaming websites.</p>

</body>
</html>
CSS Color Values
• In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA
or HSLA color values.</p>

</body>
</html>
CSS background-color
The background-color property specifies the background color of an element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
CSS Background Image
• The background-image property specifies an image to use as the background of an element.
• By default, the image is repeated so it covers the entire element.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>
Background Image for Specific
Elements
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url(“1.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>
CSS Borders
• By default, the background-image property repeats an image both horizontally and
vertically.
• A CSS border is a line that surrounds an HTML element, providing a visual separation
between the element and its surroundings.
• Borders can be styled in various ways, including adjusting their width, color, and style.
• The basic properties used to define borders in CSS are border-width, border-style, and
border-color.
Basic Syntax
element {
border: 1px solid black;
}
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border
Example:
<!DOCTYPE html>
<html> <h2>The border-style Property</h2>
<head> <p>This property specifies what kind of border to display:</p>
<style>
p.dotted {border-style: dotted;} <p class="dotted">A dotted border.</p>
p.dashed {border-style: dashed;} <p class="dashed">A dashed border.</p>
p.solid {border-style: solid;} <p class="solid">A solid border.</p>
p.double {border-style: double;} <p class="double">A double border.</p>
p.groove {border-style: groove;} <p class="groove">A groove border.</p>
p.ridge {border-style: ridge;} <p class="ridge">A ridge border.</p>
p.inset {border-style: inset;} <p class="inset">An inset border.</p>
p.outset {border-style: outset;} <p class="outset">An outset border.</p>
p.none {border-style: none;} <p class="none">No border.</p>
p.hidden {border-style: hidden;} <p class="hidden">A hidden border.</p>
p.mix {border-style: dotted dashed solid double;} <p class="mix">A mixed border.</p>
</style>
</head> </body>
<body> </html>
CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm etc) or by using one of the
three pre-defined values: thin, medium, or thick:
Example
<!DOCTYPE html> p.three {
border-style: dotted; <body>
<html> border-width: 2px;
<head> } <h2>The border-width Property</h2>
<style> <p>This property specifies the width of the four
p.four { borders:</p>
p.one { border-style: dotted;
border-style: solid; border-width: thick; <p class="one">Some text.</p>
border-width: 5px; } <p class="two">Some text.</p>
<p class="three">Some text.</p>
} p.five { <p class="four">Some text.</p>
border-style: double; <p class="five">Some text.</p>
p.two { border-width: 15px; <p class="six">Some text.</p>
}
border-style: solid;
<p><b>Note:</b> The "border-width" property does
border-width: medium; p.six { not work if it is used alone.
} border-style: double; Always specify the "border-style" property to set the
border-width: thick; borders first.</p>
}
</style> </body>
</head> </html>
CSS Border Color
• The border-color property is used to set the color of the four borders.

• The color can be set by:

• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
Example
<!DOCTYPE html> <body>
<html>
<head>
<style> <h2>The border-color Property</h2>
p.one { <p>This property specifies the color of the four
border-style: solid; borders:</p>
border-color: red;
}
<p class="one">A solid red border</p>
p.two { <p class="two">A solid green border</p>
border-style: solid; <p class="three">A dotted blue border</p>
border-color: green;
}
<p><b>Note:</b> The "border-color" property
p.three { does not work if it is used alone. Use the "border-
border-style: dotted; style" property to set the borders first.</p>
border-color: blue;
} </body>
</style>
</head> </html>
CSS Border Sides
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>

<p>2 different border styles.</p>

</body>
</html>
CSS Rounded Borders
p.round3 {
<!DOCTYPE html>
border: 2px solid red;
<html>
border-radius: 12px;
<head>
padding: 5px;
<style> }
p.normal { </style>
border: 2px solid red; </head>
padding: 5px; <body>
}
<h2>The border-radius Property</h2>
p.round1 { <p>This property is used to add rounded borders to an element:</p>
border: 2px solid red;
border-radius: 5px; <p class="normal">Normal border</p>
padding: 5px; <p class="round1">Round border</p>
} <p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
p.round2 {
border: 2px solid red; </body>
border-radius: 8px; </html>
padding: 5px;
}
CSS Attribute Selector
• The CSS Attribute Selector allows you to target elements based on their specific
attributes or attribute values.
• This selector enhances the precision and efficiency of your CSS, enabling you to
apply styles to elements that share common attributes.
• By leveraging attribute selectors, you can maintain a more organized and scalable
CSS codebase. In this article, we will explore the various types of CSS Attribute
Selectors, their syntax, and practical examples to demonstrate their usage.
• CSS Attribute Selectors enable you to select elements based on the presence or
value of their attributes. This selection capability is essential for creating highly
specific and reusable styles.
Types of CSS Attribute Selectors
1. CSS [attribute] Selector:

• The [attribute] selector is used to select elements with a specified attribute.

• The following example selects all <a> elements with a target attribute:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified attribute
and value.

The following example selects all <a> elements with a target="_blank" attribute:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>
CSS [attribute~="value"] Selector
• The [attribute~="value"] selector is used to select elements with an attribute value
containing a specified word.

• The following example selects all elements with a title attribute that contains a
space-separated list of words, one of which is "flower":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

</body>
</html>
CSS [attribute|="value"] Selector
• The [attribute|="value"] selector is used to select elements with the specified
attribute, whose value can be exactly the specified value, or the specified value
followed by a hyphen (-).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>
CSS [attribute^="value"] Selector
• The [attribute^="value"] selector is used to select elements with the specified
attribute, whose value starts with the specified value.

• The following example selects all elements with a class attribute value that starts
with "top":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>
CSS [attribute$="value"] Selector
• The [attribute$="value"] selector is used to select elements whose attribute value
ends with a specified value.

• The following example selects all elements with a class attribute value that ends
with "test":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>
CSS [attribute*="value"] Selector
• The [attribute*="value"] selector is used to select elements whose attribute value
contains a specified value.

• The following example selects all elements with a class attribute value that
contains "te":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
[class*="my"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>
 Styling Forms
• The attribute selectors can be useful for styling forms without class or ID:
<!DOCTYPE html>
<html>
<head>
<h2>Styling Forms</h2>
<style>
input[type="text"] {
<form name="input" action="" method="get">
width: 150px;
Firstname:<input type="text" name="Name" value="Peter"
display: block;
size="20">
margin-bottom: 10px;
Lastname:<input type="text" name="Name" value="Griffin"
background-color: yellow;
size="20">
}
<input type="button" value="Example Button">
input[type="button"] {
</form>
width: 120px;
margin-left: 35px;
</body>
display: block;
</html>
}
</style>
</head>
<body>
CSS Forms
• The look of an HTML form can be greatly improved with CSS.

Styling Input Fields

The width property is used to determine the width of the input field.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<h2>A full-width input field</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>

</body>
</html>
Padded Inputs
The padding property is used to add space inside the text field.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Padded input fields</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
Bordered Inputs
• Use the border property to change the border size and color, and use the border-radius property to add rounded corners:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
</style>
</head>
<body>

<h2>Input fields with borders</h2>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>

</body>
Colored Inputs
Use the background-color property to add a background color to the input, and the
color property to change the text color:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<h2>Input fields with color</h2>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
CSS Fonts
• CSS fonts are used to style the text within HTML elements.
• The font-family property specifies the typeface, while font-size, font-
weight, and font-style control the size, thickness, and style of the text.
• Combining these properties enhances the typography and readability
of web content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Font</title>
<style>
.gfg {
font-family: "Arial, Helvetica, sans-serif";
font-size: 60px;
color: #090;
text-align: center;
}
.geeks {
font-family: "Comic Sans MS", cursive, sans-serif;
font-variant:small-caps;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
CSS font-family Property
• It is used to set the font type of an HTML element. It holds several
font names as a fallback system.

• Syntax:

• font-family: "font family name";

CSS font-style Property
• It is used to specify the font style of an HTML element. It can be
“normal, italic or oblique”.

• Syntax:

• font-style: style name;

CSS font-weight Property
• It is used to set the boldness of the font. Its value can be “normal,
bold, lighter, bolder”.

• Syntax:

• font-weight: font weight value;

CSS font-variant Property
• It is used to create the small-caps effect. It can be “normal or small-
caps”.

• Syntax:

• font-variant: font variant value;

Example
<!DOCTYPE html>
<html>
<head>
<title>font-weight property</title>
<style>
.gfg {
font-weight: bold;
font-style: normal;
font-family: "Times New Roman";
font-size: 40px;
color: #090;
text-align: center;
}
.geeks {
font-weight: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
Difference between <div> and
<span> Tag in HTML
• In HTML, the <div> and <span> tags are used for structuring and styling
content. <div> creates block-level containers for grouping elements,
while <span> creates inline containers for styling specific portions of text
or elements within a block-level container.

• Syntax:
<div>
A Computer Science Portal for Geeks
<span>GeeksforGeeks</span>
</div>
HTML div tag
• The div tag is known as the Division tag. The HTML <div> tag is a block-level
element used for grouping and structuring content. It provides a container to
organize and style sections of a webpage, facilitating layout design and CSS
styling.
Example .div3 {
<!DOCTYPE html> background-color: rgb(232, 232,
<html> 137)
}
<head>
<title>Div tag</title> .div0 {
background-color: #009900;
<style> }
div {
</style>
color: white;
</head>
margin: 2px;
font-size: 25px;
} <body>
<div class="div1"> div tag </div>
.div1 { <div class="div2"> div tag </div>
background-color: rgb(142, 142, 245); <div class="div3"> div tag </div>
} <div class="div0"> div tag </div>
</body>
.div2 {
background-color: #9af19a; </html>
HTML span Tag
• The HTML span element is a generic inline container for inline elements and
content. It used to group elements for styling purposes (by using the class or id
attributes). A better way to use it when no other semantic element is available.
Example:
<!DOCTYPE html>
<html>
<head>
<title>span tag</title>
</head>
<body>
<p>
<span style="background-color:lightgreen">
GeeksforGeeks
</span>
is A Computer Science Portal where you can
<span style="color:blue;">
Publish
</span> your own
<span style="background-color:lightblue">
articles
</span>
and share your knowledge with the world!!
</p>
</body>
CSS framework
• A CSS framework is a pre-designed library of CSS (Cascading Style Sheets). It provides
developers with a structured approach to build responsive, consistent, and visually
appealing websites without writing all the CSS code from scratch.
• These frameworks come with pre-written CSS classes and rules that simplify the process
of styling web pages, reducing development time and making it easier to maintain a
cohesive design system across a project.
• A CSS framework is a collection of pre-written CSS files (and sometimes JavaScript
components) that offer reusable code for common elements such as buttons, grids, forms,
and navigation menus.
• It provides a set of predefined classes and rules, so developers don’t have to write CSS
from scratch for every new project.
• CSS frameworks also focus on making websites responsive, ensuring that web pages look
good on various screen sizes, from mobile devices to desktops.
Key Features of CSS Frameworks
1. Pre-built Components: CSS frameworks come with pre-designed UI
components like buttons, navigation bars, forms, modals, and carousels. These
components can be used immediately, saving developers the time of creating
them from scratch.
2. Grid System: Most CSS frameworks include a grid system to help developers
create responsive layouts. Grids allow for a flexible and responsive layout that
automatically adjusts based on the screen size.
3. Responsive Design: A core feature of CSS frameworks is their focus on
responsiveness. This means the framework ensures that websites built using it
look good on different devices and screen sizes, whether mobile, tablet, or
desktop.
Key Features of CSS Frameworks
4. Cross-browser Compatibility: CSS frameworks are tested across various
browsers, ensuring consistent styling and behavior across platforms like
Chrome, Firefox, Safari, and Edge.
5. Utilities and Helper Classes: CSS frameworks come with utility classes for
common styles like margin, padding, colors, and font sizes. These classes allow
developers to quickly style elements without writing custom CSS.
 Popular CSS Frameworks
Framework Description
Developed by Twitter, Bootstrap is a widely used CSS framework. It provides a responsive grid system, predefined components, and extensive utility classes. It
Bootstrap
also features a large and active community.
A utility-first CSS framework providing low-level utility classes for building designs. Encourages the composition of styles directly in the markup. Highly
Tailwind CSS
customizable and doesn't impose a predefined design.
Developed by Zurb, Foundation is a responsive front-end framework offering a flexible grid system, customizable UI components, and responsive design
Foundation
capabilities. Suitable for building responsive websites and web applications.
A modern CSS framework based on Flexbox. Lightweight and easy to learn, it emphasizes flexibility and simplicity. Components are built with pure CSS
Bulma
without JavaScript dependencies.
Primer CSS is GitHub’s CSS framework, designed to create simple, maintainable designs. It’s minimalistic and focuses on utility classes and components that
Primer CSS
are easy to customize.
Materialize CSS Based on Google's Material Design guidelines, Materialize CSS offers a responsive grid system, components, and styles inspired by Material Design.
Semantic UI uses human-friendly HTML to create responsive and customizable user interfaces. Features a theming system for easy customization.
Semantic UI
Components are named based on their intended use, making them semantic and readable.
Pure CSS is a minimalistic framework developed by Yahoo. It is extremely lightweight and provides only the most essential components, making it a good
Pure CSS
choice for small projects.
Spectre CSS is a lightweight, responsive CSS framework that focuses on simplicity and performance. It provides a modern, clean design without overwhelming
Spectre CSS
developers with unnecessary components, making it perfect for fast-loading websites.
Blaze UI Blaze UI is a lightweight CSS framework that focuses on simplicity and performance. It offers basic components that are easy to customize.
Onsen UI is a powerful framework for building mobile web apps using HTML5 and JavaScript, with native-like performance. It provides an easy-to-use set of
Onsen UI
tools for creating hybrid and progressive web apps (PWAs) that look and feel like native mobile applications.