Kolor tła ustalamy za pomocą background-color.

selektor { background-color: wartość; }

Wykaz podstawowych kolorów.

• black (czarny)
• white (biały)
• red (czerwony)
• blue (niebieski)
• green (zielony)
• silver (srebrny)
• gray (szary)
• yellow (żółty)
• purple (purpurowy)
• maroon (kasztanowy)
• olive (oliwkowy)
• lime (limonkowy)
• aqua (morski)
• teal (teal)
• navy (granatowy)

p { background-color: yellow; }

OBRAZEK W TLE

Obrazek jako tło ustalamy za pomocą background-image.

selektor { background-image: ścieżka do obrazka; }

body { background-image: url('/../images/arrow2.png'); }

Przykład

Kilka obrazków w tle.

selektor { background-repeat: ścieżka do obrazka1, ścieżka do obrazka2; }

POZYCJA

Pozycję obrazka w tle ustalamy za pomocą background-position.

selektor { background-position: wartość; }

Możemy zastosować wartości:

• left - na lewo
• right - na prawo
• top - w górze
• bottom - na dole
• center - na środku
• odległość np. px, em, cm, %

body { background-position: top right; }

POWTARZANIE

Powtarzanie obrazka w tle ustalamy za pomocą background-repeat.

selektor { background-repeat: ścieżka do obrazka; }

Możemy zastosować wartości:

• repeat - powtarzanie w pionie i poziomie
• repeat-x - powtarzanie w poziomie
• repeat-y - powtarzanie w pionie
• no-repeat - bez powtarzania
• space - obrazki w tle i przestrzeń pomiędzy bez przycinania
• round - obrazki w tle bez przycinania

body { background-repeat: repeat-x; }

POŁOŻENIE

Pozycję obrazka w tle ustalamy za pomocą background-position.

selektor { background-attachment: wartość; }

Możemy zastosować wartości:

• scroll - tło przewijane (domyślne)
• fixed - tło zablokowane
• local - tło zablokowane względem elementu, w którym się znajduje

body { background-attachment: fixed; }

ROZMIAR

Rozmiar obrazka ustalamy za pomocą background-size.

selektor { background-size: wartość; }

Możemy zastosować wartości:

• auto - rozmiar obrazka (domyślny)
• cover - rozmiar obrazka zostanie zwiększony na szerokość elementu
• contain - rozmiar obrazka zostanie zwiększony na wysokość elementu
• piksele - rozmiar obrazka w pikselach
• procenty - rozmiar obrazka w procentach

body { background-size: cover; }



Źródło:http://www.kurshtmlcss.pl/kurs-css/lekcja6-tlo.php

Wyrównanie Tekstu CSS

text-align: left;     /* do lewej (domyślna) */
text-align: center;   /* do środka */
text-align: right;    /* do prawej */
text-align: justify;  /* wyjustowany */

text-transform

Za pomocą własności text-transform (ang. transformacja tekstu) można zmienić wysokość liter. Wartości, które przyjmuje ta własność to:

• none – (domyślna wartość)
• lowercase – małe litery
• uppercase – duże litery
• capitalize – pierwsza litera każdego wyrazu zamieniona na dużą

text-decoration

Dekoracji tekstu w CSS dokonujemy za pomocą linii. Linię możemy zadeklarować za pomocą własności text-decoration (ang. dekoracja tekstu). Linie mogą znaleźć się:

• nad tekstem (ang. overline)
• pod tekstem (ang. underline)
• biec przez tekst (ang. line-through), jakby skreślając go.

text-indent

Za pomocą własności text-indent (ang. wcięcie tekstu) możemy dokonać tzw. wcięcia tekstu, czyli odsunięcia pierwszej linii paragrafu od krawędzi elementu. Własność ta przyjmuje wartości w px, pt, em, %, domyślnie wynosi ona 0.

p { text-indent: 20px; }


Źródło : http://how2html.pl/formatowanie-tekstu-css/

Przykłady czcionek:

font-family: Arial;
font-family: 'Century Gothic';
font-family: 'Courier New';
font-family: 'Copperplate Gothic Light';
font-family: Georgia;
font-family: Impact;
font-family: 'Lucida Console';
font-family: 'Lucida Sans Unicode';
font-family: 'Palatino Linotype';
font-family: Tahoma;
font-family: 'Times New Roman';
font-family: 'Trebuchet MS';
font-family: Verdana;



Źródło:http://how2html.pl/wybor-czcionki-css/