»Einstieg in CSS« - Das neue Little Boxes

Der »Einstieg in CSS« bietet einen unterhaltsamen, leicht verständlichen Einstieg in das Erstellen und Gestalten von Webseiten mit HTML und CSS. Das Buch basiert auf »Das große Little Boxes-Buch« und wurde für diese Ausgabe komplett überarbeitet, aktualisiert und auf das für eine Einführung wirklich Wichtige komprimiert. 

Einstieg in CSS - Cover

Peter Müller
Einstieg in CSS
Webseiten gestalten mit HTML und CSS 

Galileo Computing · 487 Seiten · brosch.
29,90 Euro · ISBN 978-3-8362-2776-6

Das Buch bei Galileo Computing oder bei Amazon.
Der Kauf direkt beim Verlag ist für uns Autoren am besten. 

Auf der Verlagsseite zum Buch wird das Buch so beschrieben:

Die tausendfach bewährte CSS-Einführung - jetzt noch besser und aktueller! Seit seiner ersten Auflage 2006 hat dieses Buch von Peter Müller schon vielen, vielen tausend Lesern geholfen, CSS zu lernen und zu verstehen.

Der »Einstieg in CSS« ist also sozusagen »das neue Little Boxes«.

Die Leseprobe umfasst 46 Seiten und enthält Kapitel 2 "HTML und CSS im Schnelldurchlauf", Kapitel 9 "Das Box-Modell", Kapitel 20 "Media Queries", das Inhaltsverzeichnis und den Index.  

Und ein paar Errata gibt es auch.

Das sagen die Leser zu »Einstieg in CSS«

Aus den Rezensionen auf Amazon

"Uneingeschränkt empfehlenswert!"

"... absolut begeistert ..."

"Klare Kaufempfehlung"

"Sehr sehr gut!"

"Für mich das beste Buch zu diesem Thema"

"5 Sterne von mir, keine Frage"

Und Wolfgang Treß von textico.de schrieb: 

»Müller hat sein Fragen-Antwort-Know-How aus seinen Seminaren so aufbereitet, dass man ständig das Gefühl hat, er beantwortet Fragen, bevor sie einem einfallen. Das macht sein Einstieg in CSS zu einem Praxislernbuch ohne Widerstand mit viel Spaß und äußerst effektivem Wissenstransfer.«

Vielen Dank an alle Leser für Ihr Feedback. 

Aus dem Vorwort

Die Idee zu diesem Buch entstand, nachdem die Teilnehmer in zahlreichen Seminaren letztlich immer wieder über dieselben Steine stolperten. Diese Steine werden im Buch aus dem Weg geräumt, wobei Theorie und Praxis zu einem leicht verdaulichen Ganzen gemischt werden: 

  • In »ToDo«-Kästchen gibt es zahlreiche praktische Übungen. Darin entsteht nach und nach eine kleine Website, die als Anregung für eigene Ausflüge gedacht ist.
  • Zwischendurch werden wichtige Konzepte wie Spezifität, Box-Modell, Kaskade und Vererbung auf leicht verständliche Weise erklärt, damit Sie nicht nur Schritt-für- Schritt-Anleitungen nachklicken, sondern CSS wirklich verstehen lernen.

Anders ausgedrückt: Wenn Sie die ToDo-Kästchen abarbeiten, bekommen Sie ein brauchbares Ergebnis, wenn Sie den Text dazwischen lesen, wissen Sie auch warum. 

Für wen ist dieses Buch

Die einzigen Voraussetzungen zur Lektüre dieses Buches sind Interesse am Erstellen von Webseiten und Spaß am Lernen. Sie sollten idealerweise keine Angst vor Quelltext haben und sich bei einer hexadezimalen Farbangabe wie #f3c600 nicht erschrecken. Unter anderem ist dieses Buch gedacht für:

  • Einsteiger, die sich dafür interessieren, wie Webseiten von Hand gebaut werden.
  • Webdesigner, die eine kompakte, strukturierte Einführung in CSS gebrauchen können, weil sie keine Lust mehr auf Trial and Error haben
  • Nutzer von Content-Management-Systemen wie WordPress, Contao, Joomla!, Drupal, TYPO3 oder anderen, die das CSS in ihren Themes, Templates und Layouts verstehen und anpassen möchten
  • Programmierer, die ein mediengerechtes Frontend für ihre serverseitigen Skripte erstellen möchten

Dieses Buch vermittelt Ihnen ein solides Grundwissen zu HTML und CSS, mit dessen Hilfe Sie die zahllosen Beispiele im Web und in anderen Büchern besser verstehen können.

Teil I: Die Einleitung

Schnelldurchlauf HTML und CSS

