Web Application Development
Uploaded by
mpiyush465Web Application Development
Uploaded by
mpiyush465WEB APPLICATION DEVELOPMENT
UNIT-4
JP tou--
Introduction to DHTML
● DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic
HTML.
● Dynamic HTML is not a markup or programming language but it is a term
that combines the features of various web development technologies for
creating the web pages dynamic and interactive.
● The DHTML application was introduced by Microsoft with the release of the
4th version of IE (Internet Explorer) in 1997.
● The DHTML is based on the properties of the HTML, javascript, CSS, and
DOM (Document Object Model which is used to access individual elements
of a document) which helps in making dynamic content. It is the
combination of HTML, CSS, JS, and DOM.
OR
Scaler tou--
What is DHTML?
DHTML stands for Dynamic HyperText Markup Language or Dynamic
HTML and is distinct from HTML. This language is built on
the HTML, CSS, Javascript, and DOM (Document Object Model) features
that aid in the creation of dynamic content.
After the entire web page has been fully loaded, DHTML (Dynamic
Hypertext Markup language) allows multiple scripting languages in a
web page to change their variables that enhance the appearance and
other functions.
• It is a collection of technologies used to create animated and
interactive web pages that are created in real-time.
• DHTML facilitates user interaction by animating text and images in
documents.
• It enables programmers to apply effects to their pages.
• It also enables page designers to include drop-down menus and
rollover buttons.
• This term also describes the development of numerous browser-based
action games.
• It also includes the ticker on many websites that require automatic
content updates.
Jp tou--
Components of Dynamic HTML
DHTML consists of the following four components or languages:
● HTML 4.0
● CSS
● JavaScript
● DOM.
HTML 4.0
HTML stands for Hypertext Markup Language It is a client-side markup
language, which is a core component of the DHTML. It defines the structure
of a web page with various defined basic elements or tags.
CSS
CSS stands for Cascading Style Sheet, which allows the web users or
developers for controlling the style and layout of the HTML elements on the
web pages. It adds fonts, colors, and layouts to our webpage. The CSS
rules for DHTML will be changed at several levels with JS and event
handlers, adding a substantial amount of dynamism with very little code
JavaScript
JavaScript is a scripting language which is done on a client-side. The
various browser supports JavaScript technology. DHTML uses the
JavaScript technology for accessing, controlling, and manipulating the
HTML elements. The statements in JavaScript are the commands which
tell the browser for performing an action.
DOM
DOM is the document object model. It is a w3c standard, which is a
standard programming interface of programming for HTML. It is mainly
used for defining the objects and properties of all elements in HTML. The
only issue is that the majority of browsers do not support DOM. It is a way
to manipulate the static content.
OR
• It is a programming interface for accessing and manipulating HTML
elements.
• Using DOM, we can interact with the content and structure of a
webpage.
• When a webpage is loaded, a document object model is created by
the browser.
• The HTML DOM model is like a tree of objects
Syntax:
<html>
<head>
<title> JavaScript Method </title>
</head>
<body>
<script type="text/javascript">
[Link]("Hello World");
</script>
</body>
</html>
Note: DHTML is often confused with HTML as a language; however, it is
not. It should be noted that this is an interface or browser improvement
feature that allows access to the object model via Javascript
language, making the webpage more interactive.
Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):
● It is used for designing the animated and interactive web pages that are
developed in real-time.
● DHTML helps users by animating the text and images in their documents.
● It allows the authors for adding the effects on their pages.
● It also allows the page authors for including the drop-down menus or
rollover buttons.
● This term is also used to create various browser-based action games.
Naukri tou--
Why Use DHTML?
• Dynamic Content: DHTML allows for the creation of dynamic and
interactive web pages.
• Enhanced User Experience: With DHTML, web pages can respond
to user actions in real-time, providing a more engaging experience.
• Reduced Server Load: DHTML enables client-side scripting,
reducing the need for server requests and thereby decreasing server
load.
• Faster Page Load Times: By dynamically updating content without
full page reloads, DHTML can significantly improve page load times.
• Richer User Interfaces: DHTML enables the creation of rich user
interfaces with features like drag-and-drop, animations, and
interactive forms.
• Cross-Browser Compatibility: DHTML is supported by most
modern web browsers, ensuring compatibility across different
platforms and devices.
Uses of DHTML
DHTML stands for dynamic hypertext markup language, a mixture of
technologies such as HTML, CSS, and javascript where. HTML provides
structure to a webpage, CSS gives visual effects, and Javascript is used
for functionalities. Below are some of the uses of DHTML.
• Enhancing Visual effects
DHTML helps to dynamically change the appearance and content of web
[Link] helps in creating a responsive and interactive website.
• Improved navigation
DHTML is instrumental in creating dropdown, fly-out menus, and other
navigation elements that provide a more user-friendly and intuitive
interface.
• User interactive websites
Using DHTML provides users with a more engaging and interactive
experience. We know that traditionally web pages were static, but DHTML
helped make a webpage more interactive by enabling certain features
which gave a user control over the webpage. This means giving your
webpage certain options through which a user can actually interact with
the content. For example, a shopping website or a real-time chatting site.
• Dynamic Content
Using DHTML, we can create a dynamic and engaging website. We can
dynamically change the appearance and content of web pages according
to the user's needs. Using Javascript, we can manipulate the web page’s
content.
• Validation of User Input
Using DHTML, we can validate user input on web forms. This helps in
ensuring that the user provides correct information. For instance, we can
use DHTML to validate phone numbers, email addresses, and other input
types and provide feedback to the user in case any correction is needed.
JP tou--
Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic
HTML):
● Its simplest and main feature is that we can create the web page
dynamically.
● Dynamic Style is a feature, that allows the users to alter the font, size,
color, and content of a web page.
● It provides the facility for using the events, methods, and properties. And,
also provides the feature of code reusability.
● Using DHTML, users can easily create dynamic fonts for their web sites
or web pages.
● With the help of DHTML, users can easily change the tags and their
properties.
Naukri tou--
DHTML Features
Below are some of the features of DHTML.
Object-oriented view
We can create an object-oriented view of the webpage using DHTML. A
web page can be dynamically manipulated and updated without reloading
it. Therefore we can create more responsive and interactive websites
using DHTML.
CSS(Cascading Style Sheets) and layering of content
We can use CSS to enhance our websites' visual appeal. We can also
layer content on top of each other.
Dynamic Fonts
We can use dynamic fonts on our web pages. These can be resized and
formatted upon the user’s preferences.
Dynamic Content
Dynamic content refers to how we can change the content of a webpage
without reloading it. Some examples of dynamic content are online
shopping sites, chatting sites, data visualizers, live locations, etc.
DHTML Advantages
The advantages of DHTML are as follows.
• Interactive UI: DHTML helps provide an interactive user interface to
our web pages.
• Compact File Size: DHTML is compact compared to other multimedia
software like Shockwave and Flash. This saves bandwidth and time.
• Dynamic content: It has a major plus point that we can dynamically
change the appearance and content of web pages according to the
user's needs.
• Cross-Browser Compatibility: DHTML is compatible with all modern
web browsers, i.e., they all support DHTML.
• Efficient: DHTML is efficient, and the files are maintainable, which
means that web designers have more flexibility due to DHTML.
• Less Server Load: As we can create dynamic web pages using
DHTML, it helps in reducing server load and improves overall
performance.
DHTML Disadvantages
The disadvantages of DHTML are as follows.
• As we have discussed, DHTML uses various technologies.
Therefore, it is advised to have a good command of them.
• We need to check browser compatibility while using DHTML as it is
not sure that it will perform on each and every platform.
• Maintaining DHTML code can be a tedious task.
DHTML Applications
The applications of DHTML are as follows.
• Creating Dynamic Menus: Using DHTML, we can create dynamic
menus which can respond to the user’s input.
• Animations: We can create animations ad add them to our
websites. For instance, we can use scroll animations, where the
content of the webpage changes upon scrolling through the
webpage. We can also use @keyframes in CSS to create
amazing animations and transitions.
• Games: We can also create games with DHTML which can be
displayed in the [Link] example, a snake game or a flappy bird
game.
• Interactive UI: Using DHTML, we can create a smooth interaction
with the website by creating visual feedback according to the user’s
action or changes between application statuses.
• Navigation: It refers to a website’s section that helps the user in
traveling through the website, like navigating from one part of the
website to another. This can be done by creating a dynamic
navigation bar, ceratin animation, or effects that can guide the user.
Chatgpt tou--
Applications / Uses of DHTML
Application Description
Dropdowns, expanding menus, hover
Interactive menus
effects
Form validation Check form inputs without reloading
Small client-side games using JS and
Online games
DOM
Animations and effects Moving images, text effects, slideshows
Dynamic content
Updating parts of a page without full reload
loading
Real-time dashboards Update data or charts dynamically
<!DOCTYPE html>
<html>
<head>
<title>DHTML Syntax</title>
</head>
<body>
<hr />
<h2>GFG is best</h2>
<br />
<script type="text/javascript">
[Link]("Learn anything from GFG");
</script>
</body>
</html>
Example to Understand
HTML (Static Example)
<!DOCTYPE html>
<html>
<body>
<p>Hello, this is a static paragraph.</p>
</body>
</html>
This content will not change unless the page is reloaded or edited.
DHTML (Dynamic Example)
<!DOCTYPE html>
<html>
<head>
<script>
function changeText() {
[Link]("demo").innerHTML = "You clicked the
button!";
</script>
</head>
<body>
<p id="demo">Hello, click the button to change this text.</p>
<button onclick="changeText()">Click Me</button>
</body>
</html>
What happens here:
• When the user clicks the button, the text changes immediately —
without reloading the page.
This is the power of DHTML.
How They Work Together
1. HTML defines the content → “What is displayed.”
2. CSS defines the presentation → “How it looks.”
3. JavaScript defines behavior → “What it does when users interact.”
4. DOM allows JavaScript to access and modify HTML and CSS
elements in real time.
How DHTML Works (Process)
1. The browser loads the HTML page.
2. The DOM represents the page as an object model.
3. CSS styles are applied to the elements.
4. When the user performs an action (like click or hover), JavaScript
triggers an event.
5. JavaScript uses the DOM to modify the HTML or CSS dynamically.
6. The browser immediately reflects those changes — without
reloading.
Example 2: Changing Style Dynamically
<!DOCTYPE html>
<html>
<head>
<script>
function changeColor() {
[Link]("text").[Link] = "blue";
[Link]("text").[Link] = "24px";
</script>
</head>
<body>
<h2 id="text">Welcome to DHTML!</h2>
<button onclick="changeColor()">Change Style</button>
</body>
</html>
Explanation:
• When you click the button, the text color and font size change
dynamically.
• The DOM allows JavaScript to access and modify the element’s
CSS properties.
Example 3: Moving Text Animation
<!DOCTYPE html>
<html>
<head>
<script>
let pos = 0;
function moveText() {
let elem = [Link]("move");
pos += 10;
[Link] = pos + "px";
</script>
</head>
<body>
<p id="move" style="position:relative;">Moving Text Example!</p>
<button onclick="moveText()">Move Text</button>
</body>
</html>
Explanation:
• Every time the button is clicked, the text moves 10px to the right — a
simple animation effect created using DHTML.
Difference between HTML and DHTML
Following table describes the differences between HTML and DHTML:
HTML (Hypertext Markup language) DHTML (Dynamic
Hypertext Markup language)
1. HTML is simply a markup 1. DHTML is not a language, but
language. it is a set of
technologies of web
development.
2. It is used for creating and
2. It is used for developing designing the
and creating web pages. animated and interactive web
sites or pages.
3. This markup language 3. This concept creates dynamic
creates static web pages. web pages.
4. It doesnotcontainany 4. It may contain the code of
server-side server-side scripting.
scripting code.
5. The files of HTML are 5. The files of DHTML are stored
stored with the with the .dhtm
.html or .htm extension in a extension in a system.
system.
6. A simple page which is 6. A page which is created by a
created by a user without user using the HTML, CSS,
using the scripts or styles DOM, and JavaScript
called as an HTML page. technologies called a DHTML
page.
7. This markup language [Link]
does not need connectivity
database connectivity. because it interacts with users.
Naukri tou--
HTML vs DHTML
Basis HTML DHTML
HTML is a client-side DHTML is a combination
Language
language and not a of both client-side and
Type
server-side language. server-side languages.
HTML is used to DHTML is used to create
create static web dynamic web pages.
Interactivity pages. Users can not Users can interact with
interact with the the websites easily.
websites.
HTML includes only a DHTML combines HTML,
Technologies .html file where the CSS, and JavaScript to
Used web page's structure create web pages.
is present.
HTML helps users for DHTML helps users to
displaying content on create interactive buttons
Features the web page, and and animations.
links can also be
created.
Basis HTML DHTML
HTML is a basic web DHTML combines some
page that is supported technologies which may
Browser
by all browsers. require some plugins, or
Support
else all browsers support
DHTML.
HTML is an easy In DHTML, Developers
language for need to learn various
Complexity beginners. technologies, which can
be complex for
beginners.
As only the .html file As DHTML is a
is present; it's easier combination, it's not easy
Maintenance
to maintain. to maintain all the files
and components.
In HTML, Database In DHTML, Database
Database
Connectivity is not Connectivity is not
Connectivity
needed., needed.
Difference between HTML and DHTML
Parameters HTML DHTML
Stands for HyperText Stands for Dynamic
Definition
Markup Language. HTML.
Static and primarily used Dynamic and allows for
Nature for structuring web interactive and animated
content. web pages.
Limited interactivity Highly interactive with
Interactivity without the need for extensive use of client-
scripting. side scripting.
Requires full page Updates content
Page
reloads to update dynamically without full
Refresh
content. page reloads.
Relies heavily on client-
Minimal or no client-side
Scripting side scripting languages
scripting.
like JavaScript.
Requires modern web
Browser Supported by all web
browsers with support
Support browsers.
for JavaScript and CSS.
Parameters HTML DHTML
Simple and More complex due to
Complexity straightforward markup dynamic behaviors and
language. scripting.
Ideal for creating
Suitable for static web
dynamic web
Use Cases pages and basic content
applications and
presentation.
interactive websites.
Geeksforgeeks tou-
DHTML JavaScript
DHTML stands for Dynamic HTML. Dynamic means that the content of
the web page can be customized or changed according to user inputs i.e.
a page that is interactive with the user. In earlier times, HTML was used to
create a static page. It only defined the structure of the content that was
displayed on the page. With the help of CSS, we can beautify the HTML
page by changing various properties like text size, background color, etc.
The HTML and CSS could manage to navigate between static pages but
couldn’t do anything else. If 1000 users view a page that had their
information for eg. Admit card then there was a problem because 1000
static pages for this application build to work. As the number of users
increases, the problem also increases, and at some point, it becomes
impossible to handle this problem. To overcome this problem, DHTML
came into existence. DHTML included JavaScript along with HTML and
CSS to make the page dynamic. This combo made the web pages
dynamic and eliminated the problem of creating static pages for each
user. To integrate JavaScript into HTML, a Document Object Model(DOM)
is made for the HTML document. In DOM, the document is represented
as nodes and objects which are accessed by different languages like
JavaScript to manipulate the document.
DHTML JavaScript
HTML document include JavaScript:: The JavaScript document is
included in our html page using the html tag. <src> tag is used to specify
the source of external JavaScript file. Following are some of the tasks that
can be performed with JavaScript:
• Performing html tasks
• Performing CSS tasks
• Handling events
• Validating inputs
Example 1: Example to understand how to use JavaScript in DHTML.
<h1>
GeeksforGeeks
</h1>
<p id = "geeks">
Hello Geeks!
</p>
<script>
[Link]("geeks").innerHTML =
"A computer science portal for geeks";
</script>
Output:
Explanation: In the above example, change the text of the paragraph
using id. A document is an object of HTML that is displayed in the current
window or object of DOM. The getElementById(id) gives the element id.
The innerHTML defines the content within the id element. The id attribute
is used to change an HTML document and its property. Paragraph
content changed by document id. For example
[Link]("geeks").[Link] = "blue"; It is used to set
the paragraph color using the id of elements.
Example 2: Creating an alert on click of a button.
<h1 id = "para1"
style="display: flex; margin: auto; justify-content: center;">
GeeksforGeeks
</h1>
<input type = "Submit"
onclick = "Click()"
style="display: flex; margin: auto; justify-content: center;"/>
<script>
function Click() {
[Link]("para1").[Link] = "green";
[Link]("Color changed to green");
</script>
Output:
Explanation: In this example, creating a function that will be invoked on
click of a button and it changes the color of text and display the alert on
the screen. window is an object of current window whose inbuilt method
alert() is invoked in Click() function.
Example 3: Validate input data using JavaScript.
<style>
body {
margin-left: 50%;
}
h1 {
color: green;
</style>
<h1>
GeeksforGeeks
</h1>
<h4>
DHTML JavaScript
</h4>
<p>
Enter graduation percentage:
</p>
<input id="perc">
<button type="button" onclick="Validate()">
Submit
</button>
<p id="demo"></p>
<script>
function Validate() {
var x,text;
x=[Link]("perc").value;
if(isNaN(x)||x<60) {
[Link]("Not selected in GeeksforGeeks");
} else {
[Link]("demo").innerHTML=
"Selected: Welcome to GeeksforGeeks";
[Link]("demo").[Link]="#009900";
</script>
Output:
Explanation: In this example, make a validate() function that ensures the
user is illegible or not. If the user enters > 60 then selected otherwise not
selected.
Tutorial tou—
DHTML JavaScript
JavascriptWeb DevelopmentFront End Technology
DHTML stands for Dynamic Hypertext Markup Language. DHTML
combines HTML, CSS, and JavaScript to create interactive and dynamic
web pages. It allows for customization and changes to the content based
on user inputs. Earlier, HTML was used to create static pages that only
defined the structure of the content.
CSS helped in enhancing the page's appearance. However, these
technologies were limited in their ability to create interactive experiences.
DHTML introduced JavaScript and the Document Object Model (DOM) to
make web pages dynamic. With DHTML, the web page can be
manipulated and updated in response to user actions, eliminating the
need for creating separate static pages for each user.
We can include the external JavaScript document in the HTML document
using the <src> tag. Else, we can include JavaScript in the HTML
document inside the <script> element.
Following are some tasks that we can perform with JavaScript;
performing HTML tasks, performing CSS tasks, handling events, etc.
• performing HTML tasks
• performing CSS tasks
• handling events etc.
Example
In the following example, we are changing the text of the element with id
= "demo" using the HTML DOM [Link]() method ?
Open Compiler
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p id = "demo"> Text will be modified</p>
<script>
[Link]("demo").innerHTML = "Simply Easy
Learning at your fingertips...";
</script>
</body>
</html>
Example
In the example below, we are creating a function that will be invoked if we
clicked the button and it changes the background color of the text and
displays the alert on the screen.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<style>
#demo{
display: flex;
margin: auto;
justify-content: center;
input{
display: flex;
margin: auto;
justify-content: center;
</style>
<h1 id = "demo"> Tutorialspoint </h1>
<input type = "submit" onclick = "btn()"/>
<script>
function btn() {
[Link]("demo").[Link] =
"seagreen";
[Link]("Background color changed to seagreen");
</script>
</head>
</html>
❖ Introduction to CSS3
jp tou—
introduction to CSS3
● CSS stands for Cascading Style Sheets
● CSS is used to design HTML tags.
● CSS is a widely used language on the web.
● HTML, CSS and JavaScript are used for web designing. It helps the web
designers to apply style on HTML tags.
CSS allows you to apply styles to web pages. More importantly, CSS
enables you to do this independent of the HTML that makes up each web
page.
CSS is easy to learn and understand, but it provides powerful control over
the presentation of an HTML document.
WHY CSS?
● CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
● Easy Maintenance: To make a global change simply change the style,
and all elements in all the webpages will be updated automatically.
● Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
● Superior styles to HTML: CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison
to HTML attributes.
● Offline Browsing: CSS can store web applications locally with the help of
an offline cache. Using this we can view offline websites.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could
be any tag like <h1>,
<title> etc.
Declaration Block: The declaration block can contain one or more
declarations separated by a
semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a
colon.
Property: A Property is a type of attribute of HTML element. It could be
color, border etc.
Value: Values are assigned to CSS properties. In the above example,
value "yellow" is assigned
to color property.
Selector{Property1: value1; Property2: value2; ..........;}
CSS Selector
CSS selectors are used to select the content you want to style. Selectors
are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style> p{
text-align: center; color:
blue;
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:-
2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a
specific element. An id is
always unique within the page so it is chosen to select a single, unique
element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
#para1 { text-align:
center; color: blue;
</style>
</head>
<body>
<p id="para1">Hello Students</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output:-
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute.
It is used with a period
character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
.center { text-align:
center; color: blue;
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Output:-
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the
elements on the pages.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
* { color: green;
font-size: 20px;
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:-
5) CSS Group Selector
The grouping selector is used to select all the elements with the same
style definitions.
Grouping selector is used to minimize the code. Commas are used to
separate each selector in
grouping.
Let's see the CSS code without group selector.
Example:-
<!DOCTYPE html>
<html>
<head> <style> h1,
h2, p { text-align:
center; color: blue;
</style>
</head>
<body>
<h1>Hello Students</h1>
<h2>Hello Mam</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:-
Tutorial tou-
What is CSS?
• CSS stands for Cascading Style Sheets, used for styling the
presentation and design of a web pages.
• Using CSS, you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used.
• CSS can control the layout of multiple web pages all at once.
• It allows you to apply styles to HTML documents by prescribing
colors, fonts, spacing, and positioning.
• CSS styles are applied to the HTML element using selectors.
Why Use CSS?
• CSS Saves Time: You can write CSS once and then reuse same sheet
in multiple HTML pages.
• Pages Load Faster: If you are using CSS, you do not need to write
HTML tag or attributes every time. Just write one CSS rule of a tag and
apply it to all the occurrences of that tag.
• Easy Maintenance: To make a global change, simply change the
style, and all elements in all the web pages will be updated
automatically.
• Superior Styles to HTML: CSS has a much wider array of attributes
than HTML, so you can get a far better look to your HTML page.
• Multiple Device Compatibility: For the same HTML document,
different versions of a website can be presented for different screen
widths
• Global Web Standards: Now most of the HTML attributes are being
deprecated and it is being recommended to use CSS.
CSS Syntax
Syntax of CSS consist of selectors and declaration used to apply styles to
HTML elements.
selector {
property: value;
• The selector targets the HTML element/elements that you want to
style.
• The declaration block contains one or more declarations enclosed in
curly braces {}.
• Each declaration consists of a property and a value separated by a
colon :. Declarations are separated by semicolons ;.
There are several types of selectors available in CSS, commonly used
selectors are classes, IDs and tags. To know complete list of selectors
visit CSS Selectors article.
CSS History and Versions
Current version of CSS3 and early versions were CSS1 and CSS2. As of
now CSS is continuesly evolving and adapting new capabilities that full
fills the current website's requirements.
Cascading Style Sheets level 1 (CSS1) came out of W3C as a
recommendation in December 1996. This version describes the CSS
language as well as a simple visual formatting model for all the HTML
tags.
OR
CSS1
It was the first version of CSS, discovered in 1996. It has basic styling
options like font size, background color, positioning of elements, and
layout properties. CSS1 also introduced the cascading concept, enabling
developers to define multiple styles for the same part. Also, make
browsers determine which style should apply based on priority and
inheritance rules.
CSS2
CSS2 became a W3C recommendation in May 1998 and builds on CSS1.
This version adds support for media-specific style sheets e.g. printers and
aural devices, downloadable fonts, element positioning and tables.
OR
CSS2
CSS2 was the second version of CSS, released in 1998, and significantly
improved over CSS1. CSS2 has many new features, such as support for
media types like print and screen, with more advanced layout and
positioning options. Developers get introduced to the concept of absolute
and relative positioning in CSS2. It had compatibility issues with browsers
and incomplete implementation. CSS2.1 version resolved the problem of
CSS2.
CSS3:
CSS3 is the latest and third version of CSS, released in 1999. CSS3 has
a collection of separate modules, each with its features, instead of a
single monolithic specification. CSS3 has significantly improved over
CSS2, allowing developers to create more complex and visually
appealing websites. Also, this version is separated into many modules,
making it easy to handle and saving time formatting web pages. Most
tech companies and organizations use CSS3 and HTML5 for designing
tasks and web development.
A few more descriptions about CSS3 -
CSS3 comes with new features and has a separate module for each set.
Some of the significant modules are as follows -
• CSS Box Model: CSS3 introduced new properties in Box Model,
such as box-sizing, which helps developers control element width
and height.
• Media Query: It is one of the essential tools that help developers
apply different styling based on the screen size used to view a
website.
• Flexbox and Grid: In CSS3, Flexbox and Grid provide a layout
allowing developers to create a responsive design easily.
• Colour Format: In CSS3, developers can use alpha channels and
hue, saturation, and lightness value to specify a color. rgba() and
hsla() properties are used.
• Selectors: In CSS3, a few more selectors included, such are
attribute selectors, structural pseudo-classes, and the:nth-child()
pseudo-class.
• Web Fonts: CSS3 introduced the @font-face rule, which allows
using any open-source fonts on our website.
OR
CSS3 was became a W3C recommendation in June 1999 and builds on
older versions CSS. It has divided into documentations is called as
Modules and here each module having new extension features defined in
CSS2.
CSS3 Modules
CSS3 Modules are having old CSS specifications as well as extension
features.
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D and 3D Transformations
• Animations
• Multiple Column Layout
• User Interface
Difference between CSS2 and CSS3
The difference between CSS2 and CSS3 are as follows:
Key Points CSS2 CSS3
Launched In 1998 1999
Compatibility Compatible with only Compatible with all types of
older browsers. browsers and can support old
CSS2 styles.
Layout Limited options for Flexbox and Grid allow the
creating a creation of complex
responsive layout. responsive layouts.
Key Points CSS2 CSS3
Transitions and Lack of transition Transition and Animation
Animations and animation properties are present.
properties.
Web Fonts Only support Web- Along with Web-safe fonts, it
safe fonts. also supports any custom
fonts like Google Fonts.
Feature Consists of a Single Divided into individual
Specification Document. modules of feature set.
Selectors Consist of Simple Consist of a Sequence of
Selectors. Simple Selectors such as
structural pseudo-classes.
Rounded Not Present. Present.
Borders
Split Text Not Available. Available.
Feature
Media-Query Not Present. Supports Media Query
Functionality.
Geeksforgeeks tou--
CSS Syntax
The CSS syntax defines how CSS rules are written so that browsers can
interpret and apply them to HTML elements.
• Selector: Targets the HTML element "h1" to apply styles.
• Declaration Block: Enclosed in curly braces { }, contains one or more
declarations.
• Property: Specifies the style attribute, here "color" for text color.
• Value: Defines the property's setting, here "blue" for the text hue.
• Overall Structure: Forms a complete CSS rule: h1 { color: blue; },
styling h1 headings blue.
<html>
<head>
<style>
/* CSS Rule */
h1 {
color: blue;
/* Property: value */
font-size: 24px;
p{
color: green;
font-size: 16px;
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
In above Example,
• h1: This selector targets all <h1> elements on the page. The style
applied to <h1> will set the text color to blue and the font size to
24px.
• p: This selector targets all <p> elements. The text color will be green
and the font size will be 16px.
Declaration Block in CSS Syntax
Each declaration consists of a property and a value, separated by a
colon, and each declaration is followed by a semicolon:
1. Properties: Properties are the aspects of the selected elements you
want to style (like color, width, height, etc.).
• color: Defines the text color.
• background-color: Defines the background color of an element.
• font-size: Sets the size of the font.
• margin: Specifies the space around an element.
• padding: Defines the space between the element's content and its
border.
2. Values: Values define the specifics of the property you want to apply,
such as a color name, a number (e.g., 16px), or percentages (e.g., 50%).
Tutorial tou--
CSS Syntax
Following is the syntax of styling using CSS.
selector {
property: value;
• Selector: CSS selectors are used to select the HTML element or
groups of elements you want to style on a web page.
• Property: A CSS property is an aspect or characteristic of an HTML
element that can be styled or modified using CSS, such as color,
font-size, or margin.
• Value: Values are assigned to properties. For example, color
property can have value like red, green etc.
For Example:
Multiple Style Rules
If you want to define multiple rules for a single selectors you can specify
those in single block separated by a semicolon (;).
Syntax
selector{
property1: value1;
property2: value2;
property3: value3;
Now let us look an example for styling using CSS.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Style all the paragraphs */
p{
background-color: black;
color: white;
padding: 5px;
/* Style all elements with class 'special' */
.special {
color: lightblue; /* Change text color */
}
</style>
</head>
<body>
<p>
This a normal paragraph...
</p>
<br>
<p class="special">
This is a paragraph with class special...
</p>
<br>
<div class="special">
This is a div with class special...
</div>
</body>
</html>
CSS Selectors Syntax
CSS Selectors are used to select the HTML elements you want to style
on a web page. They allow you to target specific elements or groups of
elements to apply styles like colors, fonts, margins, and more. Different
types of selectors are mentioned below:
Universal Selector
Universal selectors select and apply styles to all elements in an HTML
document.
*{
font-family: Verdana, sans-serif;
color: green;
Element Selectors
Element selectors select specific HTML elements.
h1 {
color: #04af2f;
Class Selectors
Class selectors select and style an element with a specific value for its
class attribute.
.myDiv {
color: #04af2f;
Id Selectors
Id selectors select a single element with a particular value for the id
attribute.
#myDiv {
color: #04af2f;
Attribute Selectors
Attribute selectors select an element based on a specific attribute value.
a[target] {
background-color: peachpuff;
Example: This example demonstrates the types of selectors mentioned
above.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selector</title>
<style>
*{
background-color: #04af2f;
color: white;
h3 {
text-align: center;
#myDiv {
height: 200px;
width: 200px;
background-color: antiquewhite;
color: black;
.para {
border: 1px solid black;
a[href]{
font-size: 2em;
color: red;
</style>
</head>
<body>
<h3>CSS selectors Example</h3>
<div id="myDiv">This is a div element.</div>
<p class="para">This is a paragraph element.</p>
<a href="/css/css_padding.htm" target="_blank">This is a Link</a>
</body>
</html>
CSS Grouping and Nesting Syntax
Grouping and nesting selectors allow us to apply the same style to
multiple elements at a time.
CSS Grouping Selector Syntax
Grouping selectors are comma-separated and used to select multiple
elements and style them at a time.
div, p {
background-color: #04af2f;
color: white;
CSS Nesting Syntax
Nesting allows the nesting of one specific style rule within another.
div p {
background-color: #04af2f;
color: white;
font-size: 20px;
letter-spacing: 1px;
CSS Pseudo-Classes & Pseudo-Elements Syntax
Pseudo-class and pseudo-element, both select specific types of
elements. The pseudo class defines the style for a specific state while the
pseudo element targets a specific part of an element./p>
CSS Pseudo-Element Syntax
CSS pseudo-element styles specific parts of an element.
p:before {
content: "NOTE:";
font-weight: bold;
CSS Pseudo-Class Syntax
CSS pseudo-class in CSS is used to select and style elements based on
their state.
a:hover {
color: red;
CSS Inclusion Syntax
CSS can be used in any HTML document using three different methods
which are: inline CSS, internal CSS, and external CSS.
Inline CSS Syntax
Inline CSS are used directly within HTML tags.
<div style="color: #04af2f;">Welcome to TutorialsPoint.</p>
Internal CSS Syntax
Internal CSS is used within the head section of an HTML document using
a style tag.
<style>
body {
background-color: #04af2f;
</style>
External CSS Syntax
External CSS is written in a separate file having a .css extension and
linked to the HTML document using link tag.
<link rel="stylesheet" type="text/css" href="[Link]">
CSS Media Queries Syntax
CSS media queries apply different CSS styles based on the screen size,
resolution, and other characteristics and are often used for creating
responsive designs.
@media (max-width: 700px) {
body {
background-color: #04af2f;
CSS Variables Syntax
CSS Variables allows to store and reuse values throughout the CSS
program.
:root {
--main-color: #04af2f;
}
CSS Comments Syntax
CSS comments add an explanatory note about the code.
/* This is a single line CSS comment */
/* This is
a multi-line
CSS comment
*/
CSS - Selectors
CSS Selectors are used to select the HTML elements you want to style
on a web page. They allow you to target specific elements or groups of
elements to apply styles like colors, fonts, margins, and more.
The element or elements that are selected by the selector are referred to
as subject of the selector.
CSS Universal Selector
CSS universal selector is a special selector that selects all the elements
and applies the same style universally in an HTML document. It is
denoted by an asterisk mark (*).
Syntax
The syntax for the universal selector is as follows:
*{
margin: 0;
padding: 0;
As per the above syntax, the universal selector is used to apply
a margin and padding of 0 to all HTML elements.
Example
For example, setting the font color for every element.
<html>
<head>
<style>
*{
color: red;
</style>
</head>
<body>
<h1>Header Text</h1>
<p>Paragraph Text</p>
</body>
</html>
Example--
The following example demonstrates the use of a universal selector
(*) to set the font size, background, and text color of the document:
<html>
<head>
<style>
*{
background-color: peachpuff;
color: darkgreen;
font-size: 25px;
</style>
</head>
<body>
<h1>Universal selector (*)</h1>
<div>Parent element
<p>Child paragraph 1</p>
<p>Child paragraph 2</p>
</div>
<p>Paragraph 3</p>
</body>
</html>
CSS Element Selector
CSS element selector selects and styles specific HTML elements. The
element selector is defined by simply using the element's name in the
stylesheet.
Syntax
The syntax for the element selector is as follows:
p{
color: green;
h1 {
text-decoration-line: underline;
Example
Here, all <p> elements on the page will be center-aligned, with a red text
color:
For example, setting a common font size for all paragraphs
<html>
<head>
<style>
p{
font-size: 16px;
</style>
</head>
<body>
<p>This paragraph styled with font size 16px.</p>
</body>
</html>
CSS Class Selector
CSS class selector selects an element with a specific class attribute. The
class selector is defined using a period (.) followed by the class name.
Syntax
The syntax for the class selector is as follows:
.style-h1 {
text-decoration-line: underline;
.style-p {
color: green;
font-size: 25px;
Example
In this example all HTML elements with class="center" will be red and
center-aligned:
Example--
For instance, making all buttons have a blue background.
<html>
<head>
<style>
.button {
background-color: blue;
color: white;
</style>
</head>
<body>
<button class="button">Click Me!</button>
</body>
</html>
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.
It is denoted by the "#" (hash) symbol.
Example
The CSS rule below will be applied to the HTML element with id="para1":
For example, changing the background color of a header.
<html>
<head>
<style>
#header {
background-color: gray;
</style>
</head>
<body>
<div id="header">This is the header section.</div>
</body>
</html>
CSS Group Selector
CSS group selector allow us to apply same style to multiple elements at a
time. Name of elements are comma-separated. The group selector keep
CSS concise and avoid redundancy.
Syntax
The syntax for the group selector is as follows:
/* Apply same background color for h1 and h2 */
h1, h2 {
background-color: grey;
Example
In this example we have grouped the selectors from the code
above:
CSS Attribute Selector
CSS attribute selector selects an element based on a specific attribute or
attribute values on an element.
Syntax
The syntax for the attribute selector is as follows:
a[target] {
background-color: peachpuff;
You can also specify the element with an attribute having a specific value.
a[href="[Link] {
background-color: peachpuff;
Example
The following example demonstrates the use of an attribute selector. Here
we have changed the style of elements with target attribute:
<html>
<head>
<style>
a[target] {
background-color: #04af2f;
color: white;
font-size: 2em;
</style>
</head>
<body>
<h2>Attribute selector</h2>
<p>Styling applied to anchor element with target attribute:</p>
<a href="#">Tutorialspoint</a>
<a href="#" target="_blank">google</a>
<a href="#" target="_self">wikipedia</a>
</body>
</html>
1. Presence Selector: It selects elements that contain a specific
attribute. For example, styling all inputs with a type attribute.
<html>
<head>
<style>
input[type] {
border: 2px solid black;
</style>
</head>
<body>
<input type="text" placeholder="Text input">
<input type="number" placeholder="Number input">
</body>
</html>
2. Attribute Value Selector: It targets elements with a particular attribute
value. For example, styling text inputs.
<html>
<head>
<style>
input[type="text"] {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" placeholder="Text input">
<input type="password" placeholder="Password input">
</body>
</html>
3. Substring Matching(^=): It matches elements where the attribute
contains a substring. For example, styling links with https in their href.
<html>
<head>
<style>
a[href^="https"] {
color: green;
</style>
</head>
<body>
<a href="[Link] link</a>
<a href="[Link] link</a>
</body>
</html>
4. Wildcard Selector (*=): Matches elements where the attribute value
contains a specific string. For example, underlining links with example in
the URL.
<html>
<head>
<style>
a[href*="example"] {
text-decoration: underline;
</style>
</head>
<body>
<a href="[Link] contains 'example' and is
underlined.</a>
<a href="[Link] is not underlined.</a>
</body>
</html>
Combinator Selectors
Used to define relationships between selectors, allowing you to style
elements based on their hierarchy or positioning in the document.
Common combinators include descendant ( ), child (>), adjacent sibling
(+), and general sibling (~).
CSS Descendant Selector
CSS descendant selector styles all the tags which are child of a particular
specified tag. To mention as descendant, a single space between parent
and child element is used.
Syntax
The syntax for the descendant selector is as follows:
div p {
color: blue;
The above code set text color of paragraph tags that are inside div
element to blue.
For example, styling paragraphs inside a div.
<html>
<head>
<style>
div p {
color: red;
</style>
</head>
<body>
<div>
<p>This paragraph inside a div will be red.</p>
</div>
</body>
</html>
CSS Child Selector
CSS child selector selects all the direct child of a particular element or
parent. This is denoted by '>' (Greater than) symbol.
Syntax
The syntax for the child selector is as follows:
div > p {
color: blue;
}
The above code set text color of paragraph tags that are directly inside
div element to blue.
Example
For example, styling direct children paragraphs of a div.
<html>
<head>
<style>
div>p {
margin-left: 20px;
</style>
</head>
<body>
<div>
<p>This is a direct child and has a left margin.</p>
<div>
<p>This is not a direct child.</p>
</div>
</div>
</body>
</html>
CSS Adjacent Sibling Selectors
CSS adjacent sibling selector selects an element that is immediately
preceded by a specified element. A plus symbol ( "+" ) is used to denote
adjacent sibling.
Syntax
The syntax of adjacent sibling selector is as follows:
h1 + p {
margin-top: 0;
The above code sets top margin of paragraph tag just after h1 tag to 0.
Example
For example, making the first paragraph bold after an h1.
<html>
<head>
<style>
h1+p {
font-weight: bold;
</style>
</head>
<body>
<h1>This is a header.</h1>
<p>This is immediately following the header and is bold.</p>
<p>This will not be bold.</p>
</body>
</html>
CSS General Sibling Selector
general sibling selector targets all the element that is preceded/follows by
a specified element. The general sibling selector is denoted by tilde
symbol ( "~" ).
Syntax
The syntax of general sibling selector is as follows:
h1 ~ p {
color: gray;
The above code sets text color of all the paragraph after h1 tag to gray.
Example
For example, italicizing all paragraphs following an h1.
<html>
<head>
<style>
h1~p {
font-style: italic;
</style>
</head>
<body>
<h1>This is a header.</h1>
<p>This is a sibling of the header and will be italicized.</p>
<p>This will also be italicized because it's a sibling of the header.</p>
</body>
</html>
Pseudo-Classes
Pseudo-classes in CSS define the special states of elements for styling.
Examples include :hover (applies when an element is hovered), :first-child
(targets the first child of a parent), and :nth-child(2) (targets the second
child).
1. :hover: Styles elements when the user hovers over them. For
example, changing the color of a link when hovered.
<html>
<head>
<style>
a:hover {
color: red;
</style>
</head>
<body>
<a href="[Link] over this to see the effect.</a>
</body>
</html>
2. :focus: Styles the elements when the user focus on any particular
element.
<html>
<head>
<style>
input:focus {
outline: 3px solid red;
</style>
</head>
<body>
<input type="text">
</body>
</html>
3. :first-child: Styles the element which is the first child of it's parent.
<html><head></head>
<style>
p:first-child {
color: brown;
</style>
<body>
<div>
<p>Hello1</p>
<p>Hello2</p>
</div>
</body></html>
4. :last-child: Style's the element which is the last child of it's parent.
<html><head></head>
<style>
p:last-child {
color:green;
</style>
<body>
<div>
<p>Hello1</p>
<p>Hello2</p>
</div>
</body></html>
5. :not: Helps to remove a particular element from the styling index or
styling context.
color: blue;
</style>
<body>
<div>
↔
CSS Pseudo-element Selector
CSS pseudo-element selector is used to style a specific part of an
element rather than the element itself.
Example
The following example demonstrates the use of a pseudo-element
selector (::before) and (::after):
<html>
<head>
<style>
/* Add and style contents before paragraph */
p::before {
content: "Note: ";
font-weight: bold;
color: red;
/* Add and style contents after paragraph */
p::after {
content: " [Read more]";
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<h2>Pseudo-element selector</h2>
<p>This is a paragraph.</p>
</body>
</html>
1. ::before: It helps to insert some content before an element.
<html><head></head>
<style>
h1::before {
content: "★ "
</style>
<body>
<h1 tabindex="0">Welcome to GFG</h1>
</body></html>
2. ::after: Ithelp's to insert some content after an element.
<html><head></head>
<style>
h1:active::before {
content: " ";
color: orangered;
</style>
<body>
<h1 tabindex="0">Welcome to GFG</h1>
</body></html>
3.::first-line: Styles the first line of text within a block element. Line
breaks mark the beginning of a new line.
<html><head></head>
<style>
p::first-line {
color: red;
}
</style>
<body>
<p>Welcome to GFG<br>
Hello GFG</p>
</body>
</html>
4. ::first-letter: It Styles the first-letter of a word or a sentence.
<html><head></head>
<style>
p::first-letter {
color: red;
font-size: 23px;
</style>
<body>
<p>Welcome to GFG</p>
</body></html>
5. ::placeholder: Styles the placeholder of a specific input field.
<html><head></head>
<style>
input::placeholder {
font-size: 20x;
font-family: sans-serif;
font-weight: 900;
</style>
<body>
<input type="text" placeholder="Enter your name">
</body></html>
CSS Nested Selectors
CSS nesting allows to nest one style rule inside another rule, with the
selector of the child rule relative to the selector of the parent rule.
Characteristics
The nesting selector shows the relationship between the parent and
child rules.
• When the nested selectors are parsed by the browser, it
automatically adds a whitespace between the selectors, thus
creating a new CSS selector rule.
• In situations where the nested rule needs to be attached to the
parent rule (without any whitespace), like while using the pseudo-
class or compound selectors, the & nesting selector must be
prepended immediately to achieve the desired result.
• In order to reverse the context of rules, the & nesting selector can
be appended.
• There can be multiple instances of & nesting selector.
Syntax
The syntax for the nesting selector is as follows:
nav {
& ul {
list-style: none;
& li {
display: inline-block;
&a{
text-decoration: none;
color: blue;
&:hover {
color: red;
Example
The following example demonstrates the use of a nesting selector (&):
<html>
<head>
<style>
#sample {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5rem;
&a{
color: crimson;
&:hover,
&:focus {
color: green;
background-color: yellow;
}
}
</style>
</head>
<body>
<h1>& nesting selector</h1>
<p id="sample">
Hover <a href="#">over the link</a>.
</p>
</body>
</html>
❖ ways to Insert CSS in HTML document (External Style Sheet,
Internal Style Sheet, Inline Styles)
Tutorial tou--
How to Add CSS ?
CSS can be added to HTML in three ways. To style a single HTML
element on the page, we can use inline CSS in a style attribute. We can
include an internal stylesheet in your HTML document by including CSS
in the head section. We can also link to an external stylesheet that
contains all of your CSS apart from your HTML.
Embedded / Inline CSS - <style> Attribute
Inline CSS
Inline CSS is applied directly to an HTML element using the style
attribute.
Inline CSS allows us to include CSS "in" HTML. To include inline CSS,
we must use a style attribute inside the opening tag of an HTML element.
It has the highest priority among the three methods.
The syntax is as follows:
<element_name style="CSS property: attribute_value">
Or
Syntax
Here is the generic syntax −
<element style = "...style rules....">
The value of style attribute is a combination of style declarations
separated by semicolon (;).
Inline CSS, also known as the "embedded stylesheet," takes precedence
over any other CSS targeting the same elements. However, using inline
styles is not recommended because it results in a lot of repetition
because the styles cannot be reused elsewhere. Nevertheless, they are
sometimes the best (or only) option, such as when targeting a single
element with distinct style properties.
Example
The following example demonstrates the use of inline css styling:
<html>
<head>
</head>
<body>
<div style = "border: 5px inset gold; background-color: black; width:
300px; text-align: center;">
<h1 style = "color:#36C;">Hello World !!!</h1>
<p style = "font-size: 1.5em; color: white;">This is a sample CSS
code.</p>
</div>
</body>
</html>
Example--
Internal CSS - <style> Element
Internal CSS
Internal CSS is defined within the <style> tag inside the <head> section of
an HTML document.
Internal CSS is one of the most commonly used CSS forms for changing,
styling, and modifying a single web page's unique styles.
Internal CSS can be used by incorporating the <style> element in the
<head> section of an HTML web page or document. A CSS property and
value are still set, but instead of being placed directly inside a style
attribute, they are enclosed in brackets and defined by a CSS selector. It
can be applied to an entire web page but not to multiple web pages, and
we can style multiple web pages with the same code on each page.
Internal CSS is considered a better practice than inline CSS because it
allows us to style groups of elements at once, rather than having to add
the same style attributes to elements repeatedly.
It is also ideal for one-page websites because it separates the CSS and
HTML into different sections while keeping them in the same document. If
we have a multi-page site and want to make changes across the board,
we must open each HTML file representing those pages and add or
change the internal CSS in each head section.
Example
Output--
Example
The same style is applied in the following example:
<html>
<head>
<style type = "text/css">
h1 {
color: #36CFFF;
p{
font-size: 1.5em;
color: white;
div {
border: 5px inset gold;
background-color: black;
width: 300px;
text-align: center;
</style>
</head>
<body>
<div>
<h1>Hello World !!!</h1>
<p>This is a sample CSS code.</p>
</div>
</body>
</html>
Attributes associated with <style> elements are −
Possible
Attribute Description
Values
Specifies the style sheet language as a
type text/css content-type (MIME type). This is a
required attribute.
screen
tty
tv
projection Specifies the device the document will be
media handheld displayed on. Default value is all. This is
print an optional attribute.
braille
aural
all
External CSS - <link> Element
External CSS
The <link> element can be used to include an external stylesheet file in
your HTML document.
An external style sheet is a separate text file with .css extension. You can
define all the style rules in this text file and include this file in head section
of any HTML document using the <link> element.
External CSS is written in a separate .css file and linked to the HTML
document using the <link> tag. This is the recommended method for large
projects as it improves maintainability.
OR
External stylesheets are widely regarded as the most effective way to
style the HTML code. They are formatted similarly to internal CSS, but
they are not enclosed in <style> tags or placed in the HTML file's head
section. Instead, they are completely separate from the HTML and must
be placed in a CSS file (with the .css extension). We must simply include
a link to this external stylesheet in the head section to be able to use it in
our HTML code.
<link rel="stylesheet" href="path_to_css-file">
OR
Syntax
Here is the generic syntax of including external CSS file −
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
Attributes associated with <style> elements are −
Possible
Attribute Description
Values
Specifies the style sheet language as a
type text css content-type (MIME type). This attribute is
required.
Specifies the style sheet file having style
href URL
rules. This attribute is required.
screen
tty
tv
projection Specifies the device the document will be
media handheld displayed on. Default value is all. This is
print an optional attribute.
braille
aural
all
There are multiple advantages of external CSS over inline and
internal stylesheets.
• When the style sheet is changed, it affects all linked pages.
• We can create style classes that can then be applied to a variety of
HTML elements.
• It has a unified look and feel across all of its web pages.
• Because the CSS file is downloaded once and applied to each relevant
page as needed, load times are reduced.
Example
In this example we will style HTML elements using external CSS.
[Link]
body{
background-color:linen;
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
p{
color:white;
font-size:18px;
font-weight:bold;
[Link]
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>An example of external CSS</title>
<style>
body{
background-color:linen;
div{
width:480px;
background-color:powderblue;
border:3px dashed midnightblue;
padding:5px;
margin:20px;
p{
color:white;
font-size:18px;
font-weight:bold;
</style>
</head>
<body>
<div>
<p>External CSS has been used for styling this HTML
document.</p>
</div>
</body>
</html>
Example-
Create a style sheet file with a name ext_style.css having the following
rules −
h1 {
color: #36CFFF;
p{
font-size: 1.5em;
color: white;
div {
border: 5px inset gold;
background-color: black;
width: 300px;
text-align: center;
Example
Now you can include this file ext_style.css in any HTML document as
follows −
<head>
<link type = "text/css" href = "ext_style.css"/>
</head>
Following example demonstrates how to include an external css file
in an HTML file:
<html>
<head>
<link type = "text/css" href = "ext_style.css"/>
</head>
<body>
<div>
<h1>Hello World !!!</h1>
<p>This is a sample CSS code.</p>
</div>
</body>
</html>
Example
External styles are defined within the <link> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"[Link]"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Note: Do not add a space between the property value (20) and the unit
(px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;
❖ div and span tag
w3school tou—
HTML <div> Tag
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
The <div> elements should only be used when no other semantic
elements, such as <article> or <nav>, are appropriate.
• Block-Level Element: The <div> tag is a block-level element, meaning
it takes up the full width and starts on a new line.
• Styling with CSS: It can be styled using CSS, allowing customization
like width, background color, padding, and margins.
• Inline-Block Option: By using display: inline-block, a <div> can
behave like an inline element while retaining block-level features.
• Used for Layouts: <div> is often used in layouts with Flexbox or Grid
to organize content and arrange sections of a webpage.
Note: By default, browsers always place a line break before and after
the <div> element.
Syntax
The below syntax of the HTML <div> tag −
<div>
<!-- Content goes here -->
</div>
Example
A <div> section in a document that is styled with CSS:
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
Example--
Browser Support
Element
<div> Yes Yes Yes Yes Yes
Global Attributes
The <div> tag also supports the Global Attributes in HTML.
Event Attributes
The <div> tag also supports the Event Attributes in HTML.
Default CSS Settings
Most browsers will display the <div> element with the following default
values:
Example
How to Style the div Tag
The <div> tag is easy to style and is often used by developers to group
content together. It accepts almost all CSS properties, making it very
versatile. Here’s how to style a <div> tag in a simple way:
1. Apply Font Properties with div
The <div> tag can be styled using properties like font-size, font-
family, font-weight, and font-style to control the appearance of text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Font Properties Example</title>
<style>
.text-style {
font-family: 'Arial', sans-serif; /* Font type */
font-size: 24px; /* Font size */
font-weight: bold; /* Makes text bold */
</style>
</head>
<body>
<div class="text-style">
This is a simple example of applying font properties to a div element.
</div>
</body>
</html>
Output
HTML Div Tag
2. Apply Color with the Div Tag
The color and background-color properties change the text color
and background color of the content inside the <div>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Font Properties Example</title>
<style>
.text-style {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
color: blue;
</style>
</head>
<body>
<div class="text-style">
This is a example of applying font properties to a div element.
</div>
</body>
</html>
Output
HTML Div Tag
3. Style Texts with the Div Tag
The text-transform and text-decoration properties can be used to change
the style of text inside a <div>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Style Texts with the div Tag</title>
<style>
.text-style {
color: green;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
font-size: 30px;
</style>
</head>
<body>
<div class="text-style">
This is a styled text inside a div element.
</div>
</body>
</html>
Output
HTML Div Tag
4. Create a Shadow Effect with the Div Tag
The box-shadow property adds a shadow effect to a <div>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Shadow Effect with div</title>
<style>
.shadow-effect {
width: 300px;
height: 200px;
background-color: lightblue;
margin: 50px auto;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
padding: 20px;
font-size: 20px;
text-align: center;
</style>
</head>
<body>
<div class="shadow-effect">
This div has a shadow effect.
</div>
</body>
</html>
Output
HTML Div Tag Shadow Effect
Advantages of using div Tag
There are several advantages to using div tags when creating an HTML
document:
• Grouping elements: The div tag is very useful for grouping multiple
elements inside a container, allowing you to apply CSS properties to all
child elements to give them a uniform appearance.
• Separation of sections: Using div tags allows you to separate
different sections of a webpage, making the code easier to write and
maintain the code easily.
• Reusable structure: You can use the same HTML structure created
with the div tags and CSS. This will reduce complexity and code size.
Supported Browsers
Tag
div Yes Yes Yes Yes Yes
HTML <span> Tag
Definition and Usage
The <span> tag is an inline container used to mark up a part of a text, or
a part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript
using the class or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level
element and <span> is an inline element.
• The <span> tag is inline, meaning it doesn't create a new line. It
stays within the same line as the text around it.
• The <span> tag doesn’t change how the content looks on its own.
It's used to apply styles or to control parts of content through
JavaScript.
Syntax
<span class="">Some Text</span>
Attributes
The HTML <span> tag supports both Global and Event attributes.
Example--
Example--
Example: Styling <span> Element
Here is another example of the HTML <span> tag. We create multiple
input fields for user input and use the <span> tag to mark up parts of the
text or content for each input field. This HTML code creates a webpage
with a heading and a paragraph, styling the text within the <span> tag in
green and 24px font size.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML span tag</title>
<style>
span {
color: green;
font-size: 24px;
</style>
</head>
<body>
<h3>Tutorialspoint</h3>
<!-- Creating span Element -->
<p>Easy Simply Learning on <span>Tutorialspoint.</span></p>
</body>
</html>
<span> vs <div> tag
Both <span> and <div> are used as containers in HTML, there are key
differences between them:
<span> <div>
Inline element Block-level element
For styling or grouping inline
For grouping block-level content
content
Starts on a new line and takes up
Does not break the flow of text
full width
Styling or scripting small portions Structuring larger sections of
of text content
Best Practices for Using the <span> Tag
• Avoid Overuse: Don't overuse <span> tags unnecessarily. Only use it
when you need to apply specific styles or functionality to small portions
of text.
• Use Classes for Styling: Prefer using CSS classes over inline styles
for better maintainability and cleaner code.
• Keep Accessibility in Mind: When using <span>, ensure that it
doesn’t negatively affect the accessibility of your content. Add ARIA
attributes if necessary for screen readers.
• Group Inline Content: Use <span> for grouping small portions of text
or inline elements for styling or JavaScript manipulation without
disrupting the layout.
Browsers Support
Browsers
<span> tag Yes Yes Yes Yes Yes
Conclusion
The HTML <span> tag is a versatile inline element used for applying
styles or manipulating small sections of content. While it doesn't add any
semantic meaning to the content, it plays an essential role in web
development by providing hooks for styling and scripting.
Advantages of CSS
Below are the Advantages of CSS -
• Maintenance: CSS separates the content and presentation of the
website. We can maintain CSS styling without affecting the
underlying code.
• Efficiency: CSS creates lightweight and efficient websites that
reduce load time and improve user experience.
• Search Engine Optimization: Using CSS styling, one can optimize
a website for search engines. It facilitates the crawling and indexing
process of a website's content.
• Browser Compatibility: CSS is widely supported by nearly all
modern Web Browsers. Hence CSS is a reliable and consistent way
to style Web Pages.
• Faster Development: CSS provides a bunch of pre-defined rules,
which we also call Frameworks. Developers can use these CSS
Frameworks and libraries to speed up the development process.
• Debugging: CSS provides tools for debugging styles and identifying
issues. Tools make it easier to troubleshoot and fix problems.
• Customization: Using CSS, developers can customize the
appearance and layout of the web page according to their needs.
Customization improves the user experience and increases
engagement.
• Accessibility: CSS helps to improve the accessibility of a website
by providing semantic markup and enhancing the readability and
usability of the content.
Disadvantages of CSS
Below are some Disadvantages of CSS -
• Challenging to Learn: In the initial learning phase, CSS might be a
little tough for beginners.
• Cross-Browser Inconsistencies: Even though modern web
browsers widely support CSS. There can still be inconsistencies in
how CSS is interpreted and displayed across different browsers and
devices.
• Performance Issues: Complex CSS styles and animations
sometimes impact a website's performance more on older or slower
devices.
• Security risks: Using CSS, Attackers can execute malicious code to
steal sensitive information. So it is essential to be cautious when
using external CSS resources or accepting user input.
• Multi-Version Problem: Since CSS has multiple versions. There
may be confusion in choosing the correct version.
• Multi-Selector Problem: Sometimes, hierarchical Selectors in CSS
create the problem.
• Lack of Dynamic Update: One cannot dynamically change styling
during a website's running. We define static CSS before the
deployment of web pages.
Limitations of CSS
Below are some Limitations of CSS -
• CSS does not interact with Database.
• CSS does not create a Backend.
• CSS does not read any files—lack of control over multimedia.
• CSS does not perform a logical operation. Javascript or PHP
performs logical and arithmetic operations. Logical operations are
if/else/while, and arithmetics operations are +, -, ++, --, etc.
• CSS does not make any GET, POST, PUT, or PATCH requests to
Web Server.
• Lack of Dynamic support in CSS. Javascript or PHP performs
dynamic functionality behind the web page.
• Lack of Interaction in CSS. Eventlistensers of Javascript solve this
issue.
• Style Selectors of CSS are conditional. Every Browser does not
support some of them.
Applications of CSS
The Main Applications of CSS are as follows -
Making Animations:
• With the help of CSS or CSS Frameworks, we can create
Animations and Transitions on Web Pages, such as hover effects,
Scrolling Animations, and other such elements.
Designing Responsive Sites:
• CSS and CSS Frameworks help to make responsive layouts that
dapt to the screen of any type, such as Mobile, Laptop, Tablet, etc.
Styling Contents:
• We can use CSS or CSS Frameworks to style the contents of the
HTML document without having to worry about formatting issues.
Improve Accessibility:
• CSS can adjust font sizes, color contrasts, and other visual
elements, which helps people having visual impairments to access
more.
Provide Customization:
• CSS or CSS Frameworks allows developers to customize their web
pages according to their preferences.
Enhanced Layout:
• Using CSS and CSS Frameworks, we can create complex layouts
and grids for web pages to organize content and improve visual
hierarchy.
Reusability:
• CSS Frameworks, pre-define rules based on CSS, are widely used
in developing and designing big platforms, such as e-Commerce
Platforms, Social Media Platforms, Blogging Platforms, Streaming
Platforms, etc.
Three essential components in CSS define various styles for our web
pages. Those are as follows -
Selector:
• In CSS styling, Selector selects the HTML element to which the rule
applies. We can choose an HTML element using an Element Tag,
Class Name, ID Name, and other Attributes.
Property:
• This part of CSS styling defines the visual style or layout of the
selected element. Properties can include font size, color, margin,
padding, font weight, border, background color, etc.
Value:
• This part in CSS styling specifies the value of the Property. For
Example, the font-size Property could be 10px or 2rem.
Chatgpt tou--
Advantages of CSS3
Advantage Description
Allows beautiful, modern designs with gradients,
Improved design
shadows, and animations.
Better Eliminates the need for JavaScript or images for
performance visual effects.
Adapts to different devices and screen sizes
Responsive design
using media queries.
Modular structure Easier to update and maintain.
Enables designers to use any font with @font-
Custom fonts
face.
Faster loading
Fewer image files reduce page size.
time
Powerful layout
Flexbox and Grid simplify page structure.
systems
Disadvantages of CSS3
Disadvantage Explanation
Browser
Older browsers may not support all features.
compatibility
Advanced properties can be tricky to
Complex debugging
troubleshoot.
Many new modules and syntax can be
Learning curve
overwhelming.
Rendering Styles can appear slightly different across
differences browsers.
You might also like
- Understanding DHTML Components and UsesNo ratings yetUnderstanding DHTML Components and Uses17 pages
- Understanding DHTML Components and FeaturesNo ratings yetUnderstanding DHTML Components and Features13 pages
- Understanding DHTML and JavaScript BasicsNo ratings yetUnderstanding DHTML and JavaScript Basics41 pages
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure61 pages
- XML and DHTML: Key Differences ExplainedNo ratings yetXML and DHTML: Key Differences Explained2 pages
- HTML vs DHTML: Key Differences ExplainedNo ratings yetHTML vs DHTML: Key Differences Explained3 pages
- Location-Based Planning in ConstructionNo ratings yetLocation-Based Planning in Construction64 pages
- Creative Syllabus Template for EducationNo ratings yetCreative Syllabus Template for Education51 pages
- Emerson Campusano's Week 2 English ActivityNo ratings yetEmerson Campusano's Week 2 English Activity6 pages
- Installing Windows Server on VirtualBoxNo ratings yetInstalling Windows Server on VirtualBox19 pages
- Report Painter: Creating Flexible ReportsNo ratings yetReport Painter: Creating Flexible Reports395 pages
- QubitLife Overview and Leadership InsightsNo ratings yetQubitLife Overview and Leadership Insights45 pages