Przykłady CSS

W tym rozdziale znajdziesz wykaz wszystkich przykładów kodu źródłowego, które znajdują się w kategorii CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

CSS dla zielonych

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

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

Zobacz więcej...

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

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

Zobacz więcej...

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

body {
	margin: 20px;
}

Zobacz więcej...

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?

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

.menu-nawigacyjne a {
	color: black;
}

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

Zobacz więcej...

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

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

Zobacz więcej...

Wstawianie stylów CSS

Jak osadzić arkusz stylów CSS bezpośrednio w dokumencie?

/* Ten tekst zostanie zignorowany przez przeglądarkę,
ale może zawierać informacje cenne dla projektanta arkusza CSS */

Zobacz więcej...

Jak dołączyć arkusz stylów CSS z zewnętrznego pliku?

/* SELEKTORY: */
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #003868;
	background-color: #80B8E8;
	margin: 6mm;
}

p {
	text-align: justify;
}

pre, code {
	font-size: 8pt;
}

Zobacz więcej...

Co to jest kaskadowość stylów CSS? W jaki sposób złamać zasadę kaskadowości?

h6 { color: blue !important; background-color: green }

Zobacz więcej...

Dziedziczenie stylów CSS

W jaki sposób wymusić przywrócenie dziedziczenia stylów CSS?

p { color: green; }
p b { color: white; background-color: blue; }
p i b { color: inherit; background-color: inherit; }

Zobacz więcej...

Jak odwołać formatowanie wcześniej przypisane do elementu na stronie?

p { color: green; }
p b { color: white; background-color: blue; border-color: red; border-style: solid; }
p i b { color: unset; background-color: unset; border-color: unset; }

Zobacz więcej...

Jak przywrócić pierwotny wygląd wybranemu elementowi na stronie?

p { color: green; }
p b { color: white; background-color: blue; font-weight: normal; }
p i b { color: revert; background-color: revert; font-weight: revert; }

Zobacz więcej...

Selektory elementów CSS

Co to są reguły stylów CSS? Z czego składa się deklaracja stylu i czym różni się od reguły?

/* Pierwsza reguła: */
p { color: red }
/* Druga reguła: */
p b { color: red; background-color: yellow }

Zobacz więcej...

Jak utworzyć selektor typu - podstawowy rodzaj selektora CSS?

h6 { color: red }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikom potomków znajdującym się wewnątrz innego elementu - przodka?

p b { color: red }

p i b  { color: red }

ol ul { color: red }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikowi dziecka znajdującemu się bezpośrednio wewnątrz elementu rodzica?

p > b { color: red }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikowi znajdującemu się bezpośrednio po innym elemencie - bracie?

i + b { color: red }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikom znajdującym się w dowolnym miejscu po innym elemencie - bracie?

i ~ b { color: red }

Zobacz więcej...

W jaki sposób za jednym razem przypisać formatowanie różnym selektorom CSS?

b, i { color: red }

b { color: red }
i { color: red }

Zobacz więcej...

Selektory atrybutów CSS

W jaki sposób określić formatowanie elementu, który posiada określony atrybut?

p[title] { color: red }

p[title][lang] { color: red }

Zobacz więcej...

W jaki sposób określić formatowanie elementu, który posiada określony atrybut o odpowiedniej wartości?

p[title="To jest akapit"] { color: red }

p[title="To jest akapit"][lang="pl"] { color: red }

input[type="text"] { border: 1px solid black }

Zobacz więcej...

W jaki sposób określić formatowanie elementu, który posiada określony atrybut zawierający podany wyraz?

p[title~="jest"] { color: red }

p[title~="jest"][lang~="pl"] { color: red }

p[title~="jest"][title~="akapit"] { color: red }

Zobacz więcej...

Jak zmienić wygląd elementów, które mają podane atrybuty z określonymi łącznikami, np. "en-US"?

p[title|="to"] { color: red }

Zobacz więcej...

W jaki sposób zmienić wygląd elementu, który posiada atrybut o wartości rozpoczętej podanym tekstem?

p[title^="to"] { color: red }

Zobacz więcej...

W jaki sposób zmienić wygląd elementu, który posiada atrybut o wartości zakończonej podanym tekstem?

p[title$="akapit"] { color: red }

Zobacz więcej...

W jaki sposób określić formatowanie elementu, który posiada określony atrybut zawierający podany tekst?

p[title*="jest aka"] { color: red }

Zobacz więcej...

Jak połączyć kilka selektorów atrybutów w jednej regule stylów CSS?

p[class][dir="ltr"][title~="akapit"][lang|="pl"] { color: red }

Zobacz więcej...

Selektory specjalne CSS

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? Jak przypisać kilka klas CSS do jednego elementu? Co to są podzbiory klas CSS?

p.przyklad_klasa { color: red }

