Be KreaTief

CSS 101 Part I ✤

Hallo alle zusammen :)

Es gibt ja schon viele Tutorials hier, die spezifische Beispiele geben, was für Möglichkeiten CSS bietet, aber viele Leute sind dennoch nicht dazu im Stande eine eigene CSS zu schreiben, selbst etwas zu gestalten. In dieser Serie möchte ich euch CSS etwas näherbringen, bis ihr dazu im Stande seid selbst etwas zu gestalten.
Am besten lernt ihr CSS, wenn ihr euch ganz zu Beginn weg von Blogger bewegt, allgemein weg davon irgendetwas innerhalb einer Seite zu gestalten. Beginnt mit einfachen Elementen, die ihr gestalten könnt.
Für meine "CSS Übungen" verwende ich Dablett oder CodePen, dort könnt ihr schön eintippen und gleich das Ergebnis angucken. Und speichern geht auch, ohne Anmeldung. Das find ich immer gut, weil ich mich ungern überall anmelde.

Okay. CSS. What to know?

Was ist CSS

Cascading Style Sheets, kurz CSS ist eine Sprache mit der man HTML (/XML) Dokumente gestaltet. Die Grundidee dahinter ist, mittels HTML bloss das Formale zu machen, also die grunsätzliche Gliederung einer Seite. Mit CSS wird dem ganzen dann etwas mehr Individualität gegeben, die Seite bekommt das Styling. Schriftfarben, Hintergrundfarben etc.

Vorraussetzung

Ich muss es leider sagen: Basic HTML-Wissen.
Wenn ihr euch mit dem "Gerüst" von jeder Website nicht auskennt, dann könnte es schwer werden.
Ihr solltet wissen, was man unter den geläufigsten Tags versteht, beispielsweise wie ihr Links schreibt, Headings, Paragraphs, Spans, Container. Das alles sind die wichtigsten Voraussetzungen für die Anwendung von CSS.
Für den Anfang reicht es, wenn ihr folgendes wisst.

HTMLErklärung
<a href="URL">Angezeigter Link-Text</a>Link, der als Text angezeigt wird
<p>Absatz</p>Absatz
<span>Text</span>Text-container
<h1>Heading</h1>Heading 1. Ordnung
<li>Listenelement</li>Listenelement
<ul>Listencontainer</ul>Listencontainer, enthält Listenelemente
<div>Container</div>Div-Container, sehr wichtig!
Und wie das alles ganz ohne CSS aussieht, könnt ihr euch hier ansehen. Das meiste davon seht ihr nicht. Die Span, Paragraph, UL und DIVs werden nicht sichtbar, solange wir das nicht wollen. Aber sie geben uns die Möglichkeit zur Gestaltung.
Wenn wir allgemein gestalten wollen, machen wir das mit body, welches den ganzen Körperteil der HTML anspricht. Dazu müsst ihr den ganzen Aufbau einer Seite kennen, der im einfachsten Fall so aussieht:
<!DOCTYPE html>
<html lang="de">
<head>

</head>

<body>

</body>

</html>

Wenn ihr oben gezeigte HTML in den body-Teil packt und das ganze als .html-Datei speichert, könnt ihr das mit eurem Browser öffnen.
Okay, genug zu HTMl, das wisst ihr ja alles, oder habt es zumindest schon einmal gehört, denn das ist ja Voraussetzung für CSS.

CSS, das ich im folgenden jetzt endlich einführen möchte.

CSS - Basic Knowledge

Formales

