• 
  Zaczynamy kurs CSS!

  Czy projektowanie wyglądu stron internetowych naprawdę jest tak trudne, jak mówią?

• 
  Edytory CSS

  Który edytor CSS wybrać: TopStyle Lite, Balthisar Cascade, Cascade DTP?

• 
  Wstawienie arkusza stylów CSS <link "stylesheet">

  Jak wygląda typowy sposób dołączania arkusza CSS?

• 
  Arkusz stylów CSS

  Jak wygląda typowy arkusz CSS?

• 
  Kolor tła oraz tekstu CSS {background-color, color}

  W jaki sposób zmienić kolor tła oraz kolor tekstu na stronie WWW?

• 
  Czcionka CSS {font-size, font-family}

  W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

• 
  Marginesy strony CSS {margin, margin-top, margin-bottom, margin-left, margin-right}

  Jak ustawić marginesy strony WWW? Czy da się określić marginesy niesymetryczne?

• 
  Tapeta CSS {background-color, background-image, color}

  Jak ustawić tapetę graficzną w tle strony internetowej? W jaki sposób stworzyć tło w postaci zeszytu w kratkę, w linie albo ukośnej siatki?

• 
  Wyrównanie tekstu CSS {text-align}

  W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

• 
  Kolor odsyłaczy CSS {color} :hover

  Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

• 
  Klasy selektorów CSS <div class>

  W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania?

• 
  Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}

  Jak ująć tekst w ramkę w postaci obramowania z zaokrąglonymi narożnikami i tłem?

• 
  Podsumowanie

  CSS

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

Zapewne znasz już podstawy języka HTML - jeśli nie, zapraszam najpierw do lektury rozdziału: HTML dla zielonych.

Skoro nadal czytasz, zapewne oznacza to, że potrafisz stworzyć przynajmniej prostą stronę internetową zawierającą tekst, obrazki i odsyłacze. Chociaż treść jest najważniejszym elementem każdej strony WWW, to przecież wygląd też się liczy. I właśnie do tego służy język CSS (Kaskadowe Arkusze Stylów). Zapamiętaj prostą zasadę: treść wraz ze znacznikami wprowadza się na stronę internetową za pomocą języka HTML, a następnie dzięki CSS można zmienić jej wygląd. Dlatego właśnie znajomość obu tych języków - HTML i CSS - jest kluczowa, aby zbudować profesjonalną stronę WWW. Jeśli jeszcze nie masz pewności, czy warto się uczyć języka CSS, zobacz rozdział: Dlaczego warto używać CSS?.

Jeśli język CSS jest dla Ciebie "czarną magią" i wydaje Ci się, że arkusz CSS (miejsce gdzie określa się wygląd strony) jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się mylisz. Zaprojektowanie wyglądu strony internetowej jest prostsze niż Ci się wydaje. Zatem nie trać już czasu na wymówki typu: Ja się niczego nie nauczę! i tym podobne, bo to nieprawda. Zacznij już lepiej czytać.

Mam tylko jedną prośbę: postaraj się przeczytać w miarę uważnie i po kolei całą treść na tej stronie. Jeśli pominiesz jakiś punkt lub przeczytasz go zbyt pobieżnie, może to spowodować, że nie zrozumiesz następnych.

Style CSS można oczywiście pisać ręcznie, ponieważ jest to zwykły tekst - tak jak w przypadku samego HTML. Lecz stosowanie specjalnych edytorów przyspiesza i ułatwia nam pracę oraz zmniejsza ryzyko popełnienia błędów. Pozwalają automatycznie zdefiniować np. wielkość i kolor czcionki, kolor odsyłaczy czy tła (za pomocą specjalnych generatorów). Kolorowanie składni sprawia, że natychmiast odnajdziemy wszystkie błędy.

Kreatory stylów (ang. wizards) są najczęściej wbudowane w edytory HTML. Zwykle wybór tego samego edytora do tworzenia dokumentów HTML i arkuszy CSS jest dobrym pomysłem. Jednak jeśli chcesz, możesz również korzystać z dedykowanego edytora do tworzenia stylów CSS - np.:

• TopStyle Lite (darmowy)
• Balthisar Cascade (darmowy)
• Cascade DTP (darmowy)

W zasadzie aby rozpocząć przygodę z językiem CSS, wystarczy wstawić w nagłówku strony - tzn. w dowolnym miejscu pomiędzy znacznikami <head> oraz </head> - jedną dodatkową linijkę:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="Tu wpisz opis zawartości strony">
	<title>Tu wpisz tytuł strony</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