*.przyklad_uniwersalna { color: red }

.przyklad_uniwersalna { color: red }

Zobacz więcej...

W jaki sposób określić specjalny wygląd pojedynczego elementu na stronie WWW?

p#przyklad_identyfikator { color: red }

*#przyklad_uniwersalny { color: red }

#przyklad_uniwersalny { color: red }

Zobacz więcej...

Selektory pseudoelementów CSS

W jaki sposób zmienić wygląd pierwszej linii tekstu?

p:first-line { color: red }

Zobacz więcej...

W jaki sposób zmienić wygląd pierwszej litery tekstu?

p:first-letter { color: red }

p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left }

Zobacz więcej...

W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?

p:before { content: "POCZĄTEK "; color: red }

p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red }

p:before { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }

Zobacz więcej...

W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?

p:after { content: " KONIEC"; color: red }

p:after { content: " KONIEC " url(obrazek.gif); color: red }

p:after { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }

Zobacz więcej...

W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?

q { quotes: '"' '"' "'" "'" }

q:before { content: open-quote }
q:after { content: close-quote }

q:lang(pl) { quotes: "\201E" "\201D" "\00BB" "\00AB" }
q:before { content: open-quote }
q:after { content: close-quote }

q:lang(pl) { quotes: "\201E" "\201D" "\201A" "\2019" }
q:before { content: open-quote }
q:after { content: close-quote }

blockquote p { quotes: "\201E" "\201D" }
blockquote p:before  { content: open-quote }
blockquote p:after { content: no-close-quote }
blockquote p.last:after { content: close-quote }

Zobacz więcej...

Selektory pseudoklas CSS

Jak zmienić wygląd pola tekstowego formularza po wybraniu przez użytkownika?

textarea:focus { color: white; background-color: black }

Zobacz więcej...

W jaki sposób zmienić wygląd elementów, zawierających tekst w wybranym języku?

/* Ta reguła zostanie zastosowana: */
p:lang(pl) { color: red }
/* Ta reguła nie zostanie zastosowana: */
p[lang|="pl"] { color: blue }

p:lang(en) { color: red }
div:lang(en) { border: 1px solid red }

Zobacz więcej...

Jak zmienić wygląd pierwszego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

b:first-child { color: red }

p > b:first-child { color: red }

p:first-child b { color: red }

Zobacz więcej...

Jak zmienić wygląd ostatniego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?

b:last-child { color: red }

Zobacz więcej...

Jak zmienić wygląd elementu dziecka, który nie ma braci?

b:only-child { color: red }

Zobacz więcej...

W jaki sposób zmienić wygląd tylko pierwszego elementu określonego typu?

dl > dd:first-of-type { font-weight: bold } /* wytłuszczenie */
dl > dt:last-of-type { font-style: italic } /* kursywa */
dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */

Zobacz więcej...

Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?

:target { font-weight: bold }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane (wyszarzone)?

input:disabled { border: 1px solid blue }
input:enabled { border: 1px solid red }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane do zapisu?

input:read-only { border: 1px solid blue }
input:read-write { border: 1px solid red }

Zobacz więcej...

Jak zmienić wygląd pól (kontrolek) formularza, które są zaznaczone?

input:checked, option:checked { margin-left: 30px }

Zobacz więcej...

Jak zmienić wygląd domyślnego przycisku formularza lub domyślnej opcji do wyboru?

input:default, option:default, button:default { margin-left: 30px }

Zobacz więcej...

W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?

p:empty { background-color: red; width: 100%; height: 1em }

img:empty { border: 1px solid red }

Zobacz więcej...

W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?

:root p { color: red }

Zobacz więcej...

Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?

tbody > tr:nth-child(odd) { color: white; background-color: gray } /* biały na szarym */
tbody > tr:nth-child(even) { color: gray; background-color: white } /* szary na białym */

tbody > tr:nth-child(3n+1) { color: yellow; background-color: red } /* żółty na czerwonym */
tbody > tr:nth-child(3n+2) { color: maroon; background-color: orange } /* kasztanowy na pomarańczowym */
tbody > tr:nth-child(3n+3) { color: red; background-color: yellow } /* czerwony na żółtym */

tbody > tr:nth-child(2n+3) { color: white; background-color: gray }

tbody > tr:nth-child(3n-1) { color: white; background-color: gray }

tbody > tr:nth-child(-2n+4) { color: white; background-color: gray }

tbody > tr:nth-child(3) { color: white; background-color: gray }

dl > dd:nth-of-type(odd) { font-weight: bold }

tbody > tr:nth-last-child(odd) { color: white; background-color: gray }

Zobacz więcej...

W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?

ul > li:not(:first-child) { font-weight: bold }

Zobacz więcej...

W jaki sposób połączyć kilka selektorów w jednej regule stylów CSS? Jak zmienić obramowanie obrazka po wskazaniu myszką? Jak dodać ciekawie wyglądający tekst po wskazaniu myszką?

