CSS | Syntax and Selectors
CSS Syntax: A CSS style rules consists of a selector, property and its value. The selector points to the HTML element where CSS style to be applied. The CSS property is separated by semicolons.
Syntax:
selector {
// CSS Property
}
Example:
<!DOCTYPE html> <html> <head> <!-- Style of h1 selector --> <style> h1 { color: green; text-align: center; } </style> </head> <body> <h1>GeeksforGeeks</h1> </body> </html> |
chevron_right
filter_none
Output:
CSS Selectors: CSS Selectors are used to select HTML elements based on their element name, id, attributes, etc. It can select one or more elements simultaneously.
- element selector: The element selector in CSS is used to select HTML elements which is 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 is written inside the brackets {}.
Syntax:
element_name { // CSS Property }Example:
<!DOCTYPE html><html><head><!-- Syntax of h1 selector --><style>h1 {color: green;text-align: center;}</style></head><body><h1>GeeksforGeeks</h1></body></html>chevron_rightfilter_noneOutput:
- id selector: The #id selector is used to set the style of given id. The id attribute is the unique identifier in HTML document. The id selector is used with # character.
Syntax:
#id_name { // CSS Property }Example:
<!DOCTYPE html><html><head><!-- Style of id selector --><style>#heading {color: green;text-align: center;font-size:40px;font-weight:bold;}</style></head><body><divid="heading">GeeksforGeeks</h1></body></html>chevron_rightfilter_noneOutput:
- 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:
<!DOCTYPE html><html><head><!-- Style of class selector --><style>.heading {color: green;text-align: center;font-size:40px;font-weight:bold;}</style></head><body><divclass="heading">GeeksforGeeks</h1></body></html>chevron_rightfilter_noneOutput:
Recommended Posts:
- Advanced Selectors in CSS
- JQuery | Multiple ID selectors
- CSS | Selectors Complete Reference
- Wildcard Selectors (*, ^ and $) in CSS for classes
- CSS Child vs Descendant selectors
- SASS | Placeholder Selectors
- Which characters are valid in CSS class names/selectors?
- XML | Syntax
- jQuery | Syntax
- JavaScript | Syntax
- PHP | Basic Syntax
- Ruby Basic Syntax
- Placeholder Syntax in Scala
- Web Browsers that support Java Applets and how to enable them
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
