CSS 1 2 Grundlagen Tipps Bausteine Farben Links

CSS - steht für Cascading Style Sheet und ist eine unabhängige Formatierungssprache.
Der Standard CSS, bringt sehr viele Vorteile mit sich. Der HTML-Umfang wird nicht mehr ausgebaut, sondern es lässt sich auch die Dateigröße der HTML-Dokumente drastisch verringern.

Außerdem lässt sich das Erscheinungsbild einer oder mehrere Seiten, mit einer externen CSS-Datei, in Sekundenschnelle ändern. CSS ermöglicht es zudem Stylesheets für unterschiedliche Medien zu erstellen, wie etwa den Ausdruck der Seite oder die Darstellung in einem mobilen Endgerät.

[Bildschirmfoto / Grafik]
 CSS im Einsatz

Mit CSS haben Sie ungeahnte Möglichkeiten, die normal nie zu realisieren wären. CSS bietet nicht nur vielerlei Gestaltungsmöglichkeiten, auch die Handhabung der Seiten wird verbessert. Änderungen und Variationen lassen sich einfacher durchführen.

Um nun die CSS-Anweisungen richtig einsetzen zu können finden sich dazu zahlreiche Dokumentationen im Web. Das bekannte deutsche selfHTML , das englischsprachige w3schools.com und das Mozilla Developer Network.

• In der Linkliste finden Sie weitere Links zum Thema CSS.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.

Grundlagen

Externe Seitenformatierung mit CSS Tutorial ✶✶✶✶
Ein kompletter Webauftritt lässt sich so, optisch mit wenigen Klicks und Einträgen verändern.
Textgestaltung mit CSS Tutorial ✶✶✶
Mit CSS ist ein Text schnell formatiert. Eine Anleitung zur Textgestaltung mit CSS und mit vielen Beispielen dazu.
Textgestaltung mit CSS
Fehler im HTML- und CSS-Quelltext erkennen und validieren ✶✶✶
Leider werden Fehler in HTML oder CSS oft nicht im Browser angezeigt. Die Browser überbügeln viele Fehler d.h. die Browser sind auf den Kompatibilitätsmodus „Quirks” eingestellt. Und dieser lässt fast jede Sünde des Webmasters durch.
CSS Hyperlinks Tipp ✶✶✶✶
Hier finden Sie viele Beispiele wie Sie Hyperlinks, mit Hilfe von CSS verändern können.
CSS Hyperlinks
Mauszeiger
Auch der Mauszeiger kann verändert werden. Der Code kann auf alle Elemente, egal ob Tabellen, Links, Grafiken, Textblöcke oder eine ganze Seite angewendet werden.
Mauszeiger
Umrechnungstabelle für CSS-Schriftgrößen

Tipps

Hier finden Sie nützliche und interessante CSS-Beispiele. Diese müssen eventuell den eigenen Wünschen angepasst werden, dazu sind allerdings Kenntnisse in CSS notwendig!

