# Kod CSS

Mamy nadzieję, że po lekturze ostatnich rozdziałów język HTML stał się Wam bliski. Teraz pora na zaznajomienie się z CSS-em, dzięki któremu wreszcie będziecie mogli nadać swojej stronie wymarzony wygląd.

Przypomnijmy sobie, jak wygląda składnia języka CSS:

```
selektor {
  właściwość: wartość;
}
```

Za pomocą selektorów wybieramy elementy strony, którym chcemy nadać określony wygląd. Na przykład:

```
p {
  color: blue;
}
```

W powyższy sposób ustawiamy niebieski kolor tekstu dla wszystkich akapitów na stronie. Z tego przykładu łatwo wysnuć wniosek, że za pomocą CSS-a możemy wybierać elementy podając nazwy znaczników. Nie jest to jednak jedyny sposób. Zapoznajmy się z kilkoma podstawowymi rodzajami **selektorów CSS**.

### Podstawowe selektory

Elementy na stronie można wybierać na bardzo różne sposoby. W tym rodziale poznamy podstawowe i najczęściej używane selektory CSS, czyli:

* nazwę tagu (`tagname`),
* klasę (`.classname`),
* ID (`#idname`),
* atrybut (`[attr=value]`).

Selektor wybierający element na podstawie tagu już przed chwilą widzieliśmy. Patrząc na selektory ID oraz atrybutu zapewne zaczyna już coś Wam świtać. Oznacza to, że możemy wybierać elementy również bazując na wartościach ich atrybutów `id` oraz obecności innych atrybutów. Jedyny rodzaj, który pewnie wydaje się w tej chwili tajemniczy to klasa.

#### Klasa

Przyjrzyjmy się przykładowemu elementowi strony:

```
<input type="email" id="myEmail" class="awwwesome-input">
```

Obok znanych już Wam atrybutów `type` oraz `id` pojawił się nowy: `class`. Jest on bardzo ważny w kontekście stylowania.

W zasadzie jedynym celem atrybutu `class` jest nadanie naszemu elementowi identyfikatora, który będzie służył jako selektor. Pewnie pomyślicie teraz "ale przecież on ma już identyfikator `id`!". Słusznie, jednak wartość atrybutu `class` nie musi być unikalna w zakresie dokumentu. Tę samą wartość możemy nadać więcej niż jednemu elementowi, nie muszą też być one tego samego rodzaju.

```
<body>
  <h1 class="awwwesome">Tytuł stronyh1>

  <p class="awwwesome">Jestem paragrafem tekstu. Nadano mi atrybut class, aby umożliwić stylowanie.p>
  <p>Jestem paragrafem tekstu.p>

  <form name="myForm">
    <label for="name">Twoje imię:label>
    <input id="name" type="text" class="awwwesome">
  form>
body>
```

Nadajmy tekstowi każdego elementu z powyższego przykładu posiadającego klasę `awwwesome` kolor zielony:

```
.awwwesome {
  color: green;
}
```

## Tytuł strony

Jestem paragrafem tekstu. Nadano mi atrybut class, aby umożliwić stylowanie.

Jestem paragrafem tekstu.

&#x20;Twoje imię:

#### ID

Wróćmy jeszcze na chwilę do elementu z naszego poprzedniego przykładu:

```
<input type="email" id="myEmail" class="awwwesome-input">
```

Nadajmy tekstowi w naszej kontrolce kolor czerwony, odnosząc się do niego po `id`. Możemy to zrobić w ten sposób:

Przypomnijmy, że w jednym dokumencie wartości atrybutu `id` powinny być unikalne. W związku z tym style zawarte wewnątrz tego selektora nie są zbyt reużywalne – możemy je zastosować tylko dla jednego, konkretnego elementu na stronie.

