CSS Syntax

CSS (Cascading Style Sheets) syntax consists of selectors, properties, and values.

Selectors:

Selectors target HTML elements to which styles will be applied. They can target elements based on their type, class, ID, attributes, or relationship to other elements. Selectors are followed by a set of curly braces {} enclosing one or more property-value pairs.

Example of selectors:

Element selector: p { ... }
Class selector: .classname { ... }
ID selector: #idname { ... }
Attribute selector: [attribute=value] { ... }
Descendant selector: parentElement childElement { ... }

Properties:

Properties are the attributes of an element that you want to style. They specify the aspect of the element you wish to change, such as color, font-size, margin, etc.

Example of properties:

color: Sets the color of text content.
font-size: Sets the size of the font.
margin: Sets the margin of an element.
padding: Sets the padding of an element.
background-color: Sets the background color of an element.

Values:

Values are assigned to properties and define how the property should be styled. Values can be keywords, numerical values, colors, or other types depending on the property being used.

Example of values:

color: red;
font-size: 16px;
margin: 10px;
padding: 20px;
background-color: #ffffff;

Example: with syntax

/* CSS comment */
h1 {
    color: blue; /* property: value */
    font-size: 24px;
}

.intro {
    background-color: #f0f0f0;
    padding: 10px;
}

#main-content {
    margin-top: 20px;
}

a[href="https://example.com"] {
    text-decoration: none;
}

h1 is a selector targeting all
elements.
.intro is a class selector targeting elements with class="intro".
#main-content is an ID selector targeting the element with id="main-content".
a[href="https://example.com"] is an attribute selector targeting elements with href="https://example.com".
color, font-size, background-color, padding, margin-top, text-decoration are properties, each followed by their respective values.

<-- Introduction

Selector -->