p.note {
position: relative;
left: 15%;
width: 80%;
padding: 30px;
padding-bottom: 45px;
border: 1px solid black;
line-height: 1.5em;
color: black;
font-weight: bold;
text-align: justify;
background-color: #eeeeee
}
HTML:
Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
Das p-Tag macht den dazwischen stehenden Text zu einem Absatz. Da ihm die Klasse „note“ zugewiesen wird, wird er von einem CSS-kompatiblen Browser wie folgt dargestellt:
{{:informatik:css:note.png|Textnotiz}}
Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente der Klasse note betroffen sein, beim Weglassen des .note alle p-Elemente.
==== Beispiel: Schriften ====
(Quelle: SelfHTML)
Alles zur Schriftformatierung mittel CSS findest Du [[http://de.selfhtml.org/css/eigenschaften/schrift.htm|hier]]
HTML:
font-family
kleiner Beispieltext in Times New Roman
großer Beispieltext
in Times New Roman
kleiner Beispieltext in Verdana
großer Beispieltext
in Verdana
kleiner Beispieltext in Wide Latin
großer Beispieltext
in Wide Latin
kleiner Beispieltext in Comic Sans MS
großer Beispieltext
in Comic Sans MS
kleiner Beispieltext in Avantgarde
großer Beispieltext
in Avantgarde
kleiner Beispieltext in Balloon
großer Beispieltext
in Balloon
kleiner Beispieltext in Bodoni
großer Beispieltext
in Bodoni
kleiner Beispieltext in Garamond
großer Beispieltext
in Garamond
kleiner Beispieltext in Impact
großer Beispieltext
in Impact
kleiner Beispieltext in Helvetica
großer Beispieltext
in Helvetica