Tu wpisuje się treść strony

</body>
</html>

Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie jest to plik pod nazwą "style.css", który znajduje się w tym samym katalogu co dokument *.html. Można go oczywiście zapisać w innej lokalizacji - wtedy zamiast "style.css" trzeba podać pełną ścieżkę dostępu (tworzy się ją w analogiczny sposób, jak przy wstawianiu obrazka).

Warto podkreślić, że jeśli Twoja strona WWW składa się z wielu podstron, na każdej z nich możesz dołączyć ten sam plik arkusza stylów. Dzięki temu zmiany wykonane tylko w jednym miejscu - czyli w pliku arkusza stylów - wpłyną na wygląd od razu wszystkich podstron Twojego serwisu. Czyż to nie jest piękne? Już nigdy więcej nie będzie Cię czekać żmudne przerabianie każdej podstrony tylko po to, aby zmienić na niej np. kolor albo rozmiar tekstu :-)

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości wstawiania stylów CSS na stronach internetowych, zobacz rozdział: Wstawianie stylów.

Arkusz stylów jest zwykłym dokumentem tekstowym, więc do jego stworzenia możesz użyć Twojego ulubionego edytora HTML albo, jeśli wolisz, dedykowanego edytora CSS. W pliku tym wpisuje się listę tzw. reguł stylów, za pomocą których możliwe jest określanie wyglądu elementów na stronie. Każda reguła stylów składa się zawsze z dwóch następujących bezpośrednio po sobie części:

1. Selektora - czyli elementu (znacznika) na stronie, któremu chcemy zmienić wygląd
2. Deklaracji ujętej w nawiasy klamrowe, w której określa się, w jaki sposób chcemy zmienić wygląd

selektor1 {
	Tu wpisuje się deklaracje stylów
}

selektor2 {
	Tu wpisuje się deklaracje stylów
}

selektor3 {
	Tu wpisuje się deklaracje stylów
}

Oczywiście możliwe jest wstawienie więcej niż trzech reguł stylów w jednym arkuszu - każda odpowiada za zmianę wyglądu elementu na stronie opisanego selektorem. O tym jak tworzyć selektory i co można wpisać w deklaracji stylów dowiesz się już w kolejnych punktach tego rozdziału. Zapraszam do dalszej lektury.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu arkuszy stylów na stronach internetowych, zobacz rozdziały: Wewnętrzny arkusz stylów, Zewnętrzny arkusz stylów.

Aby zmienić wygląd jakiegoś elementu na stronie, trzeba go najpierw wskazać. W języku CSS robi się to za pomocą tzw. selektora. W najprostszym przypadku jest to nazwa wybranego znacznika, który wcześniej wstawiliśmy do naszego dokumentu HTML. Wszystko co znajduje się wewnątrz tak wskazanego znacznika - czyli zarówno tekst, jak i inne znaczniki - otrzyma style podane w deklaracji. Przykładowo, aby zmienić kolor tła oraz teksu na całej stronie, możemy się posłużyć selektorem body, ponieważ właśnie wewnątrz znacznika <body>...</body> znajduje się cała zawartość strony. Zatem w arkuszu stylów wystarczy umieścić następujący kod:

body {
	background-color: black;
	color: white;
}

Zwróć uwagę, że deklaracja stylów, którą ujmuje się w nawiasy klamrowe, składa się tutaj z dwóch linijek. Każda z nich rozpoczyna się od podania tzw. cechy (inaczej własności), po której następuje wartość. Cecha określa, co chcemy zmienić w wyglądzie wybranego elementu, natomiast wartość - w jaki sposób ma się to zmienić. Zatem gdyby przetłumaczyć powyższą regułę stylów na bardziej zrozumiały język, brzmiałaby ona mniej więcej tak: dla całej zawartości znacznika body (selektor) zmień kolor tła (cecha background-color) na czarny (wartość black) i kolor tekstu (cecha color) na biały (wartość white).

Pamiętaj, aby po wpisaniu cechy (własności) zawsze postawić znak dwukropka, a po każdej wartości - średnik. Zwróć również uwagę, że jeśli cecha (bądź wartość) zawiera znak myślnika (np. background-color), to przed nim ani po nim nie może znajdować się spacja.

Aby ustalić inny kolor tła albo tekstu, wystarczy że w miejsce wartości wstawisz wybraną definicję koloru - zobacz: Wykaz kolorów.

