导航|地址|刷新
CSS styling basics - Learn web developme…


Skip to main content

Skip to search



MDN





HTML

HTML: Markup language

HTML reference
Elements

Global attributes

Attributes

See all…
HTML guides
Responsive images

HTML cheatsheet

Date & time formats

See all…
Markup languages
SVG

MathML

XML




CSS

CSS: Styling language

CSS reference
Properties

Selectors

At-rules

Values

See all…
CSS guides
Box model

Animations

Flexbox

Colors

See all…
Layout cookbook
Column layouts

Centering an element

Card component

See all…




JavaScriptJS

JavaScript: Scripting language

JS reference
Standard built-in objects

Expressions & operators

Statements & declarations

Functions

See all…
JS guides
Control flow & error handing

Loops and iteration

Working with objects

Using classes

See all…




Web APIs

Web APIs: Programming interfaces

Web API reference
File system API

Fetch API

Geolocation API

HTML DOM API

Push API

Service worker API

See all…
Web API guides
Using the Web animation API

Using the Fetch API

Working with the History API

Using the Web speech API

Using web workers




All

All web technology

Technologies
Accessibility

HTTP

URI

Web extensions

WebAssembly

WebDriver

See all…
Topics
Media

Performance

Privacy

Security

Progressive web apps




Learn

Learn web development

Frontend developer course
Getting started modules

Core modules

MDN Curriculum

Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module

CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module




Tools

Discover our tools


Playground

HTTP Observatory

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Color mixer

Shape generator




About

Get to know MDN better


About MDN

Advertise with us

Community

MDN on GitHub




Blog





Toggle sidebar
Learn

Core learning modules

CSS styling basics

Theme

OS default

Light

Dark



English (US)

Remember language Learn more

Deutsch

English (US)

Español

Français

日本語

한국어

Português (do Brasil)

Русский

中文 (简体)

正體中文 (繁體)







CSS styling basics


Overview: Core learning modules

Next

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides all the CSS fundamentals you'll need for now, including syntax, features, and techniques.



In this article

Prerequisites

Tutorials and challenges

Test your skills

Additional tutorials

See also



Prerequisites

Before starting this module, you should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). You should also be familiar with HTML (work through our Structuring content with HTML module if not).


Note: If you are working on a computer, tablet, or another device where you can't create files, you can try running the code in an online editor such as CodePen or JSFiddle.




Tutorials and challenges
What is CSS?
CSS allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, what the basic syntax looks like, and how your browser applies CSS to HTML to style it.
Getting started with CSS
In this article, we will take a simple HTML document and apply CSS to it, learning some practical details of the language along the way. We will also review the CSS syntax features you've not looked at yet.
Styling a biography pageChallenge
In this challenge you will style a simple biography page, testing you on some of the skills you learned in the last couple of lessons including writing selectors, coloring backgrounds, and text styling. We will also invite you to look up some basic CSS features that we haven't covered, to test your research skills.
Basic CSS selectors
In this article we'll recap some selector fundamentals, including the basic type, class, and ID selectors.
Attribute selectors
As you know from your study of HTML, elements can have attributes that give further detail about the element being marked up. In CSS you can use attribute selectors to target elements with certain attributes. This lesson will show you how to use these very useful selectors.
Pseudo-classes and pseudo-elements
The next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements. There are a large number of these, and they often serve quite specific purposes. Once you know how to use them, you can look through the different types to see if there is something which works for the task you are trying to achieve.
Combinators
The final selectors we will look at are called combinators. Combinators are used to combine other selectors in a way that allows us to select elements based on their location in the DOM relative to other elements (for example, child or sibling).
The box model
Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items. In this lesson, we will take a look at the CSS Box model. You'll get an understanding of how it works and the terminology that relates to it.
Handling conflicts
The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts between style declarations are resolved.
Fixing blog page stylesChallenge
In this challenge we give you a basic blog page example that is partially styled. We need you to fix some problems with the existing CSS and add some styles to finish it off. Along the way we will test your knowledge of selectors, the box model, and conflicts/cascade.
Values and units
CSS rules contain declarations, which in turn are composed of properties and values. Each property used in CSS has a value type that describes what kind of values it is allowed to have. In this lesson, we will take a look at some of the most frequently used value types, what they are, and how they work.
Sizing items in CSS
Understanding how big the different features in your design will be is important. In this lesson we will summarize the various ways elements get a size via CSS and define a few terms about sizing that will help you in the future.
Backgrounds and borders
In this lesson, we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.
Challenge: Sizing and decorating a content panelChallenge
In this challenge you are provided with a lightly styled page structure that renders a content panel, with a heading at the top and a button bar at the bottom. We want you to follow the instructions to size and decorate it, producing an interesting layout as a result. Along the way, we'll test your knowledge of CSS values and units, sizing, and backgrounds and borders.
Overflowing content
Overflow is what happens when there is too much content to fit inside an element box. In this lesson, you will learn how to manage overflow using CSS.
Images, media, and form elements
In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently from regular boxes in terms of your ability to style them with CSS. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.
Styling tables
Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article explains how to make HTML tables look good, with some specific table styling techniques highlighted.
Debugging CSS
This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you to find out what is going on.



