Wstęp do CSS'a

CSS (ang. Cascading Style Sheets - Kaskadowe Arkusze Stylów) jest językiem do opisu "formy prezentacji" (wyświetlania) strony WWW. Opis ten zawiera współrzędne, wielkości, kolory, obramowania, czcionki itd. elementów umieszczonych w kodzie HTML. Tak jak dla HTML'a tak i dla CSS'a próżno szukać alternatywy. CSS jest bardzo łatwy do nauki, jednak przy głębszym poznaniu potrafi zaskakiwać brakiem logiki w interpretacji go przez przeglądarki (stąd istnienie hacków CSS).

Przykładowy kod CSS:

	* { margin: 0; padding: 0; }

	body {
		font-family: lato;
		font-size: 1.1em;
		color: grey
	}

	#banner
	{
		margin: 0 auto;
		width: 1200px;
		height: 80px;
		border: none;
	}
  • Zacznijmy od pierwszej linii kodu "* { margin: 0; padding: 0; }" oznacza że "*" -> wszystkie znaczniki w dokumencie przyjmą parametr "margin" i "padding" ustawiony na wartość '0'. Co spowoduje, że wszystkie odstępy między elementami na stronie zostaną usunięte. (margin = margines, padding = dopełnienie, * = wszystko)

  • Kolejny zapisany wiersz kodu to "body {" mamy tu do czynienia z SELEKTOREM "body" i klamrą otwierającą "{" listę parametrów. Selektor określa jakie elementy zostaną zmodyfikowane przez ustawione potem parametry (zmiany zadziałają także na dzieciach tego elementu).

  • Następne trzy linijki kodu to parametry, są oddzielone między sobą średnikami. Ostatni ustawiony parametr w bloku nie wymaga zakończenia średnikiem. Parametry ustawiają kolejno czcionkę, wielkość czcionki na 1.1 domyślnej wielkości czcionki i kolor czcionki na szary.

  • Następny blok zawiera ustawienia 4 parametrów, jednak te ustawienia jak można domniemać dotyczą tylko jednego elementu na stronie. Użyty selektor "#banner" oznacza element na stronie o id=banner. Parametrami które ten blok ustawia są kolejno: margines: wyśrodkowanie w poziomie, szerokość: 1200 pikseli, wysokość: 80 pikseli, obramowanie: domyślne (brak).

Możemy zatem wyciągnąć kilka wniosków po strukturze dokumentu CSS:

  1. Struktura rozkazu języka CSS wygląda tak: selektor { parametr_1: wartość; parametr_2: wartość; parametr_n: wartość },
  2. Po ustawieniu każdego parametru należy go zakończyć średnikiem z wyjątkiem ostatniego parametru gdzie jest to opcjonalne (ale warto wstawić go też),
  3. Ustawienia parametrów selektora będącego wyżej w hierarchi struktury dokumentu HTML wpływają na wszystkie elementy zagnieżdżone w nim