Czym się różni HTML od CSSa?

Wielu z Was spyta jak można w ogóle postawić takie pytanie. A jednak sporo osób pracujących w internetach, np. w sprzedaży, takiej wiedzy nie posiada. Dlatego też postanowiłem, że wybawię te osoby z opresji i w bardzo skrótowy sposób opiszę, do czego służą te podstawowe dla biznesu internetowego technologie i czym się od siebie różnią.

POZIOM TRUDNOŚCI:

Do czego stosujemy HTML’a?

HTML (nie będę rozwijał skrótu, żeby nie zniechęcić Was od samego początku) to absolutna podstawa dzisiejszego świata WWW. Można go porównać do cegieł, czy pustaków na budowie. Bez HTML’a nie jesteśmy w stanie zbudować struktury serwisu. Co rozumiemy przez strukturę?

Na przykład to, że na serwisie znajduje się nawigacja (menu). Pod nawigacją często mamy tzw. kontenery na treść (jeden na środku, drugi z prawej). Pod kontenerami często umieszcza się stopkę. Zerknij na poniższą grafikę i załapiesz, co mam na myśli.

Jak budujemy strukturę? Za pomocą znaczników HTML’owych. Znanym przykładem znacznika HTML’owego jest np. słynne <h1>, które służy do oznaczania fragmentu tekstu na stronie WWW jako głównego nagłówka. Poniższa grafika ilustruje wykorzystanie takiego znacznika w kodzie oraz “na froncie”, czyli w widoku dostępnym dla nas, użytkowników.

Zostawmy na tym etapie temat HTML’a, żeby bardziej nie komplikować. Ten artykuł ma na celu wytłumaczenie podstawowej różnicy między HTML’em, a CSS’em. Więcej o samym HTML’u możecie przeczytać w osobnym artykule pt. “Co powinienem wiedzieć o HTML’u”.

Jak do HTML’a ma się CSS?

CSS to język, który pozwala nam zabrać się za te brzydkie ceglane ściany, które zbudowaliśmy HTML’em i pokolorować je na jakiś fajny kolor. Komendy, których możemy używać nie ograniczają się oczywiście tylko do kolorowania. CSS’em możemy np. ustalać wielkość elementów (szerokość, wysokość), ich położenie (przesuwać je względem siebie) czy rysować wokół nich obramowania. Dlatego w tym miejscu przestaniemy się posługiwać analogią do budownictwa :) No bo cegieł nie możemy zmniejszać już PO zbudowaniu domu :P

No dobrze, ale jedźmy z konkretnym przykładem. Załóżmy, że mamy nasz nagłówek <h1>, który zawiera w sobie jakiś tekst.

<h1> To jest tytuł mojego artykułu </h1>

Za pomocą CSS’a możemy powiększyć rozmiar liter, zmienić czcionkę, przechylić ją, pogrubić, czy nawet ukryć cały napis. Nie dziwi więc fakt, że CSS jest językiem popularnym wśród grafików. Jego znajomość pozwala im się lepiej komunikować z webmasterami, na których to najczęściej spoczywa zadanie przeniesienia wizji grafika na ekrany naszych komputerów.