Czym jest CSS?

Rozwinięciem skrótu CSS (ang.Cascading Style Sheets) są kaskadowe arkusze stylów. Słowo arkusz można traktować jako plik, w którym zapisujemy reguły formatowania, które przypisujemy do konkretnych elementów HTML poprzez znane nam selektory.
Reguły CSS to inaczej zbiory zasad służące do formatowania treści. Zbudowane są one z własnośc i (ang. property) oraz jej wartości(ang. value). zasada-css

Nazwa wartości musi być zawsze poprzedzona dwukropkiem : , a cała reguła zakończona średnikiem ; .
własność: wartość;
Jeśli nazwa własności jest kilkuczłonowa, zazwyczaj kolejne wyrazy oddzielane są myślnikiem -, tak jak background-color.

Metody podpinania CSS do HTML

Arkusz zewnętrzny

Zewnętrzny arkusz CSS dołączamy do dokumentu HTML znacznikiem znajdującym się w sekcji <head> podstrony (wartość atrybutu href musi wskazywać rzeczywisty, istniejący plik): Jest to najpopularniejszy sposób podpinania CSS.

Znaczniki <style> w sekcji head

Kod CSS można osadzić pomiędzy tagami <style></style>, koniecznie umieszczonymi wewnątrz sekcji : Jeśli już stosujemy tagi <style></style> to zazwyczaj w celu przesłonięcia w tym konkretnym dokumencie wybranych stylów z arkusza zewnętrznego (lub ewentualnie chcemy dodać style, których tam zabrakło).

Style inline (wewnątrz atrybutu znacznika)

Stylizowanie inline (ang. w linii), oznacza zapisanie CSS jako wartości atrybutu style wybranego tagu HTML, znajdującego się w sekcji :

Hierarchia ważności metod

Hierarchia ważności poszczególnych sposobów to: 3 > 2 > 1. Style inline przesłaniają te spomiędzy tagów <style>, zaś one przesłaniają właściwości zdefiniowane w zewnętrznym arkuszu (o ile podpięcie pliku tagiem znalazło się przed tagami <style>). Jest to logiczne - style inline występują węwnątrz tagów, stąd siłą rzeczy zawsze znajdą się poniżej sekcji <head> (tagi "siedzą" przecież w <body>). I dlatego style inline są najważniejsze w hierarchii - występują najpóźniej, a więc obowiązują.

Złamanie hierarchii

Możemy wymusić obowiązywanie jakiegoś stylu. Dokonujemy tego stosując po spacji (a przed średnikiem) klauzulę !important (ang. ważny):

Wymuszenie czerwonego tła

Selektory CSS

Reguły CSS nie zadziałają dopóki nie przypiszemy ich do określonych elementów html, które aktualnie chcemy sformatować. Za powiązanie reguł CSS z elementami języka Html odpowiedzialne są tzw. selektory (ang. selector od select – wybierać). Jest wiele sposobów tworzenia selektorów w języku CSS. Posłużą do tego m.in same elementy html oraz atrybuty id i class.
Zapis selektora będzie kompletny, gdy dodamy do niego nawiasy klamrowe {}. W nawiasach klamrowych będziemy dodawać reguły CSS.

Komentarze

Poznaliśmy w jaki sposób zakomentować zawartość w HTMl, w CSS równiez jest taka możliwość. Aby zakomentować treść w CSS musimy umieścić ją między znakami /* a */:

Podstawowe i najczęściej używane własności w CSS

Własności czcionki - font

font-family: określa rodzina czcionki;
font-size: rozmiar czcionki (np.45px, 50%);
font-style: styl czcionki (normal, italic, oblique);
font-weight: (normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900);
font-variant: przekształcanie tekstu na kapitalki(normal, small-caps);

Własności tła - background

background-color: kolor tła;
background-image: zdjęcie jako tło;
background-repeat: powtarzanie tła (repeat, repeat-x, repeat-y, no-repeat);
background-size; długość, procent, cover, contain;
background-position: x y, x% y%, left|center|right, top|center|bottom;

Własności obramowania - border

border-color: kolor obramowania;
border-collapse: kondensowanie obramowań komórek;
border-radius: zaokrąglenie obramowania;
border-spacing: odstępy między komórkami tabeli;
border-style: styl obramowania (solid,dotted);
border-width: grubość obramowania;
border: kolor styl grubość;

właściwości tekstu - text

