1. 样式化元素的外观
p {
color: red;
font-size: 20px;
}这个CSS代码片段展示了如何样式化所有的p元素的外观。其中color属性将所有文本设置为红色，font-size属性将字体大小设置为20像素。
2. 控制元素的位置和布局
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}这个CSS代码片段使用了flex布局，将.wrapper元素的子元素居中。display属性用于设置元素的布局方式，justify-content属性用于设置子元素在主轴上的对齐方式，align-items属性用于设置子元素在交叉轴上的对齐方式。
3. 响应式设计
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}这个CSS代码片段展示了如何响应屏幕宽度小于768像素的情况。@media规则用于指定样式在特定条件下应该被应用，例如屏幕宽度小于768像素。在这个例子中，body元素的字体大小被设置为16像素。
CSS是Web开发中不可或缺的一部分，它使网页设计变得更加灵活和美观。