Das HTML-Grundgerüst ist bereits fertig und auch einem Feinschliff unterzogen. In diesem Teil des Webdesign-Workshops geht es jetzt an das CSS-Grundgerüst…

Gestaltung per CSS:

CSS steht für Cascading Style Sheet und damit wird der HTML Quelltext jetzt gestaltet. Die CSS-Dateien die nachfolgend erstellt werden, sollten auch bereits in der passenden Ordnerstruktur erstellt werden…

In der HTML-Datei ist der Hyperlink bereits festgelegt…:

• <link rel=”stylesheet” href=”01_CSS/01_zentrale.css” type=”text/css” />

Das Stylesheet, also die CSS_Datei(en) liegen in einem Ordner mit dem Namen “01_CSS“. Wir erstellen jetzt also diesen Ordner…

In diesem Ordner soll es eine Datei mit dem Namen “01_zentrale.css“ geben. Wir erstellen jetzt also diese Datei…

Aus der zentralen CSS Datei wird auf andere CSS Dateien verlinkt, um einzelne Bereiche der Webseite zu gestalten.

@import url(02_fundament.css);
@import url(03_body.css);
@import url(04_wrapper.css);
@import url(05_kopfbereich.css);
@import url(06_navibereich.css);
@import url(07_textbereich.css);
@import url(08_artikel.css);

Per „@import url“ werden also sieben Dateien eingebunden. Die Dateinamen zeigen auch schon was genau diese Dateien gestalten.

Schritt für Schritt erzeugen und füllen wir die entsprechenden Dateien und können dabei auch im Webbrowser die Änderungen verfolgen…

Das CSS Fundament:

Diese CSS Datei dient nur dem Reset. Alle möglichen Stylesheets vom Browser werden damit aufgehoben. Damit legen wir eine saubere Basis für alle weiteren Gestaltungen.

@media all { 

/* 
Diese Datei dient nur dem Reset. Padding und margin werden auf null gesetzt. 
*/ 

* { 
padding: 0; 
margin: 0; 
} 

html { 
height: 101%; 
} 


} /* Ende von @media nicht löschen*/

Check im Browser: Jetzt klebt alles am Bildschirmrand, doch das wird mit den nächsten Schritten wieder besser.

Der body-Bereich:

Diese Datei dient nur der CSS Gestaltung des body-Bereiches. Mit “background-color” wird eine Hintergrundfarbe ausgewählt und mit “color” eine Schriftfarbe. Diese Schriftfarbe spielt aber keine Rolle, da innerhalb des body-Bereiches gar kein Text stehen sollte. Die Angaben für Schrift machen erst in “content/textbereich” und “artikel” Sinn.

@media all { 

body { 
background-color: white; 
color: black; 
} 


} /* Ende von @media nicht löschen*/

Mit der Gestaltung des wrapper-Bereiches geht es im nächsten Webdesign-Workshop weiter…