Tag und Nachtmodus für Webseiten Neu Tutorial
Wechseln Sie mit CSS und JavaScript zwischen einem dunklen und einem hellen Modus.
Tag und Nachtmodus für Webseiten
CSS-Sprites einfach erstellen ✶✶✶
CSS-Sprites werden dort benutzt, wo es um feste grafische Bestandteile geht. In der Navigation und bei sonstigen wiederkehrenden Seitenbestandteilen wie Logos, Linien, RSS-Icons und so weiter.
Das Hintergrundbild richtig in Position setzen Tutorial ✶✶✶
Oft möchte man das Hintergrundbild an eine bestimmte Position ausrichten oder eine Hintergrundfarbe / Farbverlauf hinzufügen, wie so etwas gemacht wird zeigt dieser Artikel.
Das Hintergrundbild richtig in Position setzen
Seiten druckfrisch gestalten ✶✶✶✶
Mancher Besucher einer Website möchte eine bestimmte Seite ausdrucken, auf dem Papier stören dann Elemente wie Werbung, Navigationsleisten, großflächige Design-Elemente oder andere Elemente. Wie Sie diese vor dem drucken "wegzaubern" erfahren Sie hier.
Seiten druckfrisch gestalten
Responsives Design ✶✶✶✶
Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.
Bilder mit Hover-Effekt Tipp ✶✶✶✶
Mit CSS können Sie einem transparenten Bild (GIF oder PNG-Format) eine andere Hintergrundfarbe geben. Fährt man mit dem Mauszeiger über das Bild, so ändert sich die Hintergrundfarbe zum Beispiel: von Schwarz in Gelb.
Bilder mit Hover-Effekt
Rahmen für Bilder und Text erstellen Tutorial ✶✶✶✶
Die CSS-border Eigenschaft legt den kompletten Rahmen eines Elementes fest.
Fehlt ein Rahmen an einem Bild oder um einen Text? So schnell und einfach fügen Sie einen hinzu.
Rahmen für Bilder und Text erstellen

CSS-Bausteine (Alphabetische Sortierung)  Alle Anzeigen

A  B  C  D  E  F  G  H  K  L  M  N  P  R  S  T  U  V  W 
    A
  1. Abschnitt festsetzen
  2. Animationen mit Keyframes
  3. Animierte Box mit Keyframes
  4. Aufzählungslisten einfärben
  5. B
  6. Beschriftungen und Formularfelder gleichmäßig untereinander setzen Neu
  7. Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)
  8. Bild mit Impuls
  9. Bild vergrößern mit dem „Checkbox Hack”
  10. Bilder-Farbrotation mit Gradient Neu
  11. Bilder in einem Formular auswählen
  12. Blinkende Inhalte mit Keyframes
  13. Button Glas-Effekte
  14. C
  15. Container horizontal drehen
  16. Container mit Eselsohren
  17. Container vertikal drehen
  18. CSS-Variablen
  19. D
  20. Datum als Kalenderblatt darstellen
  21. Diagonaler Streifen-Effekt Neu
  22. DiscoLights - Box-Shadow Animation
  23. E
  24. Eingabefelder und Buttons formatieren
  25. Elemente ab einer bestimmten Fensterbreite ausblenden
  26. Externe URL des Hyperlinks sichtbar machen
  27. F
  28. Farbige Scrollleiste
  29. Fehleingaben in Formularen mit CSS hervorheben
  30. G
  31. Glühende Neon Buchstaben Neu
  32. H
  33. Hintergrundbild absolut positionieren
  34. Hintergrundbild mit Zoom Funktion
  35. HTML-Elemente als Tabelle formatieren
  36. K
  37. Kalender Symbol neben dem Datepicker
  38. Kompass-Animation
  39. Krieg der Sterne Neu
  40. L
  41. Ladeanimation ohne Bild-Grafik
  42. Leuchtende blaue Eingabefelder
  43. Lightbox
  44. Link farbig unterstreichen
  45. Link zum Seitenanfang setzen
  46. M
  47. Markieren von Text verhindern
  48. Markierte Checkbox farbig hervorheben
  49. Mit import mehrere CSS-Dateien zusammenfassen
  50. Mit ::selection markierten Text hervorheben
  51. Modal-Fenster mit HTML5 und CSS
  52. N
  53. Navigation mit :target auf und zumachen
  54. Nur gefüllte Tabellenzellen hervorheben
  55. P
  56. Parallax Scrolling-Effekt
  57. Pflichtfeld hervorheben
  58. Pop-up-Bucheffekt
  59. Position Sticky in einer HTML Tabelle
  60. R
  61. Regenbogen Text
  62. S
  63. Sternebewertung
  64. T
  65. Tabellenzeilen bei :hover hervorheben
  66. Tabellenzeilen einfärben
  67. Tastenkombinationen darstellen
  68. Text mit gestreiftem Hintergrund
  69. Texteingabe nur in Großbuchstaben
  70. Tooltip per CSS anzeigen
  71. Transparenter Farbverlauf
  72. U
  73. Uhrzeitanzeige mal anders!
  74. V
  75. Vertikale Schrift
  76. Vertikaler Text mit horizontalen Buchstaben
  77. Verwendung von Datenattributen (data-*)
  78. W
  79. Wasserzeicheneffekt - Hintergrundbild fixieren
  80. Wertigkeiten verändern mit der !important-Regel