a.przyklad_selektory:hover { font-weight: bold }

.przyklad_selektory2 a:hover { font-weight: bold }

img.przyklad_selektory3 { border: 5px solid black }
a:hover img.przyklad_selektory3 { border: 5px solid red }

a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px }

div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold; font-size: larger }

Zobacz więcej...

Jak określić ważność różnych selektorów w tym samym arkuszu stylów, odnoszących się do tych samych elementów i własności?

div#kontener p#identyfikator { color: red }
p#identyfikator { color: green }
p { color: black }

p.klasa { color: red }
p { color: black }

div p { color: red }
p { color: black }

p { color: black }
p { color: green; color: red }

div#kontener p.klasa { color: lime }
div#kontener p.klasa { color: yellow; color: red }
#kontener p.klasa { color: green }
div#kontener p { color: olive }
#kontener p { color: teal }
div p.klasa { color: aqua }
p.klasa { color: blue }
.klasa { color: navy }
div p { color: purple }
p { color: fuchsia }
* { color: black }

Zobacz więcej...

Czcionki CSS

Jak zmienić rodzaj (krój) czcionki? W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem czcionki?

body { font-family: Arial, Helvetica, Verdana, sans-serif }

Zobacz więcej...

W jaki sposób wczytać czcionkę z pliku?

