"Pfeile" oder "Störer" lassen sich einfach per CSS mit einem geschickten border realisieren. Das Beispiel der Klasse nachunten zeigt einen 20px großen Pfeil der nach unten zeigt. Ggf. den Pfeil absolute positionieren, damit er "überlappt" oder wenn er auf eine bestimmte Position zeigen soll (entsprechend left und top verwenden). Ein Beispiel für die Verwendung solcher Pfeile finden Sie im Beitrag Schöne Tooltip-Einblendunge mit CSS (ohne Javascript). .nachunten {    border-top: 20px solid #f00;   /* roter Pfeil */    border-left: 20px solid transparent;    border-right: 20px solid transparent;    /* position: absol ... mehr

Nachfolgend ein Beispiel für die Anwendung von Media Queries.  Der Codeauszug zeigt wie für unterschiedliche "Fensterbreiten" unterscheidliche CSS-Stile definiert werden können. Für Medien, denen nur maximal 480px zur Verfügung stehen (oder die Fensterbreite wird entsprechend verkleinert oder vergrößert) wird der Text in "rot" angezeigt. Für Medien größer 480px aber maximal 600px in "blau", größer 600px aber maximal 800px in "pink", etc. ... <style type="text/css">    @media (max-width: 480px) {      body { color: red; }    }    @media (min-width: 481px) and ... mehr

Durch die CSS-Angabe input {    color: #f00; } werden alle input-Elemente mit dem Color-Attribut - wie in diesem Beispiel mit einer roten Schrift-  angezeigt. Sollen verschiedene "Typen" der input-Elemente unterschiedlich gestaltet werden, können Klassen oder Individual-Formate (id) verwendet werden. Einfacher ist es für bestimmte input "Typen" eigenen Formate anzugeben: input[type="submit"] {    color: red; } input[type="text"] {    color: blue; } Im Beispiel wird der Submit-Button (type="submit") in rot, die ´Text-Felder (type="text") mit einer blauen Schrift angezeigt. So lassen sich für alle input-Elemente einfach eigene Fo ... mehr

Einige Browser (Safari, Chrome, etc.) heben ein Eingabefeld (input und textarea) eigenständig hervor (anders farbigen Border). Dieses lässt sich wie folgt abstellen: input, textarea {    outline: none; }

CSS-Dateien können über media dem Ausgabemedium zugeordnet werden. So wird die nachfolgende CSS-Datei nur für die Bilschirmausgabe (screen) verwendet. <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> Wird die Webseite ausgedruckt, werden keinerlei CSS-Eigenschaften verwendet. Der Ausdruck erfolgt ohne CSS, da die obige CSS nur bei einem Ausgabemedium screen Anwendung findet. Mit <link rel="stylesheet" href="style.css" type="text/css" media="all" /> wird der Style auf alle Ausgabemedien, also auch auf die Druckerausgabe angewendet. Möchte man unterschiedliche "Design" für den Bildschirm oder Drucker verwenden, k&o ... mehr