What is CSS Gradient? Definition ,Types and Example
This Blog You Will Learn
ஃ What is CSS Gradient? Definition
ஃ Why CSS Gradients are use.
ஃ Syntax
ஃ Type of CSS Gradients
ஃAdvantages of CSS Gradients
Sunday, January 25, 2026
Friday, January 23, 2026
What is CSS Pseudo-Class Selector Explained with Examples
This Blog You Will Learn
ஃ What is CSS Pseudo-Class Selector Explain
ஃ Syntax
ஃ Why Pseudo-Class Selectors
ஃ Key Characteristics of Pseudo-Class Selectors
ஃ Common CSS Pseudo-Class Selectors with Examples
ஃ Structural Pseudo-Classes
What is CSS Pseudo-Class Selector Explain
CSS Pseudo-class selector is special keyword added to css selector that allows developers to apply styles to HTML element based on state behavior ,position or use interaction static structure
Syntax:
selector:pseudo-class {
property: value;
}
Why Pseudo-Class Selectors
✅Browser history
✅Keyboard interaction
✅Mouse movement
✅Form validation states
✅Element order
Key Characteristics of Pseudo-Class Selectors
✔ Use a Single colon (:)
✔ Represent temporary or logical states
✔ React to user behavior
✔ Improve UX/UI without JavaScript
✔ Do not modify HTML content.
Common CSS Pseudo-Class Selectors with Examples
1) :hover
Applies style when user places the mouse over element
button:hover {
background-color: pink;
color: red;
}
2) :active
Applies styles when element is being clicked
a:active {
color: purple;
}
3) :visited
Styles links that have already been visited
a:visited {
color: orange;
4) :focus
Used when an input field gets focus.
input:focus {
border: 2px solid blue;
}
5) :link
Select links that have not been visited by the user yet
a:link{
color:yellow
}
6) :checked
Applies to checked checkbox or radio button
input:checked {
outline:2px solid red;
}
7) :disabled
styles disabled form elements
input:disabled{
background-color:lightpink
}
8) :enabled
Styles enabled form elements
input:enabled {
background-color:white;
}
Structural Pseudo-Classes
1) :first-child
Selects the first child of a parent element
p:first-child {
color: blue
}
2) :last-child
Selects the last child element
p:last-child {
color :green;
}
3) :nth-child()
Selects elements based on their position
li:nth-child(1){
color:red;
}
Related Post :-
Wednesday, January 21, 2026
CSS Attribute Selector Explained wiith Examples
CSS Attribute Selector Explained wiith Examples
This Blog You Will Learn
ஃ CSS Attribute Selector
ஃ How CSS Attribute Selector Works
ஃ Syntax of HTML CSS Attribute Selector tag
ஃ Why Use CSS Attribute Selectors
ஃ Advantages CSS Attribute Selectors
ஃ Explain Program
ஃ Output
Monday, January 19, 2026
CSS Class Selector With Practical Examples
CSS Class Selector With Practical Examples
CSS Class Selector is use to style one or more element HTML elements share the same class name
CSS Class Selector targets element with specific class attribute.
CSS Class Selector denoted (Dot . ) class name.
CSS Class Selector With Practical Examples
Syntax
}
CSS Class Selector With Practical Examples
Examples
<!DOCTYPE html>
<html>
<head>
<title> CSS class Selector </title>
<style>
.demo{
color:cadetblue;
}
.intro{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
</head>
<body>
<div class="demo">
<h1> CSS Class Selector </h1>
<P> learn programming language css </P>
</div>
<p class="intro">
https://webdesigningtheory.blogspot.com/</p>
</body>
</html>
CSS Class Selector With Practical Examples
Explain Program
Step
1]
<!DOCTYPE html>
- This
declare the document type.
- browser
that the document is written in html
Step 2]
<html>.... .
- html is the root element of the html
page.
- Every thing inside it is part of
the webpage.
Step 3]
text tag text appears on the browser tab.
<head>
<title> CSS class Selector </title>
Saturday, January 17, 2026
CSS Element Selector Explained with Examples
CSS Element Selector Explained with Examples
CSS Element Selector selects and styles specific HTML Element.
Element Selector is defined as Element name in stylesheet.
Syntax
CSS Element Selector Explained with Examples
element
{
property:value;
}
CSS Element Selector Explained with Examples
Examples
<!DOCTYPE html>
<html>
<head>
<title> css element selector</title>
<style>
color:cadetblue;
}
div{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
</head>
<body>
<div>
<h1> css element Selector </h1>
<P> learn programming language css </P>
</div>
</body>
</html>
CSS Element Selector Explained with Examples
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Subscribe to:
Comments (Atom)