Witaj w świecie CSS

Nauczymy się dzisiaj, jak sprawić, by ten tekst wyglądał świetnie.

Model Pudełkowy (Box Model)

Każdy element w HTML jest prostokątem. Zrozumienie marginesów i dopełnień to klucz do sukcesu.

Dlaczego CSS jest super?

Pozwala oddzielić treść (HTML) od wyglądu (CSS). To ułatwia pracę programisty.

Kaskadowość jest super!

Pozwala uzyskać podstawowe style .content-box i uzyskać nowe dla .special

Dodawanie CSS na stronę

Styl zapisany w języku CSS możemy dodać do strony na kilka sposobów. Style możemy dodawać bezpośrednio do elementu używając atrybutu style="". CSS możemy również zamieścić w specjalnie do tego przeznaczonym elemencie html <style>. Trzecim sposobem jest utworzenie oddzielnego pliku, w którym będziemy przetrzymywać wszystkie nasze reguły CSS.


<p style=""></p>

Do atrybutu style wstawiamy reguły CSS, bez selektora, ponieważ nadajemy ten styl tylko temu konkretnemu elementowi.


Spróbujmy dodać styl do elementu <p> stosując atrybut style. Powiedzmy, że chcemy, żeby tło elementu przybrało kolor żółty. W tym celu użyjemy poznanej przed chwilą reguły background-color oraz przypiszemy do niego wartość koloru żółtego, czyli yellow.


<p style="background-color: yellow;">Żółte Tło</p>

Wynik:

Żółte Tło


Zobaczmy jeszcze jak zmieni się nasz tekst, jeśli dodamy jeszcze jedną poznaną przez nas regułę CSS, mianowicie font.

<p style="background-color: yellow; font: 28px Arial;">Żółte Tło</p>

Wynik:

Żółte Tło

Źródło: how2html.pl