CSS Syntax

Last Updated : 14 Jan, 2025

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. Understanding CSS syntax is fundamental for creating visually appealing and well-structured web pages.

Basic CSS Syntax

CSS is written as rulesets. A ruleset consists of a selector and a declaration block. Here’s the basic structure

HTML

<!--Driver Code Starts{--> <html>  <head> <!--Driver Code Ends }-->      <style>         /* CSS Rule */         h1 {             color: blue;             /* Property: value */             font-size: 24px;         }          p {             color: green;             font-size: 16px;         }     </style>  <!--Driver Code Starts{--> </head>  <body>     <h1>Hello, World!</h1>     <p>This is a simple paragraph.</p> </body>  </html> <!--Driver Code Ends }-->

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.

CSS Syntax Breakdown

Selectors: Selectors are used to “select” the HTML element you want to style. It can be an element type (e.g., h1), a class (e.g., .class-name), an ID (e.g., #id-name), or a combination of these.
1. Type Selector: Targets all elements of a specific type, like h1, p, div, etc.
2. Class Selector: Targets elements with a specific class. Example: .my-class { }
3. ID Selector: Targets an element with a specific ID. Example: #my-id { }
4. Universal Selector: Targets all elements (*).
Properties: Properties are the aspects of the selected elements you want to style (like color, width, height, etc.).
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.
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%).

Selectors in CSS

Selectors define which HTML elements are styled. CSS offers several types of selectors.

1. Universal Selector: Applies styles to all elements.

CSS

* { margin: 0; padding: 0; }

2. Type Selector: Targets specific HTML elements.

CSS

h1 { font-family: Arial, sans-serif; }

3. Class Selector: Styles elements with a specific class attribute.

CSS

.box { border: 1px solid black; padding: 10px; }

4. ID Selector: Targets a single element with a specific ID.

CSS

#header { background-color: lightgray; }

CSS Selectors

Grouping and Nesting

You can group selectors to apply the same styles or nest them for hierarchical targeting.

1. Grouping

CSS

h1, h2, h3 { color: darkblue; }

2. Nesting

CSS

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.

CSS

/*pseudo-class selector*/ a:hover {     color: green; }  /*pseudo-element selector*/ p::first-line {     font-weight: bold; }

Inline, Internal, and External CSS

CSS can be written in three ways:

1. Inline CSS: Applied directly within the HTML element.

HTML

<!--Driver Code Starts{--> <html>  <!--Driver Code Ends }-->  <body>     <p style="color: blue;">This is blue text.</p> </body>  <!--Driver Code Starts{-->  </html> <!--Driver Code Ends }-->

2. Internal CSS: Defined within the <style> tag in the <head> section.

HTML

<!--Driver Code Starts{--> <html>  <head> <!--Driver Code Ends }-->      <style>         h1 {             color: red;         }     </style>  <!--Driver Code Starts{--> </head>  <body>     <h1>GeeksforGeeks</h1> </body>  </html> <!--Driver Code Ends }-->

3. External CSS: Linked through an external stylesheet.

HTML

<!--Driver Code Starts{--> <html>  <head> <!--Driver Code Ends }-->      <link rel="stylesheet" href="styles.css">  <!--Driver Code Starts{--> </head>  </html> <!--Driver Code Ends }-->

Media Queries

Media queries allow you to create responsive designs.

CSS

@media (max-width: 600px) { body { background-color: lightblue; } }

This changes the background color for screens narrower than 600 pixels.

Animations

CSS can be used to create animations for elements.

CSS

@keyframes move {     from {         left: 0px;     }     to {         left: 100px;     } }  div {     position: relative;     animation: move 2s infinite; }

In case of animation syntax the time can also be divided into time frames in form of percentage’s.

CSS Variables

CSS variables helps to crate reusable values for any property.

CSS

:root { --main-color: #3498db; } h1 { color: var(--main-color); }

Comments in CSS

Comments are used to explain code and are ignored by the browser.

CSS

/* Write your comment comment */ p { font-size: 16px; }

Comments are always written between /* these symbols */.

SASS with $ and & for Nesting

SASS allows the use of variables, prefixed with $, to store reusable values such as colors, fonts, or sizes. This makes it easy to maintain and update styles consistently across a project. Key Feature: Using Variables ,Here’s an example demonstrating how to use variables in SASS Indented Syntax.

SASS

$primary-color: #3498db; $secondary-color: #2ecc71; $padding: 15px;  button {     background-color: $primary-color;     color: white;     padding: $padding;     border: none;     border-radius: 5px;     cursor: pointer;      &:hover {         background-color: $secondary-color;     } }

CSS

button {     background-color: #3498db;     color: white;     padding: 15px;     border: none;     border-radius: 5px;     cursor: pointer; }  button:hover {     background-color: #2ecc71; }

Variables(@)

$primary-color: Stores the main color for the button.
$secondary-color: Defines the hover state color.
$padding: Sets consistent spacing around the button.
Variables improve maintainability—changing $primary-color updates all instances of it.
&:hover(& operator): The & operator appends the :hover pseudo-class to the parent selector (button), ensuring the styles are tied to the specific button element.
This avoids repetition by preventing the need to retype the parent selector (button: hover).

Advantages of Combining $ and & operator

Using $ variables ensures consistent styling across the project.
The & operator streamlines nested rules, keeping the code DRY (Don’t Repeat Yourself) and organized.

LESS @ and & for Nesting

LESS is another popular CSS preprocessor that allows for the use of variables (prefixed with @) and the & operator for nesting and referencing parent selectors. This syntax makes it easy to manage styles dynamically and keep your code clean and maintainable.

LESS

@primary-color: #3498db; @secondary-color: #2ecc71; @padding: 15px;  button {     background-color: @primary-color;     color: white;     padding: @padding;     border: none;     border-radius: 5px;     cursor: pointer;      &:hover {         background-color: @secondary-color;     } }

CSS

/*CSS Compiled Output is here*/ button {     background-color: #3498db;     color: white;     padding: 15px;     border: none;     border-radius: 5px;     cursor: pointer; }  button:hover {     background-color: #2ecc71; }

Variables (@)

@primary-color: Stores the main color for the button.
@secondary-color: Defines the hover color for the button.
@padding: Specifies the padding value for the button.
&:hover: The & operator references the parent selector (button) and appends the :hover pseudo-class. This ensures that the hover styles are scoped to the button element, without the need to repeat the full selector (button :hover).
This makes the code more concise and keeps it DRY (Don’t Repeat Yourself).

Advantages of Combining @ and & operator

Variables (@) improve code consistency and reduce errors by centralizing values like colors and spacing.
The & operator helps you handle pseudo-classes and other states (like :hover) within the context of the parent selector, keeping your code organized and easy to manage.
Using LESS with these features allows for better flexibility and readability in your CSS, making your stylesheets cleaner and easier to maintain.

CSS Selectors

chaitanyashah707

Improve

Article Tags :

CSS Syntax

Basic CSS Syntax

CSS Syntax Breakdown

Selectors in CSS

Grouping and Nesting

1. Grouping

2. Nesting

Pseudo-classes and Pseudo-elements

Inline, Internal, and External CSS

Media Queries

Animations

CSS Variables

Comments in CSS

SASS with $ and & for Nesting

Variables(@)

LESS @ and & for Nesting

Similar Reads