Test your skills

You will find "Test your skills" articles placed between the tutorial articles to check whether you have retained the most important information before you move on. If you want to explore all of these together, you can find them listed at Test your skills: CSS styling basics.



Additional tutorials

These tutorials are not part of the learning pathway, but they are interesting nonetheless — you should consider these as stretch goals, to optionally study when you are done with the main Core articles.
Advanced styling effects
This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.
Cascade layers
This lesson aims to introduce you to cascade layers, a more advanced feature that builds on the fundamental concepts of the CSS cascade and CSS specificity.
Handling different text directions
In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called writing modes. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.
Organizing CSS
As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.



See also
Learn HTML and CSS, Scrimba MDN learning partner
Scrimba'sLearn HTML and CSS course teaches you HTML and CSS through building and deploying five awesome projects, with fun interactive lessons and challenges taught by knowledgeable teachers.
Write your first lines of CSS!, Scrimba MDN learning partner
This interactive lesson provides a useful introduction to CSS syntax.

Overview: Core learning modules

Next






Help improve MDN
Was this page helpful to you?
Yes No
Learn how to contribute
This page was last modified on Nov 13, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content




Filter sidebar Clear filter input


Learn web development

MDN curriculum

Getting started modules

Environment setup
Installing software

Browsing the web

Code editors

Dealing with files

Command line


Your first website
What will it look like?

Creating the content

Styling the content

Adding interactivity

Publishing


Web standards
How the web works

The web standards model

How browsers load websites


Soft skills
Research and learning

Collaboration and teamwork

Workflows and processes

Finding a job


Core modules

Structuring content with HTML
Basic HTML syntax

Web page metadata

Headings and paragraphs

Emphasis and importance

Lists

Test: HTML text basics

Advanced text features

Test: Advanced HTML text

Challenge: Letter markup

Structuring documents

Creating links

Test: Links

Challenge: Bird watching site

Images

Test: Images

Video and audio

Test: Audio and video

Challenge: Splash page

Table basics

Table accessibility

Challenge: Planet data table

Forms and buttons

Test: Forms and buttons

Challenge: Feedback form

Debugging HTML

Test: HTML tests index

Additional tutorials
Vector graphics

Embedding technologies



CSS styling basics
What is CSS?

CSS getting started

Challenge: Biography page

Basic selectors

Attribute selectors

Pseudo-classes and elements

Combinators

Test: Selectors

Box model

Test: Box model

Handling conflicts

Test: Cascade

Challenge: Fixing blog styles

Values and units

Test: Values and units

Sizing

Test: Sizing

Backgrounds and borders

Test: Backgrounds and borders

Overflow

Test: Overflow

Challenge: Sizing and decorating

Images, media, forms

Test: Images and forms

Styling tables

Challenge: Styling color scheme search

Debugging CSS

Test: Styling basics tests index

Additional tutorials
Advanced styling effects

Cascade layers

Multiple text directions

Organizing your CSS



CSS text styling
Text and font fundamentals

Styling lists

Styling links

Web fonts

Challenge: Community school homepage


CSS layout
Introduction

Floats

Test: Floats

Positioning

Test: Positioning

Flexbox

Test: Flexbox

CSS grid layout

Test: CSS grid

Challenge: Fundamental layout

Responsive web design

Media queries

Test: RWD & media queries

Challenge: mobile-first

Test: Layout tests index

Additional tutorials
Multiple-column layout

Practical positioning examples

Legacy layout methods

Supporting older browsers



Dynamic scripting with JavaScript
What is JavaScript?

JavaScript walkthrough

Troubleshooting

Variables

Test: Variables

Numbers and operators

Test: Math

Strings

String methods

Test: Strings

Arrays

Test: Arrays

Challenge: Story generator

Conditionals

Test: Conditionals

Loops

Test: Loops

Functions

Build your own function

Function return values

Test: Functions

Events

Event bubbling

Test: Events

Objects

Test: Objects

DOM scripting

Challenge: Image gallery

Network requests

JSON

Test: JSON

Challenge: House data UI

Debugging and error handling

Test: JavaScript tests index


JavaScript frameworks and libraries
Introduction

Framework features

React getting started

React ToDo app

React components

React events and state

React editing, filtering, conditional UI

React accessibility

React resources


Accessibility
What is accessibility?

Accessibility tools

Accessible HTML

Test: HTML a11y

Accessible CSS and JS

Test: CSS/JS a11y

WAI-ARIA

Test: WAI-ARIA

Accessible multimedia

Mobile accessibility

Challenge: A11y debugging

Test: A11y tests index


Design for developers

Version control

Extension modules

Advanced JavaScript objects
Object prototypes

Object-oriented programming

Classes in JavaScript


…(内容过长已截断)

------
导航页 打开网址