19/09/2025, 23:25 CSS Syntax - GeeksforGeeks
Search... Sign In
Full Stack Course HTML CSS JavaScript TypeScript jQuery AngularJS ReactJS Next.js
CSS Syntax
Last Updated : 11 Jul, 2025
CSS is written as a rule set, which consists of a selector and a
declaration block. The basic syntax of CSS is as follows:
The selector is a targeted HTML element or elements to which we
have to apply styling.
The Declaration Block or " { } " is a block in which we write our CSS.
↔
h1 {
color: blue;
/* Property: value */
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
↔
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.
Selectors in CSS
Selectors define which HTML elements are styled. CSS offers several
types of selectors.
https://www.geeksforgeeks.org/css/css-syntax/ 1/5
19/09/2025, 23:25 CSS Syntax - GeeksforGeeks
CSS Selectors
1. Universal Selector: Applies styles to all elements.
* {
margin: 0;
padding: 0;
}
2. Type Selector: Targets specific HTML elements.
h1 {
font-family: Arial, sans-serif;
}
3. Class Selector: Styles elements with a specific class attribute.
.box {
border: 1px solid black;
padding: 10px;
}
4. ID Selector: Targets a single element with a specific ID.
#header {
background-color: lightgray;
}
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.).
https://www.geeksforgeeks.org/css/css-syntax/ 2/5
19/09/2025, 23:25 CSS Syntax - GeeksforGeeks
1. color: Defines the text color.
2. background-color: Defines the background color of an element.
3. font-size: Sets the size of the font.
4. margin: Specifies the space around an element.
5. 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%).
Grouping and Nesting of CSS Selectors
You can group selectors to apply the same styles or nest them for
hierarchical targeting.
1. Grouping
h1, h2, h3 {
color: darkblue;
}
2. Nesting
ul li {
list-style-type: square;
}
Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements are used for styling specific states
or parts of elements. Pseudo classes target's the elements based on a
particular state and pseudo elements targets the elements on basis of a
particular part of that element.
/*pseudo-class selector*/
a:hover {
color: green;
}
/*pseudo-element selector*/
p::first-line {
https://www.geeksforgeeks.org/css/css-syntax/ 3/5
19/09/2025, 23:25 CSS Syntax - GeeksforGeeks
font-weight: bold;
}
Comment More info
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
Company Explore
About Us POTD
Legal Job-A-Thon
Privacy Policy Connect
Careers Community
Contact Us Blogs
Corporate Solution Nation Skill Up
Campus Training Program
Tutorials Courses
Programming Languages IBM Certification
DSA DSA and Placements
Web Technology Web Development
AI, ML & Data Science Data Science
DevOps Programming Languages
CS Core Subjects DevOps & Cloud
Interview Preparation GATE
GATE Trending Technologies
School Subjects
Software and Tools
https://www.geeksforgeeks.org/css/css-syntax/ 4/5
19/09/2025, 23:25 CSS Syntax - GeeksforGeeks
Offline Centers Preparation Corner
Noida Aptitude
Bengaluru Puzzles
Pune GfG 160
Hyderabad DSA 360
Patna System Design
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
https://www.geeksforgeeks.org/css/css-syntax/ 5/5