Die Reise beginnt mit einer Einführung und einem schnellen Kennenlernen:

  • Kapitel 1 – Das Web ist nicht aus Papier 

    Papierdenken führt bei Webseiten zu enttäuschten Erwartungen. In diesem Kapitel erfahren Sie, was Web und Print unterscheidet. 

  • Kapitel 2 – HTML und CSS im Schnelldurchlauf 

    In diesem Kapitel wird auf wenigen Seiten das Grundprinzip der Zusammenarbeit von HTML und CSS gezeigt. Dabei werden auch gleich unverzichtbare Werkzeuge vorgestellt: die Entwickler-Tools im Browser. 

Nach dieser Einführung haben Sie das Wichtigste über das Webdesign bereits gelernt: Sie haben keine Kontrolle über das Aussehen der Webseiten beim Benutzer. 

Teil II: HTML-Crashkurs – Kästchen erstellen

Layoutbereiche erstellen

Das Fundament ist mit der Auszeichnung der Inhalte mit modernem HTML5 gelegt, und in diesem Abschnitt geht es um die Gestaltung dieser Inhalte:

  • Kapitel 3 – Das HTML-Grundgerüst

    Worin man erfährt, dass HTML dem Etikettenkleben dient und ein solides Grundgerüst das Skelett einer jeden Webseite bildet.

  • Kapitel 4 – HTML-Elemente für Überschriften, Text und Listen

    Zunächst lernen Sie die wichtigsten HTML-Elemente kennen, erstellen Layoutbereiche und ein sinnvoll strukturiertes HTML-Dokument. Überschriften, Absätze und Listen. 

  • Kapitel 5 – HTML-Elemente für Links, Bilder und mehr 

    Weitere HTML-Elemente zur Erstellung von Hyperlinks, zum Einbinden von Grafiken und sowie das Wichtigste zu Sonderzeichen. 

  • Kapitel 6 – Das HTML für die Beispielseiten

    Die vorhandene Seite wird validiert, eine zweite Seite erstellt und beide mit einem geliehenen Stylesheet formatiert.

Am Ende dieses Teils haben Sie eine kleine Beispielsite mit sinnvollem HTML und einer funktionierenden Navigation, die in den folgenden Kapiteln per CSS gestaltet wird. 

Teil III: CSS-Grundlagen - Kästchen gestalten

Das Box-Modell für Blockelemente

In diesem Teil geht es um die Grundlagen von CSS. Das ist der zentrale Teil des Buches, in dem die wichtigsten Grundlagen Schritt für Schritt vermittelt werden:

  • Kapitel 7 – CSS kennenlernen – Schriften, Farben und Hyperlinks

    Text formatieren, Farben definieren und Hyperlinks gestalten. Die Webseiten verändern sich langsam aber sicher. Hintergrund und Kopfbereich werden farbig und der Fußbereich wird gestaltet.

  • Kapitel 8 – Selektoren, Einheiten und Farben

    Ein bisschen Theorie: Die wichtigsten Selektoren, Details zur Spezfität von Selektoren, mögliche Einheiten wie px, em und % und mögliche Farbwerte wie hexadezimal, Prozent, Farbnamen und dergleichen. 

  • Kapitel 9 – Das Box-Modell 

    Das klassische Box-Modell mit padding, border und margin, das Wichtigste zum Einbinden von Hintergrundgrafiken und ein Exkurs zu den Auswirkungen von »collapsing margins«. 

  • Kapitel 10 – Ordnung halten in den Stylesheets

    Das Stylesheet wird langsam aber sicher unübersichtlich, also gibt es in diesem Kapitel Anregungen zur Organisation der Styles und Hinweise auf Kurzschreibweisen. Anschließend werden die Styles auf mehrere kleine Stylesheets verteilt und zentral eingebunden. 

  • Kapitel 11 – Eine horizontale Navigation per »display:inline«

    Sie erstellen eine horizontale Navigation mit Tabs, erfahren die Details zum Box-Modell für Inline-Elemente und bekommen einiges an Know-how zum Thema "Whitespace".  

Der Zeilenabstand im Seiteninspektor
  • Kapitel 12 – Ein Kontaktformular erstellen 

    HTML-Formulare kennenlernen, ein Kontaktformular erstellen, gestalten und aktivieren. Zum Abschluss erstellen Sie ein mehrspaltiges Kontaktformular mit display:inline-block. 

  • Kapitel 13 - HTML-Tabellen erstellen und gestalten 

    HTML-Tabellen zur Darstellung tabellarischer Daten erstellen und anschließend gestalten. 

  • Kapitel 14 - Fließtext, Webfonts und Druckversion 

    Gestaltung des Fließtextes, Google Fonts, Erstellung eines Druckstylesheets und Favicon einbinden

  • Kapitel 15 - Kaskade, Vererbung oder Standardwert 

    Die Webseite aus Sicht eines Browsers, der auf der Suche nach der richtigen Formatierung für HTML-Elemente diese drei Konzepte anwendet. 