Kolor tła oraz tekstu całej strony powinniśmy ustalać zawsze jednocześnie.

Podobnie jak w przypadku koloru tła oraz tekstu dobrze jest również ustalić rozmiar i krój czcionki na całej stronie.

body {
	font-size: rozmiar;
	font-family: rodzaj;
}

Z definiowaniem kroju czcionki wiąże się pewien problem. Jeśli użytkownik oglądający Twoją stronę nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w systemie Windows najprawdopodobniej będzie to 'Times New Roman', chociaż to też nie jest pewne). Właśnie z tego powodu możliwe jest podanie po przecinku listy rodzajów czcionek, z których zostanie użyta ta, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Dodatkowo na końcu listy można podać specjalną nazwę czcionki, która istnieje w każdym systemie operacyjnym - tzw. rodzinę ogólną. Pozwala ona określić krój czcionki, który wyglądem będzie przynajmniej przypominał efekt, który chcemy uzyskać - np.: sans-serif (podobna do: Arial, Helvetica, Verdana, Tahoma, 'Trebuchet MS'), serif (podobna do: 'Times New Roman', Georgia), monospace (podobna do: 'Courier New'). Na przykład:

body {
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
}

W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane były: Verdana, Tahoma, 'Trebuchet MS', Georgia - dlatego nawet dzisiaj wciąż są powszechnie dostępne. Przy definiowaniu czcionki dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu czcionek na stronach internetowych, zobacz rozdziały: Czcionki / Wielkość, Czcionki / Rodzaj.

Przeglądarki zwykle ustalają pewną szerokość marginesów strony. Nie zawsze jednak domyślne ustawienia będą dobrze współgrać np. z określonym przez nas rozmiarem czcionki. Na szczęście bardzo łatwo można to zmienić:

body {
	margin: szerokość;
}

albo jeśli chcemy ustawić marginesy niesymetryczne (z każdej strony inne):

body {
	margin-top: górny;
	margin-bottom: dolny;
	margin-left: lewy;
	margin-right: prawy;
}

Aby określić szerokość marginesu w pikselach, należy wpisać liczbę, a po niej jednostkę px. Na przykład:

body {
	margin: 20px;
}

Inaczej niż w zasadach pisowni języka polskiego, w CSS nie można rozdzielać spacją liczby od jednostki.

Tapety graficzne umieszczone w tle są chętnie używanym elementem w każdym systemie operacyjnym. Podobne rozwiązanie można zastosować również na stronie internetowej.

Najprostszym rodzajem tapety jest powielany wzorek w postaci kafelków. Przypomina on płytki położone na podłodze czy na ścianach w łazience - zakładając, że wzór na każdej płytce jest identyczny. Niewątpliwą zaletą tego typu tapety jest fakt, że można nią pokryć dowolnie dużą powierzchnię. Jest to o tyle ważne, że nie wiemy z góry, jak dużym ekranem będzie dysponował użytkownik oglądający naszą stronę WWW. Przy tym pojedynczy kafelek ze wzorkiem może mieć małe wymiary, dzięki czemu strona będzie się ładować szybciej.

Kiedy mamy już przygotowaną grafikę pojedynczego kafelka tapety, wstawienie go w tle strony jest bardzo proste. Wystarczy w arkuszu stylów dodać następującą regułę stylów:

body {
	background-color: kolor tła;
	background-image: url(ścieżka dostępu do obrazka);
	color: kolor tekstu;
}

Tło obrazkowe strony (tapeta) zawsze powinniśmy ustalać jednocześnie z kolorem tła oraz tekstu całej strony.

Ponadto należy zadbać o odpowiedni kontrast pomiędzy tłem a kolorem tekstu, ponieważ w przeciwnym razie treść strony może się stać zupełnie nieczytelna. W praktyce oznacza to, że tapeta nie powinna być zbyt pstrokata ani zbyt jaskrawa, aby nie rozpraszała czytelnika.