@font-face {
	font-family: comic;
	src: url(http://adres/plik.ttf) format("truetype");
}

@font-face {
	font-family: comic;
	src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype");
}

@font-face {
	font-family: comic;
	src: url(http://adres/plik.eot);
	src: local("Comic Font Regular"), url(http://adres/plik.ttf) format("truetype");
}

Zobacz więcej...

W jaki sposób dodać indeks dolny lub górny tak, aby sąsiednie linijki tekstu nie były między sobą nieestetycznie rozsunięte?

@supports (font-variant-position: sub) {
	sub {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: sub;
	}
}
@supports (font-variant-position: super) {
	sup {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: super;
	}
}

Zobacz więcej...

W jaki sposób określić w jednym poleceniu wiele własności wariantu czcionki: połączenie liter (ligatury), wielkość liter (kapitaliki), formatowanie liczb oraz wyglądu indeksów dolnych i górnych w tekście?

p {
	font-variant-ligatures: discretionary-ligatures;
	font-variant-caps: small-caps;
	font-variant-numeric: oldstyle-nums tabular-nums;
}

p {
	font-variant: discretionary-ligatures small-caps oldstyle-nums tabular-nums;
}

Zobacz więcej...

W jaki sposób określić w jednym poleceniu wiele własności czcionki: styl, wariant, wagę, rozmiar, krój, a także wysokość linii? Jak ustawić czcionkę systemową, tzn. taką jak używana na przyciskach, paskach narzędzi, menu itp.?

p {
	font-weight: bold;
	font: 12pt Arial;
}

p {
	font: 12pt Arial;
	font-weight: bold;
}

p {
	font: bold 12pt Arial;
}

Zobacz więcej...

Tekst CSS

Co zrobić, aby tekst na stronie był ułożony pionowo - z góry na dół?

th {
	writing-mode: vertical-rl;
}

Zobacz więcej...

Co zrobić, aby znaki w tekście były ułożone pionowo jeden pod drugim?

th {
	writing-mode: vertical-lr;
	text-orientation: upright;
}

Zobacz więcej...

Tło CSS

Jak zrobić tło graficzne (obrazek, zdjęcie), które nie przesuwa się przy przewijaniu strony?

body { background-image: url(obrazek.jpg); background-attachment: fixed }

Zobacz więcej...

Jak można najłatwiej ustawić kilka własności tła w jednym poleceniu?

p { background-color: red; background: url(tlo.gif) }

p { background: url(tlo.gif); background-color: red }

p { background: red url(tlo.gif) }

*.obrazek { background: url(obrazek.jpg) no-repeat left top; padding-left: 110px }

div { background: url(obrazek1.jpg), url(obrazek2.jpg), url(obrazek3.jpg) red }

Zobacz więcej...

Jak usunąć wcześniej dodane tło?

a:link, a:visited { text-decoration: none }

h4 { background-color: red }

Zobacz więcej...

Marginesy CSS

Jak dodać górny margines (odstęp) wewnątrz dowolnego elementu?

body { padding: 0 }

Zobacz więcej...

Obramowanie CSS

Jak ustawić szerokość (grubość), styl i kolor obramowania dowolnego elementu?

*.podkreslenie { border-bottom: 2px #f80 solid }

Zobacz więcej...

Jak udekorować ramkę na stronie obramowaniem graficznym?

.ramka {
	background: url(obramowanie.gif) no-repeat top;
	padding-top: 12px;
	width: 200px;
}

.ramka_pojemnik {
	background: url(obramowanie2.gif) no-repeat bottom;
	padding-bottom: 12px;
}

.ramka_zawartosc {
	background: #92C892 url(obramowanie3.gif) repeat-y center;
	padding: 0 12px;
	color: #031;
}

Zobacz więcej...

Jak ustawić obrazek obramowania, jego narożniki, krawędzie, środek, a także jego szerokość (grubość) i powtarzanie (powielanie)?

div { border-image: url(punkt.gif) 10 }	/* border-image-source: url(punkt.gif); border-image-slice: 10 */
div { border-image: url(punkt.gif) 10 / 10px }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px */
div { border-image: url(punkt.gif) 10 / 10px / 5px } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px */
div { border-image: url(punkt.gif) 10 / 10px / 5px repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px; border-image-repeat: reptat */
div { border-image: url(punkt.gif) 10 / 10px repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-repeat: reptat */
div { border-image: url(punkt.gif) 10 repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: reptat */
div { border-image: url(punkt.gif) repeat }	/* border-image-source: url(punkt.gif); border-image-repeat: reptat */

Zobacz więcej...

Wykazy CSS

W jaki sposób stworzyć własny, niestandardowy rodzaj (typ, styl) wykazu? Jak zrobić listę z punktami w postaci emotikon (emoji)?

ol {
	list-style-type: typ;
}

@counter-style nazwa {
	system: cyclic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: fixed;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: symbolic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: alphabetic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1";
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: additive;
	additive-symbols: 1000 M, 500 D, 100 C, 50 L, 10 X, 5 V, 1 I;
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	negative: "*";
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	negative: "(-" ")";
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	prefix: "[";
	suffix: "] ";
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: cyclic;
	symbols: 👉;
	suffix: " ";
}
ul {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: symbolic;
	symbols: "*";
	range: 1 3;
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	pad: 2 "0";
}
ol {
	list-style-type: nazwa;
}

@counter-style nazwa {
	system: extends decimal;
	prefix: "[";
	suffix: "] ";
}
ol {
	list-style-type: nazwa;
}

ol {
	list-style-type: symbols(cyclic "a" "b" "c");
}

Zobacz więcej...

Jak ustalić kilka własności wyglądu wykazu w jednym poleceniu?

li { list-style-position: inside; list-style: disc }

li { list-style: disc; list-style-position: inside }

li { list-style: disc inside }

Zobacz więcej...

Jak można zmienić odstęp punktu wykazu (wyróżnika, markera) od tekstu? Co zrobić, aby wykaz z punktem w postaci grafiki wyglądał tak samo w każdej przeglądarce?

li:before {
	display: marker;
	marker-offset: 3em;
}

ul, li {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

ul li {
	background: url(marker.gif) no-repeat left top;
	padding-left: 20px;
}

Zobacz więcej...

W jaki sposób stworzyć automatyczną numerację punktów i podpunktów w stylu: 1, 1.1, 1.1.1 itd.?

ol { counter-reset: nazwa_licznika }

ol li { list-style-type: none }

ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika }

ol li:before { content: counters(nazwa_licznika, ".") }

ol { counter-reset: licznik1 licznik2 }
ol li { counter-increment: licznik1 licznik2 }

ol { counter-reset: licznik 3 }
ol li { list-style-type: none }
ol li:before { content: counters(licznik, ".") ". "; counter-increment: licznik -1 }

ol { counter-reset: licznik1 licznik2 3 }
ol li { counter-increment: licznik1 licznik2 -1 }

body { counter-reset: h1 }
h1 { counter-reset: h2 }
h1:before { content: counter(h1) ". "; counter-increment: h1 }
h2 { counter-reset: h3 }
h2:before { content: counter(h1) "." counter(h2) ". "; counter-increment: h2 }
h3 { counter-reset: h4 }
h3:before { content: counter(h1) "." counter(h2) "." counter(h3) ". "; counter-increment: h3 }
h4 { counter-reset: h5 }
h4:before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "; counter-increment: h4 }
h5 { counter-reset: h6 }
h5:before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; counter-increment: h5 }
h6:before { content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; counter-increment: h6 }

ol { counter-reset: upper_alpha }
ol li { list-style-type: none }
ol li:before { content: counters(upper_alpha, ".", upper-alpha) ") "; counter-increment: upper_alpha }

body { counter-reset: h1 }
h1 { counter-reset: h2 }
h1:before { content: counter(h1, upper-roman) ". "; counter-increment: h1 }
h2 { counter-reset: h3 }
h2:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) ". "; counter-increment: h2 }
h3 { counter-reset: h4 }
h3:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) ". "; counter-increment: h3 }
h4 { counter-reset: h5 }
h4:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) "." counter(h4, upper-alpha) ". "; counter-increment: h4 }
h5 { counter-reset: h6 }
h5:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) "." counter(h4, upper-alpha) "." counter(h5, lower-alpha) ". "; counter-increment: h5 }
h6:before { content: counter(h1, upper-roman) "." counter(h2, lower-roman) "." counter(h3, decimal) "." counter(h4, upper-alpha) "." counter(h5, lower-alpha) "." counter(h6, lower-greek) ". "; counter-increment: h6 }