> **Important::Ważne**
>
> Choć stylowanie po atrybucie `id` jest możliwe, od dawna jest uważane za [złą praktykę](http://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109816#a109816).

#### Atrybut

Stylować można również elementy zawierające konkretny atrybut. Dobrym przykładem jest np. tag . W tym wypadku deklaracja CSS będzie dotyczyła kontrolek `input` typu text.

```
input[type="text"] {
  border: 2px solid blue;
}
```

W wyniku powyższego kodu do kontrolki zostanie dodana ramka o grubości 2px i kolorze niebieskim.

Warto tutaj dodać, że zapis `border: 2px solid blue;` jest zapisem skrótowym. Właściwości ramki możemy zdefiniować także osobno:

```
border-width: 2px;
border-style: solid;
border-color: blue;
```

### Podstawowe właściwości CSS i ich wartości

CSS umożliwia przypisanie do HTML-owych elementów całej palety różnych właściwości: od koloru tekstu, tła, przez zastosowanie dowolnego kroju pisma, dodania cieniowania, gradientu, aż do definiowania pozycji. W tym rozdziale zajmiemy się tymi najbardziej podstawowymi. Inne poznamy na kolejnych zajęciach. Wszystkich chętnych, którzy już teraz chcą zagłębić się w temacie CSS-owych właściwości, zapraszamy na [stronę QuackIt.com](http://www.quackit.com/css/properties/), choć podobnych źródeł w tym temacie znajdziecie jeszcze więcej.

#### Kolorowanie tekstu (`color`)

Służy nam do tego właściwość `color`. Najczęściej wartości kolorów definiuje się w kodzie heksadecymalnym (hex), czyli szestnastkowym z charakterystycznym znakiem `#`. Kody te pobiera się z tzw. color pickerów, np. [na stronie HTMLColorCodes.com](http://htmlcolorcodes.com/), w programach graficznych lub innych narzędziach. Jeśli zainteresowaliście się kodem heksadecymalnym, więcej do poczytania [na Wikipedii](https://pl.wikipedia.org/wiki/Kolory_w_Internecie#Zapis_szesnastkowy).

W CSS istnieją też [predefiniowane kolory](https://developer.mozilla.org/en/docs/Web/CSS/color_value) które możemy przypisać do elementów po prostu podając ich nazwę, np. `color: blue;` lub `color: salmon;`. Poza kodem heksadecymalnym i predefiniowanymi nazwami, możemy także przypisywać kolory poprzez zapis **rgb** (kanały red, green oraz blue), hsl (hue – barwa, saturation – nasycenie, lightness – jasność) czy nawet **rgba** i **hsla** (z uwzględnionym kanałem alfa, czyli kanałem odpowiadającym za stopień przezroczystości).

```
p {
  color: #f14b5c ; /* kolor pomarańczowy */
  color: rgb(241, 75, 92); /* ten sam kolor w zapisie rgb */
}
```

To jest akapit o kolorze pomarańczowym.

> **Important::Ważne**
>
> W CSS-owych kolorach występuje również wartość `transparent`, czyli przezroczysty.

#### Kolorowanie tła (`background-color`)

Służy do tego właściwość `background-color`, np.:

```
p {
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
}
```

&#x20;To jest paragraf o kolorze pomarańczowym na jasnoróżowym tle.

> **Important::Ważne**
>
> Zauważyliście już z pewnością, że wewnątrz kodu danego selektora możemy podać wartości więcej niż jednej właściwości. Pamiętajcie o tym, aby każdą linijkę kodu z deklaracją właściwości kończyć średnikiem – `;`.

/\* deklaracja poprawna \*/ .good { color: red; border: 1px solid blue; }

````
>
> ```css
/* deklaracja niepoprawna */
.bad {
  color: red
  border: 1px solid blue
}
````

> Niedomknięcie linii średnikiem spowoduje błąd w interpretacji arkusza stylów i w takiej sytuacji przeglądarka zignoruje źle zapisane deklaracje.
>
> Żeby uniknąć sytuacji, kiedy łamiecie sobie głowę zastanawiając się "czemu mój kod nie działa?", bądźcie bardzo skrupulatni w domykaniu linii średnikami!

#### Obramowanie (`border`)

Za obramowanie odpowiada właściwość `border`, której przypisać możemy grubość, rodzaj/styl linii (przerywana, ciągła, kropkowana…) i kolor. Przy nadawaniu wartości powinna być zachowana powyższa kolejność, czyli: grubość, styl, kolor:

```
 border: 2px solid #f14b5c;
```

Dostępne style linii to m.in.: `solid` (ciągła), `dotted` (kropkowana), `dashed` (przerywana) czy `double` (podwójna).

```
p {
  border: 2px solid #f14b5c;
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
}
```

&#x20;To jest akapit o kolorze pomarańczowym na jasnoróżowym tle.

#### Wyrównanie tekstu (`text-align`)

Tekst może zostać wyrównany na trzy różne sposoby:

* do prawej (`text-align: right;`),
* do lewej (`text-align: left;`),
* do środka (`text-align: center;`).

Dodatkowo tekst może być wyjustowany (`text-align: justify;`).

```
p {
  text-align: center;
  border: 2px solid #f14b5c;
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
}
```

&#x20;To jest akapit o kolorze pomarańczowym na jasnoróżowym tle.

#### Odmiana (grubość) pisma (`font-weight`)

Ta właściwość okaże się przydatna zwłaszcza w kolejnym rozdziale, kiedy będziemy wybierać niestandardowe rodziny fontów. Wtedy zauważycie, że dany krój może mieć różne grubości. CSS umożliwia ostylowanie tekstu różnymi odmianami danego fonta. Wartości `font-weight` mogą być liczbami, np. 100, 300, 500, 700, lub określone słownie, np. normal, bold, light, lighter. Pamiętajmy tylko, że nie każdy wybrany przez nas krój pisma posiadać będzie różne odmiany – w tych przypadkach właściwość CSS w żaden sposób nie wpłynie na zmianę grubości.

```
p {
  font-weight: bold;
  text-align: center;
  border: 2px solid #f14b5c;
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
}
```

&#x20;To jest akapit o kolorze pomarańczowym na jasnoróżowym tle.

Czy zauważyliście, w porównaniu do akapitu z zagadanienia wyżej, że font stał się grubszy?

#### Stopień (rozmiar) pisma (`font-size`)

Możemy przypisywać tekstom różne rozmiary pisma. Istnieje kilka jednostek: `px` (piksele), `rem`, `em` czy nawet `%` (procenty). Na razie skupmy się na pikselach, a znaczenie pozostałych jednostek wyjaśnimy już niebawem.

```
p {
  font-size: 36px;
  text-align: center;
  border: 2px solid #f14b5c;
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
}
```

&#x20;To jest akapit o kolorze pomarańczowym na jasnoróżowym tle.

#### Styl fontu (`font-style`)

Służy do tego właściwość: `font-style: italic;`, gdzie `italic` to nic innego jak kursywa. Normalny tekst uzyskamy, używając `font-style: normal;`.

```
p {
  font-style: italic;
  font-size: 36px;
  text-align: center;
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
  border: 2px solid #f14b5c;
}
```

&#x20;To jest akapit o kolorze pomarańczowym na jasnoróżowym tle.

#### Obrazek jako tło (`background-image`)

Żeby wypełnić dany element (sekcje, kontener, czy nawet całą zawartość strony, czyli ) obrazkowym tłem, stosujemy właściwość:

```
  background-image: url('tutaj podaję ścieżkę do obrazka');
```

Przykładowo:

```
section {
  background-image: url('./images/background.jpg');
}
```

Pamiętajcie o prawidłowym podaniu względnej ścieżki do obrazka.

Tło może przyjmować jeszcze wiele ciekawych właściwości, które [znajdziesz na MDN](https://developer.mozilla.org/en/docs/Web/CSS/background-image).

Warto potestować różne opcje dla rozmiaru tła, czyli `background-size`

```
  background-size: cover;
  background-size: 100%;
  background-size: contain;
  background-size: 50%;
```

Sprawdźcie jak zmienia się tło pod wpływem zmiany szerokości okna przeglądarki.

**Stylowanie listy**

Pewnie zastanawiacie się jak pozbyć się kropeczek przy elementach listy (`<ul>`). Służy do tego właściwość:



```css
  ul.list {
    list-style: none;
  }
```

Dzięki wartości `none` usunięte zostaną domyślne symbole oznaczające element listy.

Pozostałe właściwości CSS poznamy już niedługo!

### Jak dołączyć style do strony?

Istnieje kilka sposobów na to żeby dodać CSS do kodu HTML. Pierwszym z nich jest dołączenie zewnętrznego pliku z rozszrzeniem `.css`, w którym będzie zawarty nasz CSS-owy kod. Jest to najczęściej stosowana metoda i to właśnie z niej będziemy korzystać.

```html
<link href="tu wpisz ścieżkę do pliku css" rel="stylesheet">
```

Znacznik `<link>` znajduje się w części `<head>` naszego dokumentu HTML.

```html
<html lang="pl-PL">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Darmowe warsztaty z programowania HTML i CSS.">
    <title>The Awwwesomes – Darmowe warsztaty z programowania HTML & CSS</title>
    <!--poniżej załączony jest plik z arkuszami stylów, czyli plik CSS-->
    <link rel="stylesheet" href="styles/website.css">
  </head>
  <body>
```

> **Important::Ważne**
>
> Kolejność załączania plików CSS ma znaczenie. Może zdarzyć się sytuacja, że Waszym projekcie dołączać będziecie do strony więcej niż jeden plik CSS. Kiedy w obu z nich będą występować te same selektory, lecz zawierające różne właściwości, przeglądarka z pierwszeństwem potraktuje ten selektor, który został załączony jako ostatni. Zilustrujmy to przykładem. Do pliku `index.html` dołączone są następujące pliki css:
>
> ```html
> ```

\`\`\` > Jeśli w pliku \`style-1.css\` występuje deklaracja: >\`\`\`css h1 { color: red; } \`\`\` > A w pliku \`style-2.css\` >\`\`\`css h1 { color: green; } \`\`\` >to przeglądarka nada naszemu nagłówkowi kolor zielony, gdyż występuje on jako \*ostatni\*.

### Inne sposoby dołączania stylów

Poznaliśmy już dodawanie stylów poprzez dołączanie zewnętrznego pliku CSS. Kolejną metodą jest napisanie CSS-owych deklaracji między znacznikami `<style> </style>` w sekcji `<head>`. Jest to tzw. **arkusz osadzony** w dokumencie HTML.

Przykładowo

```html
<html lang="pl-PL">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Darmowe warsztaty z programowania HTML i CSS.">
    <title>The Awwwesomes – Darmowe warsztaty z programowania HTML & CSS</title>
    <!--poniżej załączony jest plik z arkuszami stylów, czyli plik CSS-->
    <style>
        p {
          color: #f14b5c;
          background-color: #FFE7EC;
          border: 2px solid #f14b5c;
        }
    </style>
  </head>
  <body>
    <p>To jest akapit o kolorze pomarańczowym na jasnoróżowym tle.</p>
  </body>
</html>
```

Trzecia metoda – _inline'owe_ dołączanie stylów, czyli _styl wpisany_ – jest raczej rzadko stosowana. Style wpisujemy po prostu w danym tagu.

```html
 <p style="color: #f14b5c;">Ten akapit jest ostylowany poprzez styl wpisany.</p>
```

Każdą kolejną właściwość dodajemy po średniku:

```html
<p style="color: #f14b5c; background-color: #FFE7EC;">Ten akapit jest ostylowany poprzez styl wpisany.</p>
```

> **Important::Ważne**
>
> Dlaczego styl wpisany, czyli połączenie tagu i właściowści CSS-owych, jest rzadko stosowane? Odseparowanie HTML-a od CSS-a zdecydowanie ułatwia życie np. przy późniejszych modyfikacjach kodu i uznane jest za bardziej elegancką metodę. Dlatego też starajmy się pisać style w oddzielnym pliku.

Zobaczyliśmy, jak wyglądają proste selektory i właściwości CSS, zatem pora na pierwsze ćwiczenie!

> **Exercise::Ćwiczenie 7**
>
> W tym ćwiczeniu nauczysz się jak poprawnie załączać plik CSS do Twojej strony.
>
> * Otwórz folder z projektem, zawierający podstawowy kod z poprzednich zajęć (patrz Ćwiczenie 6).
> * Stwórz pusty plik `style.css` i zapisz go do nowo utworzonego folderu `/styles`.
> * Podepnij nowo utworzony plik CSS do `index.html`. W tym celu zastosuj znacznik `<link href="ścieżka do Twojego pliku css" rel="stylesheet">` z odpowiednio uzupełnionymi atrybutami. Przy okazji przećwiczysz ścieżki względne.

> **Ważne!** Znacznik `<link>` dodawany jest pomiędzy znacznikami `<head>` i `</head>`, najlepiej po znacznikach `<meta>`.

Jak sprawdzić, czy plik CSS został poprawnie dołączony do strony? Najlepiej poprzez zweryfikowanie, czy zdefiniowane przez nas style prawidłowo się wyświetlają. Plik `style.css` jest pusty. Pora zatem na napisanie pierwszych CSS-owych deklaracji!

> **Exercise::Ćwiczenie 8**
>
> W tym ćwiczeniu postawisz swoje pierwsze CSS-owe kroki. Nareszcie Twój kod HTML nabierze życia i zmieni kolory! Gotowy?
>
> * Zacznijmy od stworzenia nowego folderu z `exercise-8` i pliku `index.html` zawartego w tym katalogu.
> * Stwórz szkielet strony na podstawie poniższego widoku, a następnie ostyluj go.

![](https://1380430778-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M94Erx1vcqVaMgRe_qr%2Fuploads%2FtFEwrTdmZZxrhwkz2whr%2Fskrinshot.png?alt=media\&token=17e71f33-d80f-4f81-9ccc-4116321cd078)