Warto zauważyć, że można zaprojektować wzór tapety w taki sposób, żeby granice pomiędzy sąsiednimi kafelkami nie były widoczne, tzn. płynnie przechodziły jeden w drugi na kształt fantazyjnego dywanu lub wzorzystej tkaniny. W tym celu wystarczy zapewnić, aby wszystkie krawędzie wzorku z lewej strony kafelka znajdowały się na tej samej wysokości co po prawej stronie. Analogicznie należy postąpić dla górnej i dolnej krawędzi. Przykładowo, aby stworzyć efekt zeszytu w kratkę, wystarczy przygotować kwadratową grafikę z przecinającymi się liniami w formie krzyżyka. Kafelek nie zawsze jednak musi być kwadratowy. Dla uzyskania efektu zeszytu w linie wystarczy przygotować grafikę o wysokości odzwierciedlającej rozstaw linii, ale szerokości tylko jednego piksela. Proponuję poeksperymentować w dowolnym programie graficznym z różnymi wzorkami - to może być naprawdę dobra zabawa :-)

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu tła obrazkowego na stronach internetowych, zobacz rozdział: Tło obrazkowe.

Przykład {background, color}

Poniżej znajdują się przykłady różnych grafik kafelków (aby były lepiej widoczne zostały powiększone i obramowane na czerwono) wraz z odpowiadającymi im tapetami.

Zeszyt w kratkę

Zeszyt w linie

Ukośna siatka

Tekst na stronie internetowej najlepiej jest wpisywać w akapitach. Dzięki temu będzie on bardziej czytelny dla użytkownika. W pojedynczym dokumencie HTML może się znajdować wiele oddzielnych akapitów. Co zrobić, aby tekst w każdym z nich był ułożony tak samo? Dzięki możliwościom jakie dają style CSS, nie musimy tego robić dla każdego akapitu osobno. Wystarczy że w arkuszu CSS wpiszemy następującą regułę stylów:

p {
	text-align: wyrównanie;
}

a {
	color: kolor;
}

a:hover {
	color: podświetlenie;
}

Zwróć uwagę, że koloru podświetlenia nie da się podać w inny sposób, niż przy pomocy języka CSS. A jest to bardzo przydatna możliwość. W ten sposób po wskazaniu elementu myszą użytkownik od razu widzi, że jest to element interaktywny, który można kliknąć, aby przejść pod podany adres.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości nadawania wyglądu odsyłaczom na stronach internetowych, zobacz rozdziały: Odsyłacz podstawowy, Odsyłacz odwiedzony, Aktywacja, Wskazanie myszką.

Niemal na każdej stronie WWW znajdują się pewne powtarzające się elementy. Może to być np. menu nawigacyjne, nagłówek czy stopka serwisu. W jaki sposób ustalać im wygląd? Do tej pory jako selektorów używaliśmy nazw znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów.

Załóżmy, że mamy na stronie menu nawigacyjne, któremu chcemy zmienić kolor tła oraz tekstu. W tym celu najpierw w dokumencie HTML obejmujemy całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class:

<div class="menu-nawigacyjne">...</div>

Następnie w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki:

.menu-nawigacyjne {
	background-color: gray;
	color: silver;
}

Zwróć uwagę, że w kodzie HTML wartość atrybutu class nie zawiera znaku kropki - trzeba ją dodać tylko w arkuszu stylów. Należy jednak pamiętać, że pomiędzy znakiem kropki a nazwą klasy w selektorze nie może być żadnych białych znaków - nawet spacji. W samej nazwie klasy najlepiej używać wyłącznie małych liter bez polskich znaków diakrytycznych. Nazwa klasy nie może również zawierać spacji - zamiast niej możesz użyć np. znaku myślnika.

Co ważne, nawet jeśli ustaliliśmy kolor tła oraz tekstu na całej stronie, menu nawigacyjne nadal może mieć swoje własne kolory. Deklaracje wyglądu przypisane do klasy są ważniejsze niż te przypisane do znacznika.

Możemy nawet określić oddzielny kolor odsyłaczy, które znajdują się w menu. Robi się to poprzedzając w selektorze właściwe znaczniki nazwą klasy. W tym przypadku spacja pomiędzy nazwą klasy a nazwą znacznika odsyłacza jest konieczna.

.menu-nawigacyjne a {
	color: black;
}

.menu-nawigacyjne a:hover {
	color: white;
}

Dzięki temu prostemu wpisowi w arkuszu stylów, za każdym razem kiedy na dowolnej podstronie serwisu umieścimy następujący kod:

<div class="menu-nawigacyjne">
	<a href="...">...</a>
	<a href="...">...</a>
	<a href="...">...</a>
</div>

w przeglądarce internetowej wyświetli się bloczek, w którym każdy odsyłacz będzie miał kolor czarny (black), a po wskazaniu go myszą zmieni się na biały (white).

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości tworzenia klas CSS na stronach internetowych, zobacz rozdziały: Klasy selektorów, Selektor potomka.

