Czym jest CSS ?

CSS (Cascading Style Sheets) – Kaskadowe arkusze stylów – język za pomocą, którego tworzymy arkusze styli, czyli reguły, określające wygląd elementów na stronie.

Box Model

Podstawowa znajomość modelu pudełkowego (box model), pozwoli nam lepiej, zaznajomić się z określaniem wyglądu, elementów na stronie.

Każdy element na stronie np. <div></div>, tworzony jest jako niewidoczne pudełko (box model).

Budowa modelu pudełkowego od środka elementu:

• Treść elementu – Wszystko to, co znajduje się pomiędzy znacznikiem otwierającym <div> i zamykającym </div>
• Padding – Każde pudełko ma obramowanie. Padding jest określeniem odległości treści elementu od obramowania.
  
• Obramowanie – Granica naszego pudełka.
  
• Margines – Określa, ile wolnej przestrzeni potrzebuje nasze pudełko, wokół obramowania.
  

Nie przejmuj się, jeżeli jeszcze żadnego z elementów modelu pudełkowego nie rozumiesz. Dokładną analizą, wraz z opisem każdego elementu, modelu pudełkowego zajmiemy się innym razem.

Na tym etapie zapamiętaj: każdy tag, tworzy nowe pudełko, któremu za pomocą reguł w CSS, możemy określić wygląd. Wszystkie przeglądarki posiadają już domyślne, takie same reguły dla elementów HTML. My jednak nauczymy się zmieniać domyślne ustawiania wyglądu elementów na stronie, tworząc własne reguły. By to zrobić, pierw musimy się nauczyć, jak takie reguły tworzyć i gdzie je umieszczać.

Tworzenie reguł w CSS

Arkusze styli CSS <style></style> , umieszczamy w znaczniku head strony i w nim zamieszczamy nasze reguły. Robot przeglądarki, czytający kod źródłowy strony, czyta ją linijka po linijce, od samej góry, do samego dołu dokumentu. Zapoznaje się, z regułami odnoszącymi się do elementów HTML strony i na tej podstawie wyświetla ją użytkownikowi.

Budowa reguły:

Selektor – Określa do jakich elementów HTML odnosi się dana reguła. W naszym przypadku selektorem jest element h1.

Blok deklaracji – Informuje przeglądarkę gdzie zaczynają i gdzie kończą się deklaracje, odnoszące się do danego selektora.

Deklaracja – Wskazuje, w jaki sposób należy wyświetlać element określony w selektorze. Więcej o budowie deklaracji, poniżej.

Budowa deklaracji:

Właściwość – Wskazuje konkretny aspekt wyglądu elementu (pudełka), który chcemy określić np. kolor, margines, padding albo obramowanie.

Wartość – Wskazuje konkretne ustawienia, które chcemy nadać wybranej właściwości np. chcemy, by cały tekst w elemencie (pudełku) był czerwony.

Uwagi:

• Oddzielamy właściwości od wartości dwukropkiem
• Kończymy deklarację średnikiem