CSS-Klassen und Style-Kosmetik

Ihr habt noch weitere Ansprüche an eure erste CSS-Seite? Dann machen wir noch etwas Feinkosmetik.

Wir wollen den Text im Content in Blocksatz schreiben, also links- und rechtsbündig.
Das geht mit text-align: justify;

Die Schrift ist euch zu groß oder zu klein? Dann stellen wir sie eben ein.
Wir können die Schriftgröße speziell dem #content zuweisen indem wir einfügen:
font-size: 1.1em; oder font-size: 0.9em;
Probiert mal beides aus.

Ihr habt euch für 0.9em entschieden aber die Zeilen sind jetzt zu dicht beieinander.
Dem kann mit line-height: 1.5em; oder einem anderen Wert eurer Wahl abgeholfen werden.
Probiert einfach mal verschiedene Werte in Abhängigkeit von der Schriftgröße aus.

Einzelne Worte sollen rot und fett hervorgehoben werden? Auch das schafft CSS.
In diesem Fall verwenden wir jedoch eine "Klasse" und keinen Div. Ihr erinnert euch: Ein "Div-Identifyer" darf nur einmal auf jeder Seite vorkommen. "Klassen" kann man dagegen mehrfach verwenden.
In CSS definieren wir Klassen, indem wir ihnen einen Punkt . voranstellen.
Fügt in eure CSS also noch folgendes ein:

.rotfett
{
color: #f00;
font-weight: bold;
}

Sucht euch jetzt in der "index.html" zwei oder mehrere Textstellen aus, die rot und fett markiert werden sollen.
Ich mach' das gleich mal in der ersten Zeile.
Die Markierung innerhalb eines Textes wird mit <span class="rotfett"> eingeleitet und mit </span> beendet.
Das sieht dann so aus:

Es begab sich zu <span class="rotfett">Friedels Board.</span> Als Friedel bereits einen hervorragenden <span class="rotfett">HTML-Crash-Kurs</span>

Versucht mal, auf diese Weise einzelne Wörter wie mit einem Textmarker gelb hervorzuheben, indem ihr eine zusätzliche CSS-Klasse bildet und im HTML-Teil einzelne Wörter damit kennzeichnet (Stichwort: "Hintergrundfarbe", der Farbcode für gelb ist #FFFF00;)

Natürlich könnt ihr auch ganzen Absätzen oder Div's "Klassendefinitionen" zuordnen. Statt <span class="rotfett"> verwendet ihr <p class="rotfett"> oder <div class="rotfett"> und schon habt ihr einen ganzen Absatz oder Div mit roter Fettschrift. Den Tag dann aber bitte mit </p> bzw. </div> schließen.

Vielleicht ist euch schon aufgefallen, dass bei diesem Kurs der HTML-Quelltext mit weißem und der CSS-Code mit gelbem Farbton hinterlegt und die jeweils einzufügenden neuen Teile rot-fett gekennzeichnet sind. Diese Hervorhebungen verdanken wir unterschiedlichen CSS-Klassen, die in der CSS-Datei zu diesem Kurs hinterlegt sind.
Der gelb hinterlegte CSS-Code hat bei mir die Klasse

.cs
{
background-color: #FFFFAE;
color:black;
font-family: Courier New, Verdana, Sans-Serif;
text-align: left;
padding: 0 5px;
}

und für die wichtigen Merkkästen verwende ich

.wi
{
border: 2px solid #f00;
padding: 10px;
color: #00008B;
background-color: #FFC04A;
}

Ein solcher Merkkasten wird im HTML-Teil aufgerufen mit

<p class="wi">
<b>Merke:</b><br>
Dies ist ein Merkkasten, der mit der CSS-Klasse ".wi" aufgerufen wird.
</p>

Das <b> steht übrigens für "bold", also Fettschrift.
Bei euch am Bildschirm sieht das Ganze dann so aus:

Merke:
Dies ist ein Merkkasten, der mit der CSS-Klasse ".wi" aufgerufen wird.

Mit CSS-Klassen könnt ihr nun also auch selbst eine Seite wie die gerade geöffnete CSS-Kurs-Seite gestalten und wichtige Passagen hervorheben.

Noch ein kleiner Tipp zur CSS-Code-Kommentierung.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: