CSS

Wie die Html Datei wird auch die Formatierung mittels Text beschrieben

zu css Werten

Farben

als Wörter: red, green, grey, ....

in RGB Werte = Anteile für Rot Grün Blau

Ein Wert hat 16 Möglichkeiten 0,1,2,3.4.5.6.7.8.9.A.B.C.D.E.F

FF0000 rot
00FF00 grün
0000FF blau
666666 grau (Alle Farbanteile gleich)
000000 schwarz
FFFFFF Weiß

Vor der Definition kommt eine Raute: #

Beispiel: #FF0000 Für die Farbe rot

Größenangaben

Empfehlenswert sind relative Größenangaben:

in % relativ zu größeren Rahmen oder Schriftgröße
in em abhängig von der Schriftgröße
relative Angaben der Schriftgrößen

xx-small
x-small
Small
Medium
Large
x-large
xx-large

absolut in

px als Bildschirmpixel
pt in Punkt

Die Formatierung des Textes vorgeben

Allgemein: < p style=" color:red; " >

Möglichkeiten

Zeichenformatierung

color:red; /* Zeichen Farbe rot oder in RGB :#FF0000 */
font-size:28pt; /* Größe 28pt */
font-family:arial; /* Schriftfamilie Arial */

Absatzformatierung

Schattierung

background-color: black; /* Schattierung Farbe schwarz */

Rahmen

border-color: green; /* Rahmen Farbe grün */
border-width: 5px; /* Stärke des Rahmens 5 Pixel */
border-style: solid; /* Rahmenstil durchgezogene Linie */
border-radius: 3px;

Textausrichtung

text-align:center;

left: linksbündig
center: zentriert
right: rechtsbündig
justify: Blocksatz

Rahmeneigenschaften

Breite

width:70%;

Außenabstand

margin:13px;

Innenabstand

padding:5px;

Formatvorlagen

als ID

definiert mittels #kopfzeile{ }
aufgerufen als Attribut im betreffenden Html Tag: <div ID=“kopfzeile“>

als Klasse

definiert als .schmal{ }
aufgerufen als Attribut im betreffenden Html Tag: <div class=“schmal“>

werden entweder innerhalb der ganzen Seite

oder für mehrere Webseiten verwendet

Es wird eine eigene Datei mit der Dateienerweiterung .css gespeichert. Diese enthält nur die Regeln für die Formatierungen. Diejenige Html Seite, die diese Formatierungen anwenden möchte, wird im Head-Tag mit dieser css-Datei verlinkt.

Beispiel Die css Datei hat den Namen: format.css

Die Formatierung in der css Datei

#kopfzeile{
          color: red ;
          font-size: 28pt ;
    }

Beispiel Html Seite und dazugehörende css-Datei

Html Seite

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;">
    <title>Roland Geyer - zoom</title>
    <link type="text/css" rel="stylesheet" href="../handyformat.css">
    <link rel="stylesheet" media="(min-width: 672px)" href="../pcformat.css">
  </head>
  <body>
    <div ID="kopfzeile">Das ist die Kopfzeile</div>   
    <div>Ein Text</div>
    <div class="schmal">Wie geht es mit Html voran?</div>
  </body>
</html>

Diese Seite wird als first.html gesichert.

Die dazugehörende css Datei mit dem Dateinamen format.css

#kopfzeile{
color:red;
font-size:28pt;
}

.schmal{
font-size:10pt;
background-color: green;
}

Responsives css

Damit soll die Webseite bei unterschiedlichen Bildschirmen, klein - groß, Hoch- oder Querformat ein möglichst gleichmäßiges Aussehen haben. Ein Großteil der Webseiten wird mit dem Handy abgerufen. Das sollte bei der Gestaltung von Webseiten berücksichtigt werden.

Für gleiche Größe der Buchstaben sorgen

Um die Buchstaben in einer korrekten Größe zur Bildschirmgröße darzustellen wird folgender Code im Head-Tag eingebunden:

Von der Bildschirmgröße abhängige Formatierung festlegen

Abhängig vom verwendeten Bildschirm kann mithilfe des Attributes media die Anzeige unterschiedlich formatiert werden:

Beispiel:

im handyformat.css wird festgelegt das es keine Seitenabstände gibt, das alle Boxen untereinander dargestellt werden, ....

Krasses Beispiel um den Effekt gut zu sehen:

< zurück | vor >