CSS Syntax

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It allows you to control the layout, style, and appearance of web pages. The basic syntax of CSS consists of selectors and declarations.

Here’s a breakdown of the CSS syntax with examples:

Selector:

• The selector is used to target HTML elements on which you want to apply styles.It can be an element selector, class selector, ID selector, or a combination of these.

/* Element Selector */
p {
  color: blue;
}

/* Class Selector */
.highlight {
  background-color: yellow;
}

/* ID Selector */
#header {
  font-size: 24px;
}

/* Combined Selector */
#header, .highlight   {
  color: green;
}

Declaration Block:

• The declaration block is enclosed in curly braces {} and contains one or more declarations separated by semicolons.Each declaration consists of a property and a value, separated by a colon :

/* Declaration Block */
p {
  color: blue;
  font-size: 16px;
}

/* Multiple Declarations */
h1 {
  font-family: "Arial", sans-serif;
  text-align: center;
}

Property and Value:

• The property defines what aspect of the element you want to style (e.g., color, font-size, margin).The value is the specific setting you apply to the property.

/* Property and Value */
p {
  color: red;        /* property: color, value: red */
  margin-left: 20px; /* property: margin-left, value: 20px */
}

Comments:

• CSS supports comments, which are ignored by the browser but helpful for documentation.

/* This is a comment */
p {
  /* This is another comment */
  font-weight: bold;
}

Units:

• Values in CSS can be specified with different units such as pixels (px), em, rem, percentages (%), etc.

p {
  font-size: 18px;
  margin-bottom: 2em;
}

These are some basic examples of CSS syntax. CSS is a powerful language that allows you to control the layout, style, and presentation of HTML documents, making it a key technology for web development.