Als erstes stellt sich natürlich die Frage, nach der Form. Wie schaut CSS aus?
CSS ist relativ einfach.
Um beispielsweise ein Listenelement zu gestalten, schreibt ihr einfach die Zeichen, die innerhalb des Tags stehen, öffnet eine Mengenklammer, schreibt eure Defis rein (immer mit Semikolon am Ende) und schliesst die Mengenklammer wieder.
Um beispielsweise rote Links zu verwenden würden wir in der CSS also folgendes machen:
a{
color: red; 
}
Aber es gibt natürlich nicht nur allgemeingültige CSS, vielleicht wollt ihr ja, dass bestimmte Links anders aussehen als andere.
In diesem Fall verwendet man Klassen. Klassen können mehrmals angewendet werden, im Gegensatz zu IDs. IDs werden nur einmalig vergeben.
Ich hab früher nicht ganz verstanden, warum man IDs verwenden sollte oder wo, dann habe ich mich zum ersten Mal mit Menus beschäftigt. Ihr braucht auf eurer Seite sicher nur eine einzige Navigation, also kann man das sicher mit einer ID versehen. Alle "Downloadlinks" kommen allerdings möglicherweise mehr als einmal vor, also wäre hier eine Klasse angebracht.
Ich zeig euch das wieder anhand des Links wie das aussehen könnte. hier ein Beispiel.
Ihr seht, die basic-Definitionen werden durch das hinzufügen einer Klasse sozusagen nichtig, wenn eine andere Spezifikation folgt. Bei der Klasse hab ich beispielsweise die Schriftfarbe geändert, und obwohl wir gesagt haben, dass alle Links rot sein sollen, ist die Schrift dennoch weiss.

Weiter wichtig ist auch, umso weiter unten etwas im Code steht, umso relevanter. Das heisst, wenn ihr aus Versehen zwei Mal die Hintergrundfarbe definiert, hat das Element die Farbe, die tiefer unten steht.

Basic CSS Befehle

Okay, soviel für den Anfang. Jetzt möchte ich noch ein paar Basic-CSS-Befehle aufführen.
Das ist jetzt nichts richtig ausgefallenes, einfach nur die Basis jetzt vor Allem zur Textgestaltung:
CSSErklärungWert/Beispiel(was nach Doppelpunkt folgt)
colorSchriftfarbeFarbname, HEX (#fffff), rgb(255,255,255) rgba(0,0,0,1)
backgroundHintergrundFarbe (Hex, rgb, rgba,) url()
font-familySchriftartTimes New Roman, Arial, Monospace
font-sizeSchriftgrösseGrösse in px, pt, em, %
font-styleSchriftstilnormal, italic
font-weightSchriftstärtkenormal, bold
font-variantSchriftvariante (normal, Kapitälchen)normal, small-caps
line-heightZeilenabstandWert (1, 1.5, 2...)
text-decorationText-Dekorationunderline, overline, line-through, blink
letter-spacingBuchstabenabstandWert pt, em, px
text-transformArt des Textscapitalize, uppercase, lower-case, none
borderRahmen(Shorthand)[Dicke](px, pt, em, %), [Stil](solid, dotted, double, dashed, ridge, inset, outset, groove, none), [Farbe](hex, rgb, rgba, name)
Das sind jetzt wirklich nur einige Basic-Sachen. Und weil ich sicher bin, dass man nicht alles gleich versteht, gibt's hier auch noch ein Demo wie das Zeug so ausschaut.
Das ist jetzt wirklich nur ein Anfang, aber damit könnt ihr beispielsweise schon etwas machen.

Die erste Sache, die wahrscheinlich am interessantesten ist, ist ein Link, weil ein Link verschiedene Zustände hat. Den Schluss dieses 1. Teils also:

Styling Links

Grunsätzlich hat ein Link drei Zustände, die man für gewöhnlich definiert.
a:link, a:hover und a:visited
Was soviel bedeutet wie: "link, wenn man ihn zum ersten Mal sieht", Link wenn das Mäuschen drüber fährt und Link sobald man einmal draufgeklickt hat, also der besuchte Zustand.
Diese drei Stadien definieren wir jetzt mal.
    Ziel:
  • Grüner Link, Schriftgrösse 14, Monospace, Keine Unterstreichung
  • Bei Hover, Farbe: Dunkelrot, Times New Roman, Grossbuchstaben, Keine Unterstreichung
  • Besuchter Link Farbe navy, Times New Roman, keine Grossbuchstaben, keine Unterstreichung

Wenn wir das jetzt umsetzen schreiben wir folgendes:

a:link{
font-size: 14;
font-family: Monospace;
text-decoration: none;
color: green; 
}

a:hover{
color: dark red;
font-family: Times New Roman;
text-transform: uppercase;
text-decoration: none;
}

a:visited{
color: navy;
font-family: Times New Roman;
text-decoration: none;
}
Und angucken könnt ihr euch das jetzt auch noch. Wie immer hier

Und dann wär's das für den ersten Teil. ^^
edit