Am Ende von Teil III sind die Beispielseiten funktional gestaltet, aber der Inhaltsbereich ist noch einspaltig. 

Teil IV: CSS-Positionierung – Kästchen verschieben

Horizontale Navigation mit float

Nach dem Erstellen und dem Gestalten der rechteckigen Kästchen, lernen Sie in diesem Abschnitt, wie man sie auf der Webseite verschieben kann:

  • Kapitel 16 – Kästchen verschieben mit »position« 

    Die Kästchen auf einer Webseite folgen einem natürlichen Flow, der mit der Eigenschaft position manipuliert werden kann: static, relative, absolutefixed und z-index.

  • Kapitel 17 – Kästchen verschieben mit »float« und »clear« 

    Grafiken floaten und vom Text umfließen lassen, Schwebezustand per clear beenden und Übungen zum Floaten mit mehreren Boxen. 

  • Kapitel 18 – Containing Floats - gefloatete Elemente umschließen 

    In diesem Kapitel lernen Sie fünf verschiedene Lösungen für das wichtigste Problem beim Layouten mit Floats kennen: Wie man dafür sorgt, dass gefloatete Elemente von Elternelementen umschlossen werden. 

  • Kapitel 19 – Eine floatbasierte horizontale Navigation 

    Die Anwendung von Floats für eine horizontale Navigation. Nebenbei erfahren Sie, wie man CSS-Sprites in der Praxis einsetzt. 

Nach den in diesem Teil erlernten Grundlagentechniken geht es im nächsten Teil weiter mit deren Anwendung bei mehrspaltigen Layouts. 

Teil V: Mehrspaltige Layouts mit CSS

Die Beispielseiten - mobil und auf dem Desktop

Nach dem Erstellen und dem Gestalten der rechteckigen Kästchen, lernen Sie in diesem Abschnitt, wie man sie auf der Webseite verschieben kann:

  • Kapitel 20 – Media Queries - eine mobile Version erstellen  

    Die Beispielseiten werden für eine Darstellung auf kleinen Bildschirmen optimiert und anschließend mit einer Media Query wieder fit für große Bildschirme gemacht. 

  • Kapitel 21 – Zweispaltiges Layout mit »float« und »margin« 

    Nachdem Sie erfahren, dass Mehrspaltigkeit in CSS eigentlich eine Illusion ist, erstellen Sie ein klassisches, zweispaltiges Layout. Zunächst mit festen Pixelbreiten und dann flexibel mit Prozentwerten. Zum Abschluss gibt es Know-how über die globale Wirkung von clear und ein Prinzip namens »Block Formatting Context«.

  • Kapitel 22 – Weitere mehrspaltige Layoutmethoden

    Zunächst erstellen Sie ein dreispaltiges Layout mit einer zusätzlichen Infospalte. Anschließend tauschen die Layoutspalten am Bildschirm ihre Plätze und zum Abschluss bauen Sie ein dreispaltiges Layout mit negativem Margin, bei dem die mittlere Layoutspalte im Quelltext von den Sidebars steht. 

  • Kapitel 23 - Patchwork - Flicken im CSS 

    Das Wichtigste über Patches, Conditional Comments und ältere Internet Explorer. 

Am Ende dieses Teils können Sie mehrspaltige, floatbasierte Layouts in verschiedenen Variationen erstellen. 

Teil VI: Tipps und Tricks

Den Abschluss des Buches bilden zwei Kapitel mit verschiedenen Tipps und Tricks:

  • Kapitel 24 – Suchfunktion, Dropdown und HTML5 

    In diesem Kapitel werden die Beispielseiten abgerundet, in dem Sie die horizontale Navigation um eine Suchfunktion ergänzen und anschließend zu einem Dropdown-Navigation erweitern. Zum Schluss erfahren Sie das Wichtigste über die neuen HTML5-Elemente und wie Sie diese am besten einsetzen können. 

  • Kapitel 25 – Nützliche Programme und Websites 

    Infos zu Browsern, Add-ons, Editoren für HTML und CSS, FTP-Programme, Grafikbearbeitung und Referenzen zu HTML und CSS. 

That's it. Auf knapp fünfhundert Seiten haben Sie die Grundlagen zur Gestaltung von Webseiten per CSS gelernt und wissen jetzt genug, um selbst weiter zu lernen. Aber das »Abenteuer Webdesign« fängt für Sie jetzt erst wirklich an, denn Webworker lernen nie aus.

 

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.