Learn CSS
CSS is the language you use to style HTML, controlling colors, fonts, spacing, and layout separately from your page's content.
What is CSS?
CSS stands for Cascading Style Sheets. HTML gives a page its structure and meaning, while CSS decides how that structure looks: the colors, the fonts, the amount of space between things, and where each piece sits on the screen. Keeping style separate from content means you can restyle an entire site without rewriting a single line of HTML.
Why CSS matters
Before CSS, presentation was tangled into the markup itself, which made pages hard to maintain. Today you write your styling once and apply it everywhere. Change one rule and every matching element across the site updates at the same time.
- Separates content from presentation so both are easier to manage
- Lets one stylesheet control the look of many pages
- Makes responsive, mobile-friendly layouts possible
- Reduces repetition, so sites load faster and stay consistent
A first look
The example below changes the page background and the heading color. Notice that the HTML is never touched; only the appearance changes.
Styling a page
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
h1 {
color: #00643c;
text-align: center;
}
</style>
</head>
<body>
<h1>My Page</h1>
<p>Welcome to my website.</p>
</body>
</html>What comes next
Once you understand what CSS is for, the next step is learning how a rule is written. Continue to CSS Syntax to see the exact shape of every CSS rule.
Exercise: CSS Introduction
What does the abbreviation CSS stand for?
Frequently Asked Questions
- Is CSS hard to learn?
- The syntax is simple, but layout takes practice. Most difficulty comes from how properties interact: the box model, specificity and stacking contexts. Flexbox and grid removed most of the historical pain.
- Should I use flexbox or grid?
- Flexbox for one dimension, a row or a column, such as a navbar or a button group. Grid for two dimensions at once, such as a page layout. They work together, and most real layouts use both.
- What is CSS specificity?
- The rule that decides which style wins when several target the same element. Inline styles beat IDs, IDs beat classes, classes beat element selectors. When specificity ties, whichever rule comes last in the stylesheet applies.
- How long does it take to learn CSS?
- Two to four weeks for selectors, the box model and basic layout. Getting comfortable with responsive design and consistent cross-browser results generally takes a few months of building real pages.