Zobacz więcej...

Rozmiary CSS

Co zrobić, kiedy tekst nie mieści się w ustalonej szerokości elementu na stronie?

p {
	width: 3em;
}

p {
	width: 3em;
	overflow: hidden;
}

p {
	width: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
}

p {
	width: 15em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

Zobacz więcej...

W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?

textarea { resize: none }

textarea { resize: vertical }

Zobacz więcej...

Pozycjonowanie CSS

Jak przywrócić domyślny sposób ustawienia elementu wypozycjonowanego?

h1 { position: relative; left: 50% }

Zobacz więcej...

Kursory CSS

Jak wczytać kursor (wskaźnik) myszki z pliku?

:link, :visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }

Zobacz więcej...

Drukowanie CSS

Jak rozpocząć nową stronę papieru w określonym miejscu na wydruku?

h1 { page-break-before: always }

h1.tytul { page-break-before: always }

Zobacz więcej...

Jak nie dopuścić, aby na wydruku pierwsza część elementu znalazła się na jednej stronie papieru, a dalsza na drugiej?

table {
	page-break-inside: avoid;
}

Zobacz więcej...

W jaki sposób poprawić estetykę wydruku, kontrolując liczbę linijek wdowich (na górze) i sierocych (na dole)?

p {
	widows: 4;
	orphans: 4;
}

Zobacz więcej...

Jak ustawić marginesy strony na wydruku?

@page {
	margin: 1cm;
}

Zobacz więcej...

Jak wyzerować marginesy na okładce wydruku?

@page {
	margin: 1cm;
}

@page :first {
	margin: 0;
}

Zobacz więcej...

W jaki sposób przygotować druk dwustronny, tak aby potem wszystkie kartki można było wygodnie spiąć jak książkę?

@page {
	margin: 1cm;
}

@page :left {
	margin-right: 2cm;
}

@page :right {
	margin-left: 2cm;
}

Zobacz więcej...

Co zrobić, żeby strona WWW była drukowana na kartce w orientacji poziomej? Jak obrócić drukowane zdjęcie? W jaki sposób wydrukować stronę na kartce w formacie A5, A3, B5 lub B4?

@page {
	size: landscape;
}

@page {
	size: 297mm 210mm;
}

Zobacz więcej...

W jaki sposób wydrukować część stron poziomo, a pozostałe pionowo?

@page poziomo {
	size: landscape;
}

table {
	page: poziomo;
	page-break-before: always;
	page-break-after: always;
}

Zobacz więcej...

W jaki sposób dostosować stronę WWW do wydruku bez potrzeby tworzenia nowej wersji? W jaki sposób ukryć na wydruku niektóre elementy strony?

/* Domyślny arkusz dla wszystkich mediów */
/* (tu znajdują się ogólne deklaracje) */
/* (...) */

@media print {
	/* Arkusz dla wydruku */
}

Zobacz więcej...

Układ wielokolumnowy CSS

Jak zapewnić estetyczne przełamania kolumn tekstu na stronie?

h1 { break-after: avoid-column }

hr { break-after: column }

p { break-inside: avoid-column }

Zobacz więcej...

Układ elastyczny CSS

Jak zmienić kolejność wyświetlania elementów na stronie?

#top {
	display: flex;
}

#MENU {
	width: 150px;
	min-width: 150px;
	order: -1;
}

Zobacz więcej...

Media CSS

Jak określić specjalny wygląd strony w wersji do wydruku czy na urządzenia przenośne?

@import url(glos.css) aural;
@media print {
	/* Arkusz dla wydruku */
}

@media print {
	body { font-size: 10pt }
}

@media screen {
	body { font-size: 12pt }
}

@media screen, print {
	body { line-height: 1.2 }
}

Zobacz więcej...

Jak stworzyć stronę, która automatycznie dopasowuje się do możliwości urządzenia: komputer, tablet, smartphone, telewizor, projektor?

@import url(kolor.css) screen and (color);
@media screen and (color) {
	/* Arkusz dla urządzeń z kolorowym ekranem */
}

@media screen and (min-width: 800px) and (max-width: 1280px) {
	/* Okno przeglądarki o szerokości pomiędzy 800px a 1280px */
}

@media (color) {
	/* Arkusz dla wszystkich urządzeń kolorowych */
}

@media not screen and (color) {
	/* Arkusz dla urządzeń nie wyposażonych w kolorowy ekran */
}

