learn2kode.in

Menu

CSS Tutorial

Menu

CSS Syntax & Selectors

CSS (Cascading Style Sheets) works by selecting HTML elements and applying styles to them. Every CSS rule has two main parts: the selector and the declaration block.

CSS Syntax

A CSS rule looks like this:

Copy Text 
selector {
  property: value;
}

Explanation

  • Selector → Targets the HTML element you want to style
  • Property → The feature you want to change (color, font-size, margin, etc.)
  • Value → The setting for that property

Example

Copy Text 
p{
color:red;
font-size:18px;
font-weight:600;
}

This makes all <p> elements blue and sets their font size.

Types of CSS Selectors

CSS offers different ways to select elements depending on your need.

1. Element Selector

Selects all HTML elements with a specific tag name.

Copy Text 
h1 {
  color: blue;
  font-size: 25px;
}

2. Class Selector

Targets elements with a specific class. Class names begin with a dot (.).

Copy Text 
.title {
  font-weight: bold;
}

3. ID Selector

Selects an element with a unique ID. ID selectors start with a hash (#).

Copy Text 
#header {
  background: lightgray;
}

4. Universal Selector

Applies styles to all elements.

Copy Text 
* {
  margin: 0;
  padding: 0;
}

5. Group Selector

Used to style multiple selectors at once.

Copy Text 
h1, h2, h3 {
  color: navy;
}

6. Attribute Selector

Selects elements based on HTML attributes.

Copy Text 
input[type="text"] {
  border: 1px solid #333;
}

7. Pseudo-Class Selector

Used for special states like hover, focus, active, first-child, etc.

Copy Text 
a:hover {
  color: red;
}

8. Pseudo-Element Selector

Targets specific parts of an element such as first letter or before/after content.

Copy Text 
p::first-letter {
  font-size: 30px;
}

9. Descendant Selector

Selects elements inside another element.

Copy Text 
div p {
  color: purple;
}

10. Child Selector

Selects direct children only.

Copy Text 
ul > li {
  font-size: 16px;
}
CSS Colors