Learn To Style HTML Using CSS - MDN Web Docs

• Skip to main content
• Skip to search
• Skip to select language

1. Guides
2. CSS

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Español
  • Français
  • 日本語
  • 한국어
  • Português (do Brasil)
  • Русский
  • 中文 (简体)
  • 正體中文 (繁體)

• Prerequisites
• Modules
• Solving common CSS problems
• "CSS is weird"
• See also

1. Complete beginners start here!
2. Getting started with the web
   1. Getting started with the web
   2. Installing basic software
   3. What will your website look like?
   4. Dealing with files
   5. HTML basics
   6. CSS basics
   7. JavaScript basics
   8. Publishing your website
   9. How the web works
3. HTML — Structuring the web
4. Introduction to HTML
   1. Introduction to HTML
   2. Getting started with HTML
   3. What's in the head? Metadata in HTML
   4. HTML text fundamentals
   5. Creating hyperlinks
   6. Advanced text formatting
   7. Document and website structure
   8. Debugging HTML
   9. Marking up a letter
   10. Structuring a page of content
5. Multimedia and embedding
   1. Multimedia and embedding
   2. Images in HTML
   3. Video and audio content
   4. From object to iframe — other embedding technologies
   5. Adding vector graphics to the web
   6. Responsive images
   7. Mozilla splash page
6. HTML tables
   1. HTML tables
   2. HTML table basics
   3. HTML table advanced features and accessibility
   4. Structuring planet data
7. CSS — Styling the web
8. CSS first steps
   1. CSS first steps
   2. What is CSS?
   3. Getting started with CSS
   4. How CSS is structured
   5. How CSS works
   6. Styling a biography page
9. CSS building blocks
   1. CSS building blocks
   2. CSS selectors
   3. Type, class, and ID selectors
   4. Attribute selectors
   5. Pseudo-classes and pseudo-elements
   6. Combinators
   7. Cascade, specificity, and inheritance
   8. Cascade layers
   9. The box model
   10. Backgrounds and borders
   11. Handling different text directions
   12. Overflowing content
   13. CSS values and units
   14. Sizing items in CSS
   15. Images, media, and form elements
   16. Styling tables
   17. Advanced styling effects
   18. Debugging CSS
   19. Organizing your CSS
   20. Fundamental CSS comprehension
   21. Creating fancy letterheaded paper
   22. A cool-looking box
10. Styling text
    1. CSS styling text
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Typesetting a community school homepage
11. CSS layout
    1. CSS layout
    2. Introduction to CSS layout
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. Positioning
    8. Multiple-column layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy layout methods
    12. Supporting older browsers
    13. Fundamental layout comprehension
12. JavaScript — Dynamic client-side scripting
13. JavaScript first steps
    1. JavaScript first steps
    2. What is JavaScript?
    3. A first splash into JavaScript
    4. What went wrong? Troubleshooting JavaScript
    5. Storing the information you need — Variables
    6. Basic math in JavaScript — numbers and operators
    7. Handling text — strings in JavaScript
    8. Useful string methods
    9. Arrays
    10. Silly story generator
14. JavaScript building blocks
    1. JavaScript building blocks
    2. Making decisions in your code — conditionals
    3. Looping code
    4. Functions — reusable blocks of code
    5. Build your own function
    6. Function return values
    7. Introduction to events
    8. Event bubbling
    9. Image gallery
15. Introducing JavaScript objects
    1. Introducing JavaScript objects
    2. JavaScript object basics
    3. Object prototypes
    4. Object-oriented programming
    5. Classes in JavaScript
    6. Working with JSON
    7. Object building practice
    8. Adding features to our bouncing balls demo
16. Asynchronous JavaScript
    1. Asynchronous JavaScript
    2. Introducing asynchronous JavaScript
    3. How to use promises
    4. How to implement a promise-based API
    5. Introducing workers
    6. Sequencing animations
17. Client-side web APIs
    1. Client-side web APIs
    2. Introduction to web APIs
    3. Manipulating documents
    4. Fetching data from the server
    5. Third-party APIs
    6. Drawing graphics
    7. Video and Audio APIs
    8. Client-side storage
18. Web forms — Working with user data
19. Web form building blocks
    1. Web form building blocks
    2. Your first form
    3. How to structure a web form
    4. Basic native form controls
    5. The HTML5 input types
    6. Other form controls
    7. Styling web forms
    8. Advanced form styling
    9. UI pseudo-classes
    10. Client-side form validation
    11. Sending form data
20. Advanced web form techniques
    1. How to build custom form controls
    2. Sending forms through JavaScript
    3. CSS property compatibility table for form controls
    4. HTML forms in legacy browsers
21. Accessibility — Make the web usable by everyone
22. Accessibility guides
    1. Accessibility
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
    8. Assessment: Accessibility troubleshooting
23. Performance — Making websites fast and responsive
24. Performance guides
    1. Web performance
    2. The "why" of web performance
    3. What is web performance?
    4. Perceived performance
    5. Measuring performance
    6. Multimedia: Images
    7. Multimedia: video
    8. JavaScript performance optimization
    9. HTML performance optimization
    10. CSS performance optimization
    11. The business case for web performance
