This beginner’s guide introduces the CSS topics covered in a 2020 lesson: CSS rules, selectors, ways to add styles to a page, comments, and measurement units. HTML provides a page’s structure and content; CSS controls how that content is presented in a browser.
How CSS works with HTML
Start by understanding the HTML elements you want to style. Then write CSS rules that select those elements and assign the properties and values you want the browser to apply.
The parts of a CSS rule
A CSS rule combines a selector with a declaration. A declaration contains a property and a value. For example, a selector can target an element, while the property and value specify how it should appear.
Selectors
You can select elements by tag name, class, or ID, and combine selectors when a rule needs to target more than one kind of element.
Inline, internal, and external CSS
- Inline CSS is written on an individual HTML element.
- Internal CSS is included within the page.
- External CSS is stored in a separate stylesheet that the page links to.
Each approach places styles in a different location. Consider how the page or project is organized when choosing one.
Comments and measurement units
CSS comments let you annotate styles in a stylesheet. CSS also provides absolute and relative units for specifying dimensions. Choosing a unit or selector alone does not make a page responsive or accessible; test the page at different viewport sizes, check how the cascade resolves competing rules, and review text and layout for readability.
Use current CSS references
The lesson dates from 2020. For current language and property references, see the MDN CSS documentation and its CSS styling basics lessons.
What to learn next
If you are new to page structure, start with HTML5 basics, then continue with JavaScript for beginners to learn how to add behavior to a page.