CSS

Starker Einfluss aufs Aussehen

Die Gestaltung der Elemente einer Webseite ist die Aufgabe des CSS (Cascading-Stylesheets). Hier wird festgelegt auf welche Art und Weise der Text dargestellt wird und welche Schrift Verwendung findet. Die Farben von Hintergründen, Links, Linien und der Schrift werden hiermit bestimmt. Auch die Größe und Positionierung der Elemente werden vom CSS festgelegt. Durch das CSS können die, vom HTML erzeugten Inhalte, stark beeinflusst werden. Ein hervorragendes Beispiel hierzu ist die Seite „CSS Zen Garden“.

farbmuster.css

*{margin: 0px;padding: 0px;}
body {
	margin:20px;
}
.header {margin:10px 0 10px 20px;}
#button-insert, button#animation-button {
	margin:20px;
	padding:3px 30px;
	border: 2px solid 2F3BBF;
	border-radius:10px;
}
#paragraf-id {margin: 20px;}
#button-insert {
	display:none;
}
#button-insert:hover, button#animation-button:hover,
#button-insert:focus, button#animation-button:focus {
	border: 2px solid #68f8ec;
	border-radius:10px;
	font-weight:bold;
}
.schluessel, .wert, .muster, .schluesseltitel, .werttitel, .mustertitel {
    display: inline-block;
    padding: 2px;
    width: 100px;
    margin: 0 5px 5px 5px;
}
.schluessel, .wert, .muster {
    border: 1px solid black;
}
.wert {
	box-shadow: 6px 6px 12px #45484f;
}
.muster {
	height: 20px;	
	padding: 0px;
	margin-top: 1px;
}
div#animation-img2 {
	display:none;
	width: 320px;
	height: 240px;
	}
/* Flipbox */	
.flip-box {
  background-color: transparent;
  width: 320px;
  height: 240px;
  perspective: 1000px;
  margin-top: 20px;
  overflow: hidden;
}
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-box-back {
  transform: rotateX(180deg);
}
#cccc {background-color:#cccccc;}
#cfff {background-color:#ffffff;}
#c000 {background-color:#000000;}
#c7A7A7A {background-color:#7A7A7A;}
#c3BEFEB {background-color:#3BEFEB;}
#c45484F {background-color:#45484F;}
#c444444 {background-color:#444444;}
#c444b7f {background-color:#444b7f;}
#c666 {background-color:#666666;}
#c8e8e8e {background-color:#8e8e8e;}
#cd9d9d9 {background-color:#d9d9d9;}
#cececec {background-color:#ececec;}
#cAB00FF {background-color:#AB00FF;}
#cf1f1f1 {background-color:#f1f1f1;}
#c5C009F {background-color:#5C009F;}
#cFF00DC {background-color:#FF00DC;}
#c68f8ec {background-color:#68f8ec;}
#cc5d3f7 {background-color:#c5d3f7;}
#cBFFAFF {background-color:#BFFAFF;}
#c2F3BBF {background-color:#2F3BBF;}

farbmuster.css

Wenn Sie bereits auf der HTML-Seite gewesen sind, können Sie hier mit der Gestaltung Ihrer ersten Webseite weitermachen. Kopieren Sie das oben abgebildete CSS und fügen Sie es in einen Texteditor ein. Nennen Sie die Datei "farbmuster.css" - (Ohne Anführungsstriche). Speichern Sie diese in demselben Ordner wie zuvor das HTML Danach rufen Sie die HTML-Datei in einem Webbrowser (z.B. FireFox, Chrom usw.) auf oder falls schon geschehen, aktualisieren Sie diese. Sie sehen nun die Wirkung von CSS.

Noch spannender wird die Seite mit "JavaScript". Möchten Sie von forne beginnen, hier geht es zum „HTML“.