Einstieg CSS

Wie du bei Aufgabe – Begriffe Web Grundlagen (auf Seite 13) herausgefunden hast, macht man mit CSS die Darstellung einer Website. Die Startseite vom Aufbau her steht, jetzt geht es darum, diese zu designen.

Ziel(e)

• Ich verstehe die Funktionsweise von CSS-Code.
• Ich kenne die unterschiedlichen CSS-Selektoren.

Aufgabe

Beim Schreiben von CSS Code spricht man von CSS-Regeln. Diese Regeln wendet man auf HTML-Elemente an und legt dabei fest, wie der Inhalt dieser Elemente angezeigt werden soll. Eine CSS-Regel besteht aus zwei Teilen: einem Selektor und einer Deklaration, wobei die Deklaration aus der Eigenschaft und dem Wert besteht.

Diese Regel besagt, dass alle p>-Elemente in der Schriftfarbe blau und als fett dargestellt werden sollen.

Sovielmal dazu, wie CSS Code aussieht. Jetzt geht’s um das Recherchieren einiger Informationen zu der Anwendung von CSS, bevor es am Projekt umgesetzt wird.

Versuche folgende Fragen zu beantworten und halte alles auf mind. zwei Seiten in deinem Projektjournal fest.

• CSS kann man intern (in der HTML-Datei) oder extern (als eigene Datei) schreiben. Was ist damit genau gemeint? Wo kommt der Code? Was ist der Unterschied? Was ist besser?

• Wie sieht die HTML-Zeile aus, um eine externe CSS-Datei einzubinden?

• Es gibt viele verschiedene CSS-Selektoren. Im obigen Beispiel wurde der Typselektor verwendet. Recherchiere folgende CSS-Selektoren und erstelle in einer Tabelle eine Übersicht:

  • Universalselektor

  • Typselektor

  • Klassenselektor

  • ID-Selektor

  • Kindselektor

  • Nachkommenselektor

• Wie macht man einen Kommentar im CSS?

Such zusätzlich im Internet nach einigen Live-CSS-Beispielen, um das Thema gut zu verstehen. W3schools bietet z.B. dafür sehr gute Beispiele.