Tutorials CSS3

Alle Tutorial können zur privaten Nutzung kopiert bzw. benutzt werden. Bei kommerzieller Nutzung MUSS ein Hinweis zu kanedesign.de vermerkt werden!

Was ist CSS - Cascading Style Sheets

Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für gestufte Gestaltungsbögen), kurz CSS genannt, ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und DOM eine der Kernsprachen des World Wide Webs. Sie ist ein so genannter „living standard“ (lebendiger Standard) und wird vom World Wide Web Consortium (W3C) beständig weiterentwickelt. Mit CSS werden Gestaltungsanweisungen erstellt, die vor allem zusammen mit den Auszeichnungssprachen HTML und XML eingesetzt werden.

Quelle: wikipedia.org

CSS Validation Service

Um zu Prüfen, ob der Code fehlerfrei läuft, kann man ihn über einen Service Prüfen lassen. Hierfür den kompletten CSS Code kopieren und auf folgender Seite in das Feld einfügen

CSS Validator: CSS Validation Service

06.03.2017 // Übersicht Abständenext

Eine bildliche Darstellung der einzelnen Abstände der Bereiche.

06.03.2017 // CSS Cheat Sheet Kommentarnext

Ein Kommentar beginnt mit /*, dann der Kommentar und endet mit */.

Also: /*Kommentar*/

06.03.2017 // CSS Cheat Sheet Rahmennext

Rahmen als Cheat Sheet für CSS.

Tag Beschreibung Definition
border Rahmen, Stärke und Farbe 1px oder em solid black
border dünner, gepunktet thin dotted
border gestrichel dashed
border-top Rahmen oben 1em solid #000
border-right Rahmen rechts 1em solid #000
border-bottom Rahmen unten 1em solid #000
border-left Rahmen links 1em solid #000
border-weight Rahmenstärke px, em
border-style Rahmenstil solid
border-color Rahmenfarbe black, #000

06.03.2017 // CSS Cheat Sheet Außenabstandnext

Außenabstand als Cheat Sheet für CSS.

Tag Beschreibung Definition
margin keiner 0
margin oben/unten und rechts/links 2px 4px
margin oben unten rechts links 2px 1px 4px 5px
margin-top Absatnd oben px, %, em
margin-right Absatnd rechts px, %, em
margin-bottom Absatnd unten px, %, em
margin-left Absatnd links px, %, em

06.03.2017 // CSS Cheat Sheet Innenabstandnext

Innenabstand als Cheat Sheet für CSS.

Tag Beschreibung Definition
padding keiner 0
padding oben/unten und rechts/links 2px 4px
padding oben unten rechts links 2px 1px 4px 5px
padding-top Absatnd oben px, %, em
padding-right Absatnd rechts px, %, em
padding-bottom Absatnd unten px, %, em
padding-left Absatnd links px, %, em

06.03.2017 // CSS Cheat Sheet Textformatierungnext

Textformatierung als Cheat Sheet für CSS.

Tag Beschreibung Definition
font-family Schriftart Arial
font-family serifenlose Schrift sans-serif
font-size Schriftgröße (Punkt) pt
font-size Schriftgröße (Pixel) px
font-size Schriftgröße (realtiv zur Grundgröße) %
font-style Schriftstil (Standard) normal
font-style kursiv italic
font-style schräg oblique
font-weight Schriftstärke (dünn) lighter
font-weight Standard normal
font-weight Fett bold
font-weight Fetter bolder
line-height Zeilenhöhe normal, pt, px, %, em
letter-spacing Zeichenabstand normal
letter-spacing Zeichenabstand relativ zum Elternelement em
text-align Ausrichtung links left
text-align Ausrichtung right rechts
text-align Ausrichtung mittig center
text-align Blocksatz justify
text-decoration Schriftauszeichnung none
text-decoration unterstrichen underline
text-decoration durchgestrichen line-through
text-indent Einrückung em, %
text-transform Textauszeichnung none
text-transform Kapitälchen capitalize
text-transform Großbuchstaben uppercase
text-transform Kleinbuchstaben lowercase

06.03.2017 // CSS Cheat Sheet Farbenext

Farbe als Cheat Sheet für CSS.

Tag Beschreibung Definition
color Textfarbe black
color Hexadezimaler Farbwert #000, #010101
color RGB Farbwert rgb(0,-25,50)

06.03.2017 // CSS Cheat Sheet Floatingnext

Floating als Cheat Sheet für CSS.

Tag Beschreibung Definition
float Standard none
float Element steht links und wird rechts umflossen left
float Element steht rechts und wird links umflossen right
clear Standard none
clear Aufhebung des Umfließens links left
clear Aufhebung des Umfließens rechts right
clear Aufhebung beidseitiges Umfließen both

31.01.2017 // CSS Cheat Sheet Abmessungennext

Abmessungen als Cheat Sheet für CSS.

Tag Beschreibung Definition
height Höhe (Standard) auto, px, %, em
min-height minimale Höhe auto, px, %, em
max-height maximale Höhe auto, px, %, em
width Breite auto, px, %, em
min-width minimale Breite auto, px, %, em
max-width maximale Breite auto, px, %, em

top, bottom, left, right werden nur bei position: relative, absolute und fixed beachtet.

31.01.2017 // CSS Cheat Sheet Positionierungnext

Positionierung als Cheat Sheet für CSS.

Tag Beschreibung Definition
position Standard static
position relativ zur ursprünglichen Position relative
position abhängig vom Elternelement absolute
position abhängig vom Browserfenster fixed
top Oben auto, px, %, em
bottom Unten auto, px, %, em
left Links auto, px, %, em
right Rechts auto, px, %, em

21.01.2017 // Attribut Klassen und IDend

In CSS gibt es 2 Attribute um Elemente anzusprechen. Im HTML-TAG werden diese mit class="klassennname" und id="idname" angesprochen. Man spricht auch von Klassen-Selektor und ID-Selektor.
Klassen werden in CSS immer mit einem . und IDs mit einer # dargestellt.
Klassen können mehrere Elemente ansprechen, wobei IDs immer einmalig pro HTML Seite vorkommen dürfen.

Warum diese Unterscheidung? Zunächst ist es für die Übersicht in der CSS Datei von Vorteil aber der Hauptgrund ist, dass IDs mehr "Gewicht" als die Klasse haben. Also Raute (#) vor Punkt (.). Merken kann man sich das ganz gut, indem man die Mathe Regel "Punkt vor Strich" umkehrt.

Tag Beschreibung Definition
class Klasse (mehrfach im Dokument) .
id ID (einmalig im Dokument) #

In diesem Beispiel "gewinnt" rot, da es eine ID ist:

<style>
.schwarz {
color:#000;
}
#rot {
color:#F00;
}
</style>
<p class="schwarz" id="rot">Dieser Text ist rot</p>

Diese Kombination würde man natürlich nicht anwenden, sie dient nur als Beispiel!