CSS Syntax and Rules: Selectors, Declarations, Properties, and Values

If you’re getting started with CSS, one of the first things you’ll want to understand is how CSS is written. Every bit of design magic you see on a website comes down to rules—rules that tell the browser how to style elements. These rules follow a consistent syntax: selectors, declarations, properties, and values.

Let’s break it down step by step.

The Structure of a CSS Rule

A CSS rule consists of two main parts:

• Selector – identifies the HTML element(s) you want to style
• Declaration Block – contains one or more declarations inside curly braces {}

Each declaration is made up of:

• Property: the specific style attribute you want to change
• Value: the setting you want to assign to that property

General Form of a CSS Rule:

css
selector {
  property: value;
}

CSS Selectors

Selectors are like “pointers” that tell CSS which parts of the webpage to style. Some commonly used selectors are:

• Element Selector – targets HTML tags directly.

css
p {
  color: blue;
}

Styles all <p> elements.

• Class Selector – targets elements with a specific class attribute (denoted with .).

css
.highlight {
  background-color: yellow;
}

• ID Selector – targets an element with a unique id (denoted with #).

css
#main-title {
  font-size: 24px;
}

• Universal Selector – applies to all elements (*).

css
* {
  margin: 0;
  padding: 0;
}

• Group Selector – targets multiple elements at once.

css
h1, h2, h3 {
  font-family: Arial, sans-serif;
}

CSS Declarations

Inside the curly braces {}, you add declarations. Each declaration follows this pattern:

css
property: value;

The property is the visual characteristic you want to style (color, background, margin, etc.).

The value is the specific setting for that property (e.g., red, 20px, bold).

For example:

css
p {
  color: red;  
  font-size: 16px;  
}

Here, the paragraph text becomes red, with font size set to 16 pixels.

CSS Properties

Properties define what aspect of the element will change. CSS offers hundreds of properties, categorized broadly into:

• Text and Font properties: color, font-size, font-family, line-height, text-align
• Box model properties: margin, padding, width, height, border
• Background properties: background-color, background-image, background-position
• Layout properties: display, position, flex, grid-template-columns
• Other properties: transition, opacity, z-index

CSS Values

Values are assigned to properties to refine the rule. They can be:

• Keywords – auto, bold, solid
• Colors – red, #ff0000, rgb(255, 0, 0)
• Length/Size units – px (pixels), %, em, rem, vh, vw
• URLs – url("image.jpg") for background images
• Numbers – used in properties like opacity: 0.5; or line-height: 1.5;

Example combining different values:

css
body {
  background-color: #f0f0f0;
  font-size: 18px;
  line-height: 1.6;
  color: rgb(50, 50, 50);
}

Example: Putting It All Together

Here’s how multiple rules work on a simple webpage:

css
/* Styling a heading */
h1 {
  color: darkblue;
  text-align: center;
}

/* Styling a paragraph with a class */
p.intro {
  font-size: 18px;
  line-height: 1.5;
  color: #444;
}

/* Giving a unique style to an element */
#special-note {
  background-color: yellow;
  padding: 10px;
  border: 2px solid orange;
}

Final Thoughts

• Selectors target elements.
• Declarations define how elements look.
• Properties are the styling aspects being changed.
• Values are the details you assign to those properties.

Mastering CSS syntax is like learning the “grammar” of web styling. Once you understand the structure of rules and how selectors, properties, and values work together, you’ll have the foundation needed to design visually appealing and responsive websites.

Check out the YouTube Playlist for great CSS content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud