CSS Basics - A Complete Guide for Beginners

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It controls the layout, colors, fonts, and overall visual appearance of web pages. CSS allows developers to separate content (HTML) from presentation (styling), making websites easier to maintain and update.

CSS Selectors

Selectors are used to target HTML elements to apply styles:

/* 元素选择器 - 选中所有段落 */
p { color: red; }

/* 类选择器 - 选中所有带该类的元素 */
.className { color: blue; }

/* ID 选择器 - 选中唯一元素 */
#idName { color: green; }

/* 属性选择器 */
[type="text"] { border: 1px solid gray; }

/* 后代选择器 */
div p { margin: 10px; }

/* 子选择器 */
div > p { padding: 5px; }

The Box Model

Every HTML element can be considered as a rectangular box consisting of:

/* 设置盒模型 */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
  box-sizing: border-box; /* 包含 padding 和 border */
}

Common Properties

Related Tools