Stosuje kaskadowe arkusze stylów do tworzenia responsywnych stron internetowych

Dlaczego tak

Zewnętrzny arkusz stylów to osobny plik .css dołączany znacznikiem <link rel="stylesheet">; wszystkie podstrony korzystają z tych samych reguł, więc zmiana w jednym pliku działa w całym serwisie, a przeglądarka może plik zapamiętać. Styl wewnętrzny w <style> trzeba by poprawiać na każdej z 20 stron osobno, a style lokalne w atrybucie style — przy każdym elemencie. Znacznik <script> wczytuje JavaScript, a nie CSS.

Dlaczego tak

Deklaracja oznaczona !important wygrywa z każdą zwykłą deklaracją tej samej właściwości, niezależnie od specyficzności selektorów, więc akapit będzie czerwony. Bez !important zwyciężyłby selektor identyfikatora #nota (kolor niebieski), bo ma największą specyficzność — to najczęstsza odpowiedź błędna. Selektor p.info jest silniejszy od .info, ale też przegrywa z !important.

Dlaczego tak

Pseudoelement wskazuje fragment elementu, który nie istnieje w kodzie HTML jako osobny znacznik — ::first-line obejmuje pierwszy wiersz akapitu, a w CSS3 zapisuje się go podwójnym dwukropkiem. a:hover to pseudoklasa, która opisuje stan całego elementu (kursor nad odnośnikiem), dlatego łatwo ją pomylić. input[type="text"] to selektor atrybutu, a .menu > li — selektor dziecka.

Dlaczego tak

Kombinator > oznacza bezpośrednie dziecko: wybiera elementy p, których rodzicem jest div, czyli akapity A i C. Akapit B jest potomkiem div, ale jego bezpośrednim rodzicem jest section, więc nie spełnia warunku. Wszystkie trzy akapity wybrałby selektor potomka div p (ze spacją), co jest najczęstszą pomyłką.

Dlaczego tak

Selektor potomka nav a wskazuje odnośniki zagnieżdżone w nav, a właściwość text-decoration z wartością none usuwa podkreślenie. Zapis nav, a to grupowanie: reguła dotyczyłaby samego nav oraz wszystkich odnośników na stronie, także poza menu. nav.a wybiera element nav z klasą „a”, a właściwość underline w CSS nie istnieje.

Dlaczego tak

Przy box-sizing: border-box szerokość width obejmuje treść, dopełnienie i obramowanie, więc na treść zostaje 300 − 2 · 20 − 2 · 5 = 250 px. Wynik 260 px pomija obramowanie, a 300 px traktuje width tak, jakby dotyczyła samej treści. 350 px to całkowita szerokość przy domyślnym content-box (300 + 40 + 10); margines nie wchodzi w żaden z tych wymiarów, bo leży poza ramką.