Zurück zu den Anfängen von CSS

Mehr CSS

Rahmen

Neben den Attributen color (=Textfarbe) und background-color, die mit englischen Worten oder im Format #FFFFFF angegeben werden, gibt es weitere Attribute.

So kann alles einen Rahmen erhalten, so wie hier z.B. der nächste Abschnitt:

border-color: green;
border-width: 5px;
border-style: solid;

Übung 2

Experimentiere - wieder mit einer separaten CSS-Datei wie in Übung 1 - mit Rahmen, gib Überschriften einen Rahmen, normalen Absätzen, Tabellen, Listen ...

Übung 3

Lade dir den Quelltext dieser Seite hier herunter (Rechtsklick, Seitenquelltext anzeigen, dann alles markieren und in einer HTML-Datei in deinem Homeverzeichnis abspeichern).

Erstelle eine Datei namens design.css im gleichen Verzeichnis. Nimm in dieser Datei Deklarationen vor, sodass die Seite so aussieht wie diese PDF-Datei.

H1-Überschriften haben einen durchgezogenen Rahmen, 5 Pixel breit in einem mittleren Grau #777777.

H2-Überschriften haben einen gestichelten Rahmen (dashed), 3 Pixel stark und schwarz (#000000). Die Hintergrundfarbe ist #00FFFF.

Normale Absätze haben die Hintergrundfarbe #FFAAAA und einen durchgezogenen Rahmen, 1 Pixel stark und schwarz.

Aufzählungspunkte einer Liste (<li>) haben die Hintergrundfarbe #FFBB00.

Schriftarten

Mit der Deklaration font-family: corbel, arial, sans-serif; legt man fest, dass Corbel gewählt wird, falls vorhanden, ansonsten Arial. Ist auch Arial nicht auf dem Client vorhanden, wird eine serifenlose Schrift gewählt.

Will man diese Schriftarten-Folge für das ganze Dokument festlegen, schreibt man in die CSS-Datei:

body {
	font-family: corbel, arial, sans-serif;
}

Damit ist für den Body die Schriftart festgelegt und alles, was sich im Body befindet, also alles, was dargestellt wird, erbt diese Eigenschaft.

Weitere Attribute und eine kleine Übung

Schriftstärke festlegen

font-weight: bold; (oder normal, bolder, lighter)

Kursiv oder nicht kursiv:

font-style: italic, oblique;

Texteinrückung der ersten Zeile

text-indent: 1.5em;

Kapitälchen:

Kapitälchen heißt, es wird komplett in Großbuchstaben geschrieben und die wirklichen Großbuchstaben werden durch eine größere Darstellung gekennzeichnet. In wissenschaftlichen Publikationen markiert man so die Namen der Wissenschaftler:
Leibniz und auch Newton ...
font-variant: small-caps;

Aufgabe 3a

Gestalte normale Absätze (<p>) mit folgenden Eigenschaften:

  • Farbe: mittleres Grau (#555)
  • Schriftstärke: fett
  • Schriftschnitt: kursiv
  • Texteinrückung der ersten Zeile: 1.5em;
Das sollte dann so aussehen, wie dieser Bereich. Erst bei mehreren Zeilen sieht man die Auswirkung der Einrückung der ersten Zeile.

Aber erst in der Lösung spickeln, wenn du es selbst versucht hast!

Noch mehr Gestaltungsmöglichkeiten

Übung 3b

Gestalte die HTML-Seiten, die du bisher geschrieben hast, z.B. deinen Steckbrief mit Hilfe einer CSS-Datei, sodass sie dir selbst gefallen: Schriftarten, Farben, Rahmen, Abstände usw. Experimentiere dabei auch mit Tabellen. Du kannst z.B. Eigenschaften für <td>-Tags uws. festlegen.

Mehr CSS: Class uns ID




Lösung der kleinen Übung weiter oben: style="color: #555; font-weight: bold; font-style: italic; text-indent: 1.5em; background-color: #cfc; margin: 10px;" direkt in das p-Tag hineingeschrieben.