text-align: wyrównanie tekstu ( left, right, center, justify);
text-decoration: dekoracja tekstu ( none, underline, overline, line-through, blink);
text-indent: wcięcie tekstu (długość w jednostkach lub procentach);
text-transform: transformacja tekstu;
text-shadow: cieniowanie tekstu;

Pozostałe właściwości

float: oblewanie (left,right,none)
word-spacing: odstęp między wyrazami;
vertical-align: pionowe wyrównanie (baseline, middle, top, bottom, text-top, text-bottom, super, sub, długość w jednostkach, procent);
visibility: widzialnośc elementów (visible, hidden, collapse);
right: odległość od prawej krawędzi;
left: odległość od lewej krawędzi;
position: pozycja elementu (static, relative, absolute, fixed);
overflow: wypływanie zawartości (visible, hidden, scroll, auto);
height: wysokość;
width: szerokość;
max-height,min-height: maksymalna, minimalna wysokość;
max-width,min-width: maksymalna, minimalna szerokość;
box-sizing: (content-box, border-box, padding-box);
clear: usuwa oblewanie(both, none, left, right);
display: okresla typ elementu(inline, block, none, inline-block, table, inline-table, list-item, flex, inline-flex, grid, inline-grid);

Margin a padding

Właściwość padding to odstęp nadawany wewnątrz elementu, zaś margin to jest odstęp nadawany na zewnątrz niego:

Istnieje wiele możliwości zapisu marginesu zewnętrznego jak i wewnętrznego, co bardzo nam upraszcza pisanie kodu:

Margines określony ze wszystkich stron taki sam:

Zapis podwójny: najpierw margines górny i dolny, potem lewy i prawy

Zapis potrójny: najpierw margines górny, potem lewy i prawy (ten sam), a na końcu podajemy wartość marginesu dolnego

Zapis poczwórny: margines górny, prawy, dolny, lewy (zgodnie z ruchem wskazówek zegara)

Margines z jednej, wybranej strony (subatrybuty left, right, top, bottom)

Sytuacja ma się dokładnie tak samo z paddingiem.

Jednostki w CSS

Jednostki względne (relatywne)

Względne jednostki długości stosujemy, gdy chcemy się odwołać do rozmiaru innego elementu (np. wysokości aktualnie używanej czcionki).

Jednostki względne czcionki:

em - wysokość aktualnej czcionki
ex - wysokośc litery 'x', czyli małej litery w aktualnej czcionce
ch - wysokość cyfry '0' w aktualnej czcionce
rem - wysokość czcionki elementu korzenia w drzewie dokumentu (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome); w języku HTML korzeniem jest zawsze element <html></html>

Jednostki procentowe obszaru wyświetlania

vw - procentowa szerokość obszaru wyświetlania (interpretuje Internet Explorer 9, Chrome)
vh - procentowa wysokość obszaru wyświetlania (interpretuje Internet Explorer 9, Chrome)
vmin - mniejsza z wartości vw lub vh (interpretuje Internet Explorer 10, Chrome)
vmax - większa z wartości vw lub vh

Jednostki bezwzględne (absolutne)

in - cale (1in = 2.54cm)
cm - centymetry
mm - milimetry
pt - punkty (1pt = 1/72in) - często używane przy definiowaniu rozmiaru czcionki w edytorach tekstu
pc - pika (1pc = 12pt)
px - piksele (1px = 1/96in)

Dla ułatwiania poniższa tabela do podsumowania:

Jednostki względne
5 em	wysokość czcionki
5ex	wysokość małej litery
5ch	szerokość cyfry '0'
5rem	wysokość czcionki korzenia
5vw	5% szerokośći okna
5vh	5% wysokości okna
5vmin	5% minimalnej szer/wys okna
5vamx	5% maksymalner szer/wys okna
Jednostki bezwzględne
5in	cale
5cm	centymetry
10mm	milimetry
30pt	punkty
3pc	pika
50px	piksele

Wartośći procentowe

Format wartości procentowej składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz znaku procentu ("%"). Należy pamiętać, że nie każdy parametr może przyjąć wartość ujemną! Wartość procentowa jest zawsze określana względem innej wartości np. długości. Każda właściwość która pozwala podać wartość procentową, definiuje także do czego się ona odnosi. Może ona dotyczyć innej właściwości tego samego elementu, przodka (wyżej w hierarchii drzewa dokumentu) lub wartości kontekstu formatowania (np. szerokość obejmującego bloku).