CSS – pierwsze ćwiczenia

Ćwiczenie 1

Treść:

Utwórz stronę z:

• jednym h1
• dwoma akapitami

Ustaw w CSS:

• h1 – kolor: czerwony
• p – kolor: niebieski

Kryterium zaliczenia:

• użyty selektor h1
• użyty selektor p
• brak stylów inline

---

Ćwiczenie 2

Dodaj:

• 3 akapity

Zmień w CSS:

• wszystkie akapity: kolor szary, rozmiar 20px

Sprawdź: czy zmieniły się WSZYSTKIE naraz?

Ćwiczenie 3

Utwórz:

• h1
• h2
• 3 akapity

Ustaw:

• h1 – zielony
• h2 – pomarańczowy
• p – szary, 18px

Ćwiczenie 4

Dodaj listę ul z 5 elementami li.

Ustaw w CSS:

• ul – tło jasnoszare
• li – kolor granatowy

---

Ćwiczenie 5

Zbuduj stronę z:

• h1
• h2
• 2 listami ul
• 3 akapitami

Ustaw:

• body – czcionka Arial
• h1 – czerwony
• h2 – niebieski
• p – szary
• li – zielony

---

Ćwiczenie 6

Zrób stronę z 10 akapitami.

Napisz TYLKO JEDNĄ regułę CSS, która:

• zmieni kolor wszystkich akapitów,
• zmieni im rozmiar tekstu.

Pytanie: Ile elementów HTML zmieni się po tej jednej regule?

 

Klasy i identyfikatory:

Ćwiczenie 1

Utwórz 3 akapity. Dwa z nich mają być „ważne”.

Użyj klasy important, która:

• ustawia kolor na czerwony,
• ustawia pogrubienie.

---

Ćwiczenie 2

Dodaj:

• 1 nagłówek h1 z ID main-title

Ustaw w CSS:

• kolor: zielony
• wyśrodkowanie tekstu

---

Ćwiczenie 3

Zrób stronę z:

• 1 h1 (ID: title)
• 4 akapitami

Dwa akapity mają mieć klasę highlight:

• tło żółte
• pogrubienie

---

Ćwiczenie 4

Zrób listę 6 elementów.

Co drugi element ma mieć klasę special:

• kolor niebieski
• kursywa

---

Ćwiczenie 5

Utwórz:

• nagłówek h1 (ID: header)
• 3 sekcje (div)

Każda sekcja ma:

• klasę box

Jedna z nich dodatkowo:

• ma klasę active

Style:

• .box → ramka i padding
• .active → inne tło