25. MathML — Writing mathematics with MathML
26. MathML first steps
    1. MathML first steps
    2. Getting started with MathML
    3. MathML Text Containers
    4. MathML fractions and roots
    5. MathML scripted elements
    6. MathML tables
    7. Three famous mathematical formulas
27. Games — Developing games for the web
28. Guides and tutorials
    1. Introduction to game development for the Web
    2. Techniques for game development
    3. Tutorials
    4. Publishing games
29. Tools and testing
30. Client-side web development tools
    1. Understanding client-side web development tools
    2. Client-side tooling overview
    3. Command line crash course
    4. Package management basics
    5. Introducing a complete toolchain
    6. Deploying our app
31. Introduction to client-side frameworks
    1. Introduction to client-side frameworks
    2. Framework main features
32. React
    1. Getting started with React
    2. Beginning our React todo list
    3. Componentizing our React app
    4. React interactivity: Events and state
    5. React interactivity: Editing, filtering, conditional rendering
    6. Accessibility in React
    7. React resources
33. Ember
    1. Getting started with Ember
    2. Ember app structure and componentization
    3. Ember interactivity: Events, classes and state
    4. Ember Interactivity: Footer functionality, conditional rendering
    5. Routing in Ember
    6. Ember resources and troubleshooting
34. Vue
    1. Getting started with Vue
    2. Creating our first Vue component
    3. Rendering a list of Vue components
    4. Adding a new todo form: Vue events, methods, and models
    5. Styling Vue components with CSS
    6. Using Vue computed properties
    7. Vue conditional rendering: editing existing todos
    8. Vue refs and lifecycle methods for focus management
    9. Vue resources
35. Svelte
    1. Getting started with Svelte
    2. Starting our Svelte to-do list app
    3. Dynamic behavior in Svelte: working with variables and props
    4. Componentizing our Svelte app
    5. Advanced Svelte: Reactivity, lifecycle, accessibility
    6. Working with Svelte stores
    7. TypeScript support in Svelte
    8. Deployment and next steps
36. Angular
    1. Getting started with Angular
    2. Beginning our Angular todo list app
    3. Styling our Angular app
    4. Creating an item component
    5. Filtering our to-do items
    6. Building Angular applications and further resources
37. Git and GitHub
    1. Git and GitHub
38. Cross browser testing
    1. Cross browser testing
    2. Introduction to cross-browser testing
    3. Strategies for carrying out testing
    4. Handling common HTML and CSS problems
    5. Handling common JavaScript problems
    6. Handling common accessibility problems
    7. Implementing feature detection
    8. Introduction to automated testing
    9. Setting up your own test automation environment
39. Server-side website programming
40. First steps
    1. Server-side website programming first steps
    2. Introduction to the server side
    3. Client-Server Overview
    4. Server-side web frameworks
    5. Website security
41. Django web framework (Python)
    1. Django Web Framework (Python)
    2. Django introduction
    3. Setting up a Django development environment
    4. Django Tutorial: The Local Library website
    5. Django Tutorial Part 2: Creating a skeleton website
    6. Django Tutorial Part 3: Using models
    7. Django Tutorial Part 4: Django admin site
    8. Django Tutorial Part 5: Creating our home page
    9. Django Tutorial Part 6: Generic list and detail views
    10. Django Tutorial Part 7: Sessions framework
    11. Django Tutorial Part 8: User authentication and permissions
    12. Django Tutorial Part 9: Working with forms
    13. Django Tutorial Part 10: Testing a Django web application
    14. Django Tutorial Part 11: Deploying Django to production
    15. Django web application security
    16. Assessment: DIY Django mini blog
42. Express Web Framework (Node.js/JavaScript)
    1. Express web framework (Node.js/JavaScript)
    2. Express/Node introduction
    3. Setting up a Node development environment
    4. Express Tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a Database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
43. Further resources
44. Common questions
    1. Common questions
    2. Use HTML to solve common problems
    3. Use CSS to solve common problems
    4. Solve common problems in your JavaScript code
    5. Web mechanics
    6. Tools and setup
    7. Design and accessibility

• Prerequisites
• Modules
• Solving common CSS problems
• "CSS is weird"
• See also

Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Prerequisites

You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first.

Once you understand the fundamentals of HTML, we recommend that you learn further HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't learn CSS without knowing HTML.

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). 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 — both of which are parts of our Getting started with the web complete beginner's module.

It is also recommended that you work through Getting started with the web before proceeding with this topic, especially if you are completely new to web development. However, much of what is covered in its CSS basics article is also covered in our CSS first steps module, albeit in a lot more detail.

Modules

This topic contains the following modules, in a suggested order for working through them. You should start with the first one.

CSS first steps

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 a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

CSS building blocks

This module carries on where CSS first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.

CSS styling text

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

CSS layout

At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place with respect to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

Solving common CSS problems

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't know how to do it yet!

"CSS is weird"

CSS works a bit differently from most programming languages and design tools you'll come across. Why does it work the way it does? In the following video, Miriam Suzanne provides a useful explanation of why CSS works as it does, and why it has evolved as it has:

See also

CSS on MDN

The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Mar 5, 2024 by MDN contributors.

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