@media screen and (color), projection and (color) {
	/* Arkusz dla kolorowych ekranów lub kolorowych projektorów */
}

@media only screen and (color) {
	/* Arkusz dla urządzeń z kolorowym ekranem, które obsługują zapytania mediów */
}

@media all and (color) {
	/* Urządzenia kolorowe */
}
@media all and (min-color: 8) {
	/* Urządzenia z obsługą minimum 8-bitowej głębi na składową koloru */
}
@media all and (max-color: 10) {
	/* Urządzenia z obsługą maksimum 10-bitowej głębi na składową koloru */
}

@media screen and (device-width: 1280px), print and (device-width: 210mm) { /* ... */ }

Zobacz więcej...

Reguły warunkowe CSS

W jaki sposób zapewnić prawidłowy wygląd strony WWW nawet w starszych przeglądarkach?

@supports (display: flex) {
	body {
		display: flex;
	}
	#MENU {
		width: 150px;
		min-width: 150px;
		order: -1;
		overflow: hidden;
	}
}

@supports not (display: flex) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}
	#TRESC {
		margin-left: 150px;
	}
}

@supports (box-shadow: 0 0 10px 0 #000) or
	(-moz-box-shadow: 0 0 10px 0 #000) or
	(-webkit-box-shadow: 0 0 10px 0 #000) or
	(-o-box-shadow: 0 0 10px 0 #000) {
	.box {
		-moz-box-shadow: 0 0 10px 0 #000;
		-webkit-box-shadow: 0 0 10px 0 #000;
		-o-box-shadow: 0 0 10px 0 #000;
		box-shadow: 0 0 10px 0 #000;
	}
}

@supports ((display: flex) or (display: inline-flex)) and (order: -1) {
	/* ... */
}

@supports (display: flex) or ((display: inline-flex) and (order: -1)) {
	/* ... */
}

Zobacz więcej...

Tryb Quirks

O czym trzeba pamiętać, projektując stronę WWW dla starszych przeglądarek?

span { text-decoration: underline cross-out overline }

Zobacz więcej...

Menu w CSS

W jaki sposób wykonać pionowe menu nawigacyjne na liście (wykaz)?

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	width: 200px;
}

ul a:link, ul a:visited {
	display: block;
	width: 186px;
	text-decoration: none;
	background-color: #ccc;
	color: #000;
	padding: 5px;
	border: 2px outset #ccc;
}

ul a:hover {
	border-style: inset;
	padding: 7px 3px 3px 7px;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	width: 200px;
	padding: 2px 2px 1px 2px;
	background-color: #9ce;
	border: 3px double #28e;
}

ul li {
	border-bottom: 1px solid #9ce;
}

ul a:link, ul a:visited {
	display: block;
	width: 176px;
	text-decoration: none;
	padding: 7px;
	font-weight: bold;
	background-color: #27c;
	color: #def;
	border-left: 10px solid #25b;
}

ul a:hover {
	width: 166px;
	background-color: #28e;
	color: #fff;
	border-left: 20px solid #26d;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	width: 190px;
	padding-left: 10px;
	background: #797 url("punkt.gif") no-repeat left top;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}

ul a:link, ul a:visited {
	display: block;
	width: 169px;
	text-decoration: none;
	padding: 5px 10px;
	font-weight: bold;
	background: #bfb url("tlo.gif") repeat-x top;
	color: #365;
	border-left: 1px solid #797;
}

ul a:hover {
	background-color: #797;
	background-image: url("tlo2.gif");
	color: #eff;
}

Zobacz więcej...

W jaki sposób wykonać poziome menu nawigacyjne (zakładki) na liście (wykaz)?

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	display: inline;
	white-space: nowrap;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	float: left;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul li {
	float: left;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	width: 80px;
	text-align: center;
	background-color: #ccc;
	color: #000;
	border: 2px outset #ccc;
	padding: 5px;
}

ul a:hover {
	border-style: inset;
	padding: 7px 3px 3px 7px;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	position: absolute;
}

ul li {
	float: left;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: transparent #25b #25b #9ce;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	width: 95px;
	text-align: center;
	padding: 5px 0;
	font-weight: bold;
	background-color: #27c;
	color: #def;
	border-top: 10px solid #25b;
}

ul a:hover {
	background-color: #28e;
	color: #fff;
	border-top: 20px solid #26d;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	float: left;
	background-color: #fff;
	padding: 1px 0 1px 1px;
	border: 1px solid #000;
}

ul li {
	float: left;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	font-weight: bold;
	background: #000 url("tlo.gif") repeat-x center;
	color: #fff;
	padding: 10px 20px;
	border-right: 1px solid #fff;
	border-right: 1px solid #fff;
}

ul a:hover {
	background-color: #800;
	background-image: url("tlo2.gif");
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	text-align: center;
	border-bottom: 1px solid #888;
	padding-bottom: 5px;
}

ul li {
	display: inline;
	white-space: nowrap;
	margin-right: 5px;
}

ul a:link, ul a:visited {
	text-decoration: none;
	background-color: #ccc;
	color: #000;
	border: 1px solid #888;
	padding: 5px;
}

ul a:hover {
	background-color: #fff;
	border-bottom-color: #fff;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	border-bottom: 1px solid #888;
	float: left;
	width: 100%;
	padding-left: 20px;
}

ul li {
	float: left;
	margin-right: 10px;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	background-color: #ccc;
	color: #000;
	padding: 5px 10px;
	border: 1px solid #888;
	position: relative;
	top: 1px;
}

ul a:hover {
	background-color: #fff;
	border-bottom-color: #fff;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	float: left;
	width: 100%;
	border-bottom: 1px solid #365;
	padding-left: 20px;
}

ul li {
	float: left;
	background: url("zakladka.gif") no-repeat left top;
	margin-right: 5px;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	font-weight: bold;
	background: url("zakladka2.gif") no-repeat right top;
	color: #365;
	padding: 5px 15px 5px 5px;
	margin-left: 10px;
}

ul a:hover {
	color: #032;
}

Zobacz więcej...

W jaki sposób wykonać menu nawigacyjne z nagłówkami (tytułami działów) na liście definicyjnej (słownik)?

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dl {
	width: 200px;
}

dt {
	background-color: #ccc;
	color: #000;
	padding: 7px;
	font-weight: bold;
	font-size: larger;
	text-align: center;
}

dl a:link, dl a:visited {
	display: block;
	width: 186px;
	text-decoration: none;
	background-color: #ccc;
	color: #000;
	padding: 5px;
	border: 2px outset #ccc;
}

dl a:hover {
	border-style: inset;
	padding: 7px 3px 3px 7px;
}

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dl {
	width: 200px;
	padding: 1px 2px;
	background-color: #9ce;
	border: 3px double #28e;
}

dt {
	padding: 7px 15px;
	font-weight: bold;
	font-size: larger;
	background-color: #25b;
	color: #9ce;
	text-align: right;
	border-right: 20px solid #26d;
	margin-top: 1px;
}

dd {
	border-top: 1px solid #9ce;
}

dl a:link, dl a:visited {
	display: block;
	width: 176px;
	text-decoration: none;
	padding: 7px;
	font-weight: bold;
	background-color: #27c;
	color: #def;
	border-left: 10px solid #25b;
}

dl a:hover {
	width: 166px;
	background-color: #28e;
	color: #fff;
	border-left: 20px solid #26d;
}

dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}

dt {
	width: 180px;
	padding: 5px 10px;
	font-weight: bold;
	font-size: larger;
	text-align: center;
	background: #797 url("tlo2.gif") repeat-x top;
	color: #eff;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}

dd {
	width: 190px;
	padding-left: 10px;
	background: #797 url("punkt.gif") no-repeat left top;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}

dl a:link, dl a:visited {
	display: block;
	width: 169px;
	text-decoration: none;
	padding: 5px 10px;
	font-weight: bold;
	background: #bfb url("tlo.gif") repeat-x top;
	color: #365;
	border-left: 1px solid #797;
}

dl a:hover {
	background-color: #797;
	background-image: url("tlo2.gif");
	color: #eff;
}

Zobacz więcej...

Szablon strony na DIV-ach

Jak wykonać szablon o szerokości niezależnej od rozdzielczości ekranu?

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Zobacz więcej...

Jak wykonać szablon o szerokości dopasowującej się do rozdzielczości ekranu?

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 300px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Zobacz więcej...

Jak wykonać szablon strony automatycznie dopasowujący się do urządzenia, na którym jest wyświetlany (smartfon, smartphone, tablet, laptop, notebook, komputer stacjonarny)?

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	background-color: #ccc;
}

#TRESC {
	background-color: #fff;
}

#STOPKA {
	background-color: #888;
}

@media only all and (min-width: 800px) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}

	#TRESC {
		margin-left: 150px;
	}

	#STOPKA {
		clear: both;
	}
}

