CSS Basics

CSS Syntax

Understand CSS syntax: selectors, declarations, properties, values, and the box model.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector { property: value; another-property: value; }

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

CSS Selectors

Selector	Example	Description
Element	`p`	All `<p>` elements
Class	`.card`	Elements with class="card"
ID	`#hero`	Element with id="hero"
Attribute	`[href]`	Elements with href attribute
Descendant	`div p`	All `<p>` inside `<div>`
Child	`div > p`	Direct `<p>` children of `<div>`
Pseudo-class	`a:hover`	On hover
Pseudo-element	`p::first-line`	First line of `<p>`

Example

css

/* Element selector */
p { font-size: 1rem; line-height: 1.7; }

/* Class selector */
.highlight { background: rgba(108,92,231,0.2); }

/* ID selector */
#logo { width: 120px; height: auto; }

/* Multiple selectors */
h1, h2, h3 { font-weight: 700; }

/* Descendant combinator */
.card p { color: #A0A0B0; }

/* Child combinator */
nav > ul { list-style: none; }

/* Pseudo-classes */
a:hover { color: #6C5CE7; }
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: rgba(255,255,255,0.03); }

/* Pseudo-elements */
p::first-letter { font-size: 2em; float: left; }
.btn::after { content: " →"; }

/* Attribute selector */
input[type="text"] { border: 1px solid #2A2A3A; }
a[href^="https"] { color: #00E676; }

Try it yourself — CSS