CSS Grundlagen

Von b_funke |

CSS bestimmt die Positionierung von HTML-Elementen, 
das Layout (Farben, Hintergrundgrafiken), 
Schriftarten, Schriftgrößen, 
Inline (nebeneinander) oder Block-Anzeige

Zusätzlich können Sie eigene Formatierungen anlegen, wenn
Sie HTML-Elemente unterschiedlich gestalten wollen

CSS – eigene Formatierungen anlegen

In der HTML innerhalb der Anweisung

<div class=“unterzeile“> - die schönsten …</div>

Im CSS Dokument

.unterzeile{}

Stylesheet-Angaben innerhalb eines HTML Dokuments oder in ausgelagerter Datei

Von b_funke |

Sie können Stylesheet-Angaben machen

  • im <HEAD> eines HTML-Dokuments notieren (<style>....</style>),
  • innerhalb eines HTML-Elements z.B. <h1 style="......">
  • oder als separate .css Datei verbunden über die link rel Angabe im HEAD des HTML-Dokuments

Angaben innerhalb der .html Dokumente haben den Nachteil, dass Änderungen in allen betroffenen .html Dokumenten erfolgen müssen. Der Vorteil eines externen .css Stylesheets: Änderungen greifen automatisch in allen verbundenen .html Dokumenten.

Responsive Design - HTML und CSS für mobile Geräte

Von b_funke |

Sie können ein anderes Layout für Ihre Webseite für mobile Geräte mit folgenden Anweisungen erzeugen:

HTML

fügen Sie in den Head des Dokuments folgendes ein:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

Dies setzt die Breite des mobilen Gerätes als Anzeigebreite der Webseite

Sie können ein eigenes mobiles Stylesheet mobile.css einbinden mit

<link rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” />

CSS abonnieren