@media only all and (min-width: 1280px) {
	html, body {
		text-align: center;
	}

	#top {
		width: 1260px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#MENU {
		width: 300px;
	}

	#TRESC {
		width: 960px;
		float: left;
		overflow: hidden;
		margin-left: 0;
	}

	#STOPKA {
		width: 100%;
	}
}

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	background-color: #ccc;
}

#INFORMACJE {
	display: none;
}

#TRESC {
	background-color: #fff;
}

#STOPKA {
	background-color: #888;
}

@media only all and (min-width: 800px) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}

	#INFORMACJE {
		display: block;
		background-color: #ccc;
		width: 150px;
		float: right;
		overflow: hidden;
		position: relative;
	}

	#TRESC {
		margin-left: 150px;
		margin-right: 150px;
	}

	#STOPKA {
		clear: both;
	}
}

@media only all and (min-width: 1280px) {
	html, body {
		text-align: center;
	}

	#top {
		width: 1260px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#MENU, #INFORMACJE {
		width: 150px;
	}

	#TRESC {
		width: 960px;
		float: left;
		overflow: hidden;
		margin-left: 0;
		margin-right: 0;
	}

	#STOPKA {
		width: 100%;
	}
}

Zobacz więcej...

Oprawa graficzna

Jak zaprojektować style CSS, aby udostępnić użytkownikom do wyboru różne style kolorystyczne serwisu?