Animierte Sternebewertung für Formulare
Container horizontal drehen
Ladeanimation
Position Sticky in einer HTML Tabelle
Krieg der Sterne

Farben

Farblehre - Gestalten mit Farbe ✶✶✶✶ - Dieser kleine Exkurs in die allgemeine Farblehre erscheint sinnvoll, da zu einer gut gestalteten Webseite nicht nur die Beherrschung von HTML-Tags gehört, sondern auch die Kenntnis einiger Gestaltungsmittel, um eine beabsichtigte Wirkung bewusst zu erzielen.

Farben

Farben und ihre Wirkung - Farben wecken unterschiedliche Assoziationen.

Haupt- und Grundfarben - Die 3 Hauptfarben, Browser Standard-Farben und die 16 Grundfarben.
Farbnamen, Hexadezimal, Dezimal, Prozent und Negativ ✶✶✶✶

Farbfamilie, Erweiterte Farbnamen, Farben sortiert
Beispiele für Farbkombinationen - Unleserliche Farbkombinationen, Farbkombinationen mit schwarzer Textfarbe und Farbkombinationen mit weißer Textfarbe.
Helle Farben, Weiche Farben, Weiche Farben und Regenbogen Farben
Farbkennwörter - Diese Farben zeigen Ihre PC-Farbeinstellung an.

Farbverlauf mit CSS Tipp
Mit der CSS3 Eigenschaft Gradient mit seinen Ausrichtungen (linear, radial, conic) gibt es endlich die Möglichkeit, Farbverläufe bei der Umsetzung nicht mehr nur mittels Grafiken in die CSS-Dateien einbinden zu müssen.
Farbverlauf mit CSS
Farbverlauf Generator
Für das Design einer Webseite ist die Farbwahl ausschlaggebend. Abhängig vom Thema der Homepage oder vom Logo verwenden Sie Farben am besten in Farbabstufungen. Dieser Generator erstellt einen Farbverlauf mit den von Ihnen eingegebenen Farbwerten.
Farbverlauf Generator

Block-Schatten Generator / Text-Schatten Generator
Einfaches erstellen von CSS-Schatten. Schatten sind eine gute Möglichkeit einzelne Elemente aus dem Fluss der Website speziell hervorzuheben oder um einfach einen dreidimensionalen Effekt zu erhalten.

Block-Schatten Generator / Text-Schatten Generator
Backdrop-Filter
Mit der CSS-Eigenschaft für Hintergrundfilter (Backdrop-Filter) können Sie grafische Effekte wie Unschärfe oder Farbverschiebung auf den Bereich hinter einem Element anwenden.
Backdrop-Filter
developer.mozilla.org ✶✶✶✶✶
Cascading Style Sheets, meistens als CSS abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in HTML oder XML formatierten Datei (inklusive verschiedener XML-Sprachen wie SVG oder XHTML) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.
mediaevent.de ✶✶✶✶✶
CSS, HTML und JavaScript
bjoernsworld.de ✶✶✶✶
CSS-Tutorial.
css3.info ✶✶✶✶
CSS3. Info - alles, was Sie jemals über CSS3 wissen müssen. (englisch)
thestyleworks.de
Demos mit CSS.
css-wiki.com
Dokumentation der CSS - Eigenschaften.
css-tricks.com
CSS-Tricks - Blog

Alle Links mit Bewertungen anzeigen
In die Linkliste eintragen

CSS - Seite: 1 2