CSS Syntax and Selectors
A CSS Syntax rule consists of a selector, property, and its value. The selector points to the HTML element where the CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of the selector name followed by the property: value pair that is defined for the specific selector.
Syntax:
selector { Property: value; }For instance, we have declared a heading tag(h1) along with having assigned some property: value pair that is used to style the heading tag. Here, h1 is the selector, { color: green; font-family: sans-serif; } is a declaration block and it can contain one or more declarations separated by semicolons, color: green; is a property: value pair that is applied to the HTML element in order to style them.
h1 { color: green; font-family: sans-serif;}Every declaration has a CSS property name and a value, separated by a colon and is surrounded by curly braces. For declaring the multiple CSS properties, it can be separated by the semicolon.
Example: This example illustrates the use of CSS Syntax for the styling of HTML elements.
HTML
<!DOCTYPE html><html><head> <!-- Style of h1 selector --> <style> h1 { color: green; text-align: center; } </style></head><body> <h1>GeeksforGeeks</h1></body></html> |
Output:
CSS Selectors are used to select HTML elements based on their element name, id, attributes, etc. It can select one or more elements simultaneously.
CSS Selector can be divided into 5 categories:
- Simple Selector: It is used to select the HTML elements based on their element name, id, attributes, etc.
- Combinators Selector: It is used for explaining the relationship between two selectors.
- Pseudo-classes Selector: It is used to define the special state of an element.
- Pseudo Elements Selector: It is a keyword added to a selector that lets you style a specific part of the selected elements.
- Attribute Selector Selector: It is used to select an element with some specific attribute or attribute value.
We will focus on the Simple Selector and also understand its implementation through the examples.
The Simple Selector can be categorized in 3 ways:
CSS element selector: The element selector in CSS is used to select HTML elements that are required to be styled. In a selector declaration, there is the name of the HTML element, and the CSS properties which are to be applied to that element are written inside the brackets {}.
Syntax:
element_name {
// CSS Property
}Example: This example illustrates the use of the element selector for selecting the HTML elements by their element name & style them.
HTML
<!DOCTYPE html><html><head> <!-- Syntax of h1 selector --> <style> h1 { color: green; text-align: center; } </style></head><body> <h1>GeeksforGeeks</h1></body></html> |
Output:
CSS id selector: The #id selector is used to set the style of the given id. The id attribute is the unique identifier in an HTML document. The id selector is used with a # character.
Syntax:
#id_name {
// CSS Property
}Example: This example illustrates the use of the id selector for selecting the HTML elements by their id and style them.
HTML
<!DOCTYPE html><html><head> <!-- Style of id selector --> <style> #heading { color: green; text-align: center; font-size: 40px; font-weight: bold; } </style></head><body> <div id="heading"> GeeksforGeeks </div></body></html> |
Output:
CSS class selector: The .class selector is used to select all elements which belong to a particular class attribute. To select the elements with a particular class, use (.) character with specifying the class name. The class name is mostly used to set the CSS property to the given class.
Syntax:
.class_name {
// CSS Property
}Example: This example illustrates the use of the class selector for selecting the HTML elements by their class & style them.
HTML
<!DOCTYPE html><html><head> <!-- Style of class selector --> <style> .heading { color: green; text-align: center; font-size: 40px; font-weight: bold; } </style></head><body> <div class="heading"> GeeksforGeeks </div></body></html> |
Output:
For applying the common CSS style properties to all the HTML Elements then we can use the universal selector which is denoted by a star(*) symbol.
CSS * Selector: The * selector in CSS is used to select all the elements in an HTML document. It also selects all elements which are inside under another element. It is also called the universal selector.
Syntax:
* {
// CSS property
} Example: This example illustrates the use of the universal selector for selecting all the HTML elements that contain the common CSS properties & styles them.
HTML
<!DOCTYPE html><html><head> <title>* Selector</title> <!-- CSS property of * selector --> <style> * { color: green; text-align: center; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>*(Universal) Selector</h2> <div> <p>GFG</p> <p>Geeks</p> </div> <p>It is a computer science portal for geeks.</p></body></html> |
Output:
Supported Browser:
- Google Chrome 94.0
- Microsoft Edge 94.0
- IE 11.0
- Firefox 93.0
- Opera 80.0
- Safari 15.0
Please Login to comment...