Praktycznym zastosowaniem klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów:

.nazwa-klasy {
	deklaracje stylów
}

by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie:

<div class="nazwa-klasy">dowolny tekst...</div>

Wygląd ramki w którą zostanie ujęty tekst, można określić za pomocą wielu cech (własności) wchodzących w skład deklaracji stylów.

Kolor tła ramki

.nazwa-klasy {
	background-color: kolor tła;
}

Marginesy wewnątrz ramki

.nazwa-klasy {
	padding: szerokość;
}

.nazwa-klasy {
	padding-top: górny;
	padding-bottom: dolny;
	padding-left: lewy;
	padding-right: prawy;
}

Obramowanie

.nazwa-klasy {
	border-width: grubość;
	border-style: styl;
	border-color: kolor;
}

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu obramowania na stronach internetowych, zobacz rozdziały: Styl obramowania, Szerokość obramowania, Kolor obramowania.

Zaokrąglone narożniki

.nazwa-klasy {
	border-radius: promień;
}

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu zaokrąglenia obramowania na stronach internetowych, zobacz rozdział: Zaokrąglenie obramowania.

Przykład {background-color, padding, border-width, border-style, border-color, border-radius}

Wszystkie powyższe deklaracje można ze sobą dowolnie łączyć. Na przykład jeśli w arkuszu stylów umieścimy następującą definicję klasy:

.ramka {
	background-color: silver;
	padding: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: gray;
	border-radius: 5px;
}

a następnie w dowolnym dokumencie HTML wstawimy taki kod:

<div class="ramka">To jest przykład ramki z tekstem...</div>

to na stronie otrzymamy:

Możemy również zrezygnować z obramowania i zaokrąglonych narożników:

albo dodać tylko obramowanie z marginesami wewnątrz, ale bez tła:

Oczywiście na jednej stronie możemy używać jednocześnie kilku różnie wyglądających ramek z tekstem. W tym celu wystarczy w arkuszu stylów zdefiniować każda klasę z inną nazwą.

To by było na tyle. Poznane tu polecenia powinny pozwolić Ci nie tylko na napisanie prostej strony WWW, ale zarazem określenie jej wyglądu w profesjonalny sposób. W dalszych rozdziałach Kursu CSS poznasz m.in. bardziej zaawansowane techniki tworzenia selektorów oraz rozbudowaną listę własności, dzięki którym zyskasz jeszcze większe możliwości stylizacji elementów Twojego serwisu.
Zapraszam...

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak wygląda typowy arkusz CSS?

selektor1 {
	Tu wpisuje się deklaracje stylów
}

selektor2 {
	Tu wpisuje się deklaracje stylów
}

selektor3 {
	Tu wpisuje się deklaracje stylów
}

Zobacz więcej...

W jaki sposób zmienić wielkość i rodzaj czcionki na stronie WWW?

body {
	font-size: rozmiar;
	font-family: rodzaj;
}

Zobacz więcej...

Jak ustawić marginesy strony WWW? Czy da się określić marginesy niesymetryczne?

body {
	margin: szerokość;
}

body {
	margin-top: górny;
	margin-bottom: dolny;
	margin-left: lewy;
	margin-right: prawy;
}

Zobacz więcej...

Jak ustawić tapetę graficzną w tle strony internetowej? W jaki sposób stworzyć tło w postaci zeszytu w kratkę, w linie albo ukośnej siatki?

body {
	background-color: kolor tła;
	background-image: url(ścieżka dostępu do obrazka);
	color: kolor tekstu;
}

Zobacz więcej...

W jaki sposób układać tekst na ekranie? Jak wyśrodkować lub wyjustować tekst?

p {
	text-align: wyrównanie;
}

Zobacz więcej...

Jak zmienić kolor odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)? Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?

a {
	color: kolor;
}

a:hover {
	color: podświetlenie;
}

Zobacz więcej...

Jak ująć tekst w ramkę w postaci obramowania z zaokrąglonymi narożnikami i tłem?

.nazwa-klasy {
	deklaracje stylów
}

.nazwa-klasy {
	background-color: kolor tła;
}

.nazwa-klasy {
	padding: szerokość;
}

.nazwa-klasy {
	padding-top: górny;
	padding-bottom: dolny;
	padding-left: lewy;
	padding-right: prawy;
}

.nazwa-klasy {
	border-width: grubość;
	border-style: styl;
	border-color: kolor;
}

.nazwa-klasy {
	border-radius: promień;
}

Zobacz więcej...