div {
	background-image: url(obrazek.gif);
	width: 200px;
	height: 50px;
}

div span {
	display: none;
}

div {
	background-image: url(obrazek.gif);
	width: 200px;
	height: 50px;
}

div span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

div {
	background-image: url(obrazek.gif);
	width: 200px;
	height: 50px;
	text-indent: -9999px;
}

div {
	width: 200px;
	height: 50px;
	position: relative;
}

div span {
	background-image: url(obrazek.gif);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
}

div {
	width: 200px;
	height: 50px;
	overflow: hidden;
}

div:before {
	content: url(obrazek.gif);
	float: right;
}

Zobacz więcej...

W jaki sposób przyspieszyć ładowanie grafiki na stronie WWW?

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: normal;
	font-size: 12px;
}

ul li {
	width: 200px;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}

ul a:link, ul a:visited {
	display: block;
	width: 169px;
	text-decoration: none;
	padding: 5px 10px 5px 20px;
	font-weight: bold;
	background: #bfb url(obrazek.gif) no-repeat -16px -25px;
	color: #365;
	border-left: 1px solid #797;}

ul a:hover {
	background-color: #797;
	background-position: -16px -49px;
	color: #eff;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: normal;
	font-size: 12px;
}

ul {
	float: left;
	width: 100%;
	border-bottom: 1px solid #365;
	padding-left: 20px;
}

ul li {
	float: left;
	background: url(obrazek.gif) no-repeat -240px -25px;
	margin-right: 5px;
}

ul a:link, ul a:visited {
	text-decoration: none;
	display: block;
	font-weight: bold;
	background: url(obrazek.gif) no-repeat 100% 0;
	color: #365;
	padding: 5px 15px 5px 5px;
	margin-left: 10px;
}

ul a:hover {
	color: #032;
}

div {
	padding-left: 20px;
	font: bold 16px /17px Arial, Helvetica, sans-serif;
	color: #d80;
	background: url(obrazek.gif) no-repeat -234px -50px;
}

a:link, a:visited {
	padding-right: 20px;
	font: bold 16px /17px Arial, Helvetica, sans-serif;
	color: #08d;
	background: url(obrazek.gif) no-repeat 55px 1px;
	text-decoration: none;
	border: 0;
}

a:visited {
	color: #0cf;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 14px;
	font-size: 12px;
}

ul li {
	margin: 2px 0;
	padding-left: 16px;
	background: url(obrazek.gif) no-repeat -240px -65px;
}

ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 14px;
	font-size: 12px;
}

ul li {
	margin: 2px 0;
	padding-left: 16px;
	background: url(obrazek.gif) no-repeat -224px -81px;
}

Zobacz więcej...

Dobre praktyki

W jaki sposób tworzyć elastyczne strony WWW, które będą łatwe do rozwijania w przyszłości?

#Header {
	/* nagłówek */
}

.Menu {
	/* menu */
}

.Article {
	/* artykuł */
}

#Footer {
	/* stopka */
}

.Menu {
	background-color: white;
}
.Menu ul, .Menu li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.Menu li {
	float: left;
	margin-right: 1em;
}
.Menu a {
	color: blue;
	text-decoration: none;
}

.Article {
	color: black;
	background-color: white;
	/* ... */
}

.Review {
	color: green;
	font-size: 12px;
	/* ... */
}

.Information {
	background-color: white;
}

div.Warning {
	color: red;
}

span.Warning {
	font-weight: bold;
}

Zobacz więcej...

Jak zostać prawdziwym profesjonalistą w dziedzinie tworzenia stron WWW?

background-image: url("plik.gif?2");

.pojemnik p { /* ... */ }
.pojemnik p em { /* ... */ }

div.informacja { /* informacja_blok */ }
span.informacja { /* informacja_tekst */ }

a.informacja, abbr.informacja, abbr.informacja,
b.informacja, big.informacja, cite.informacja,
dfn.informacja, em.informacja, i.informacja, q.informacja,
small.informacja, span.informacja, strong.informacja {
	/* To nie jest zbyt dobry pomysł! */
}

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

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

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

Zobacz więcej...