Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 04. Juni 2019

CSS für Anfänger – erste Schritte

Möchtest Du mehr Einfluss auf das Design Deiner Website nehmen? Oder das Design durch ein Stylesheet zentral festlegen? CSS ermöglicht Dir genau das und kann zusätzlich noch die Ladezeit Deiner Website reduzieren, weil das Stylesheet nur einmal geladen werden muss.

Während HTML eine Markup-Sprache ist – das heißt, sie beschreibt die Struktur einer Website – ist CSS eine Stylesheet-Sprache; sie beschreibt den Stil, das Design der Website.

CSS (die Abkürzung steht für „Cascading Style Sheets“) erlaubt feinere Designanpassungen als pures HTML – wie etwa Zeilenabstände, Eckenrundungen oder Schlagschatten, die in HTML nicht möglich sind. Die Schriftgröße zum Beispiel ist in HTML auf 7 Stufen eingeschränkt, während Dir in CSS keine Grenzen gesetzt sind.

Layout in HTML festlegen

Du beginnst mit einer simplen Website:

<html>

<body>

<p>Hallo Welt!</p>

</body>

</html>

Speichere den Code als HTML-Datei ab und öffne die Datei im Browser.

Die Website enthält den Satz „Hallo Welt!“, schwarz auf weißem Grund in der Schriftart „Times“. Das sind die Grundeinstellungen des Browsers, die er verwendet, wenn er keine Designanweisungen von Dir erhält.

Design anpassen mit CSS

Jetzt fügst Du Dein erstes CSS in den p-Tag ein:

<html>

<body>

<p style=“font-family: Arial; font-size: 30px; color: blue;“>Hallo Welt!</p>

</body>

</html>

Speichere Deine Änderungen und aktualisiere die Website im Browser.

Die Schrift ist nun blau, 30 Pixel hoch und in der Schriftart „Arial“. Diese 3 Änderungen  – Farbe, Größe, Schriftart – sind in CSS übersetzt color, font-size und font-family. Die Syntax für CSS sieht immer so aus:

Eigenschaft : Wert ;

Gängige CSS Eigenschaften

Mit font-family wählst Du die Schriftart aus, das ist die Eigenschaft. Bedenke dabei nur Schriften zu verwenden, die auf den meisten Computern dieser Welt installiert sind. Das sind zum Beispiel „Arial“, „Times“, oder „Courier“– aus Sicht von CSS ist das der Wert. Wenn Du die Website nur für Dich selbst baust, kannst Du natürlich jede Schrift wählen, die auf Deinem Computer installiert ist.

Der Befehl font-size stellt die Schriftgröße ein. In diesem Fall auf den Wert 30px. „px“ ist die Einheit für Pixel. Andere Einheiten sind zum Beispiel „cm“ für Zentimeter oder „pt“ für Points, was der Einheit aus Programmen wie Word entspricht.

Der dritte Befehl color färbt den Text ein. Die Farbnamen sind englisch und Dir bereits aus HTML bekannt. Alternativ kannst Du Farben auch über den Hex-Code (Blau = #0000FF) oder mit RGBA-Werten definieren: rgba(0, 0, 255, 0.5). RGBA sind die 3 Grundfarben Rot, Grün und Blau plus ein Wert für die Transparenz. Rot, Grün und Blau werden mit Zahlen zwischen 0 (= 0% von dieser Farbe) und 255 (= 100% von dieser Farbe) definiert. Die Transparenz wird über eine Kommazahl zwischen 0 und 1 ausgedrückt, wobei 0 komplett transparent bedeutet und 1 komplett undurchsichtig. Bitte beachte: Im Englischen wird der Punkt statt des Kommas verwendet. Du musst also 0.5 schreiben, nicht 0,5.

Wenn Du keine Transparenz benötigst, kannst Du diese Angabe auch weglassen und nur rgb(0, 0, 255) schreiben.

Nützliche Ressourcen im Web

In diesem Tutorial können wir unmöglich alle Eigenschaften behandeln. Deshalb empfehlen wir Dir diese 3 Hilfsmittel, wenn Du weitere Befehle kennenlernen möchtest:

1. Entwicklerkonsole

Jeder moderne Browser hat einen speziellen Modus für Entwickler. In Firefox öffnest Du diesen mit einem Rechtsklick auf irgendein Bild oder eine Textpassage in der Website und wählst im Kontextmenü den Punkt „Element untersuchen“ aus. Dort kannst Du Dir für jedes Element  den zugehörigen Style ansehen und auch probeweise verändern. Der Browser kennt alle verfügbaren Eigenschaften für ein Element und hilft bei der Eingabe mit Textvervollständigung.

2. http://css3generator.com/

Der Generator erstellt bequem die gewünschten Styles. Du musst nur kopieren und einfügen.

3. https://wiki.selfhtml.org/wiki/CSS

Die Wikipedia für HTML, CSS und Javascript ist gerade für Anfänger unentbehrlich.

Gestalte Deine eigene Website

Hast Du Lust bekommen, eine eigene Website mit HTML und CSS zu gestalten? Oder möchtest Du CSS nutzen, um Deine Gestaltungsmöglichkeiten bei WordPress voll auszuschöpfen?

Finde hier das richtige Hosting-Paket

Sommer-Aktion bei STRATO

Unsere Sommer-Aktion bringt Dir alle zwei Wochen eine Welle mit einem neuen Angebot für das Paket Hosting-Basic. Aktuell bekommst Du das Paket vergünstigt mit einer zusätzlichen SSL Flat – bis zur nächsten Welle am 16.06.

Zur Sommer-Aktion
Tags: Code · Website

Der Autor:

Autor: Oliver Meiners

Hallo, ich bin Oliver und Online-Redakteur bei STRATO.

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen