Written by CSS Syntax
CSS (Cascading Style Sheets) is a language used for describing the visual presentation of a document written in HTML or XML. It consists of a set of rules that define how elements on a web page should be displayed. The basic syntax of CSS follows a selector-property-value structure.
Here’s an overview of the CSS syntax:
- Selectors: Selectors target specific HTML elements on which you want to apply the styles. They can be based on element names, class names, IDs, attributes, or other criteria. For example:
- Element selector:
p(selects all<p>elements) - Class selector:
.my-class(selects elements with the class “my-class”) - ID selector:
#my-id(selects an element with the ID “my-id”)
- Element selector:
- Properties: CSS properties define the visual characteristics or behaviors of the selected elements. They include attributes like color, font-size, width, height, and many more. For example:
color: red;(sets the text color to red)font-size: 16px;(sets the font size to 16 pixels)
- Values: CSS property values specify the specific setting for a property. They can be keywords, numerical values, color codes, or other valid values for that property. For example:
text-align: center;(centers the text within the element)background-color: #F0F0F0;(sets the background color to a light gray)
- Declaration Block: A set of CSS properties and their values enclosed in curly braces
{}is known as a declaration block. It follows the selector in a CSS rule. For example:css
p {
color: red;
font-size: 16px;
}
Rule: A CSS rule consists of a selector and the associated declaration block. It defines how the selected elements should be styled. For example:
css
p {
color: red;
font-size: 16px;
}
Comments: CSS allows you to add comments to describe your code. Comments are ignored by the browser and can be useful for documentation or temporarily disabling styles. For example:
css
/* This is a comment */
CSS rules are typically placed inside <style> tags within the <head> section of an HTML document. Alternatively, they can be placed in an external CSS file and linked to the HTML document using the <link> tag.
Note that this is just a basic overview of the CSS syntax. CSS offers a wide range of selectors, properties, and values to achieve different effects and layouts on web pages.
