To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

CSS jest wykorzystywany do stylowania stron internetowych — przykładowo, do zmiany fontu, koloru, rozmiaru i odstępów treści, dzielenia jej na kolumny lub dodania animacji oraz innych dekoracji. Ten moduł pozwoli Ci opanować podstawy CSS - selektory, własności, pisanie reguł, dodawanie CSS do HTML, ustalanie długości, koloru oraz innych wartości w CSS, kaskadowość, dziedziczenie, a także debugowanie CSS.

Wymagania wstępne

Zanim rozpoczniesz ten moduł, powinieneś mieć:

  1. Podstawową umiejętność korzystania z komputera oraz pasywnego korzystania ze stron internetowych (np. przeglądania ich, konsumowania treści.)
  2. Podstawowe środowisko pracy opisane w Instalacja podstawowego oprogramowania, oraz znajomość tworzenia i zarządzania plikami opisanymi w Struktura plików witryny.
  3. Podstawową znajomość HTML omówioną w module Introduction to HTML.

Uwaga: Jeśli pracujesz na komputerze/tablecie/innym urządzeniu, które nie umożliwia Ci tworzenia własnych plików, możesz wypróbować (prawie wszystkie) przykłady w programach online jak JSBin lub Thimble.


This module contains the following articles, which will take you through all the basic theory of CSS, and provide ample opportunity for you to test out some skills.

How CSS works
In this module we start off with a theoretical grounding, looking at what CSS is, how the browser turns HTML into a DOM, how CSS is applied to parts of the DOM, some very basic syntax examples, and what code is used to actually include our CSS in our web page.
CSS syntax
Next up, we dive into CSS syntax in a lot more detail, looking at how properties and their values form into declarations, multiple declarations form into declaration blocks, and declaration blocks and selectors form into complete CSS rules. We round off the article by looking at other CSS syntax features such as comments and whitespace.
Selectors are mentioned in the previous article, but in this guide we go into a lot more detail, showing what selector types are available and how they work.
CSS wartości i jednostki
There are many types of CSS property values to consider, from numerical values to colors to functions that perform a certain action (like embedding a background image or rotating an element.) Some of these rely on particular units for specifying the exact values they are representing — do you want your box to be 30 pixels wide, or 30 centimetres, or 30 ems? In this guide, we look at more common values like length, colour and simple functions, as well as exploring less common units like degrees, and even unitless numerical values.
Cascade and inheritance
CSS has two different but related systems to resolve situations where you have selector conflicts (different selectors select the same elements; which one wins and ends up being applied?) and elements nested inside other elements (some of the styling applied to the parent elements makes sense to be inherited by the child elements; some doesn't.) This article covers both systems in enough detail to be useful but not overwhelming.
The box model
The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model.
Debugging CSS
In the final article of this module, we take a look at the basics of debugging CSS, including exploring the CSS applied to a page, and other tools that can help you find errors in your CSS code.


The following assessments will test your understanding of the CSS basics covered in the guides above.

Fundamental CSS comprehension
This assessment tests your understanding of the above guides with some carefully crafted exercises.

Zobacz również

Intermediate Web Literacy 1: Intro to CSS
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to CSS module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.