selector {
property: value;
}Selektor {
Eigenschaft: Wert;
}Beispiel
p {
font-size: 16px;
}
.wrapper {
margin: 10px;
color: blue;
background-color: black;
}Note: geschwungene Klammern am Mac: { = alt + 8 sowie } = alt + 9
externes Stylesheet: dokument.css wird mit dem HTML-Dokument verknüpft
<head>
<link rel="stylesheet" href="style.css">
</head>internes Stylesheet: Stilanweisungen werden im <head>-Bereich des HTML-Dokuments notiert
<head>
<style>
h1 {
font-family: "Courier New", Courier, monospace;
}
...
</style>
</head>Inline-Style: Notation erfolgt direkt im HTML-Element
<p style="background-color: white;">Note: Empfohlen wird die externe Verknüpfung des Stylesheets!
Die Verwendung von internen Stylesheets und die Notation direkt in das HTML-Element wird nur für Testzwecke empfohlen.
Textfarbe: color: blue;
Hintergrundfarbe: background-color: black;
Schriftfamilie: font-family: "Times New Roman", Georgia, serif;
Schriftgröße: font-size: 16px;
Schriftschnitt: font-style: italic;
Textausrichtung: text-align: center;
Text-Effekte: text-decoration: underline;
Deckkraft: opacity: 0.5;
Kästchen alias Boxen sind die Bausteine einer Webseite. Alle Boxen sind nach einem bestimmten Schema aufgebaut und haben folgende Eigenschaften: width, height, padding, border und margin.
Farbname: color: blue;
Hexadezimal (3 oder 6 Zeichen): color: #00f; / color: #0000ff;
Dezimal: color: rgb(0,0,255);
pixel: margin: 10px;
prozent: width: 50%;
em: font-size: 1.25em;
x-mal die Schriftgröße des Eltern-Elements in pixel. Bsp: parent 16px = 20px
rem: padding: 2rem;
x-mal die Schriftgröße des Wurzelelement (in HTML das html-Element) in pixel. Bsp: root 16px = 32px
Die Geburt der Browser und damit verbunden die Darstellung von Bildern war der erste Schritt in Richtung Webdesign, so wie wir es heute kennen. Um Inhalte zu strukturieren, nutzte man die in HTML verfügbaren Tabellen. Tabellen wurden verschachtelt und man entwickelte klevere Ideen, um statische Zellen mit liquiden Zellen zu mixen – allen voran erklärt in „Creating Killer Web Sites“ von David Siegel (erschienen 1996). Obwohl es sich nie ganz richtig anfühlte, vor allem weil der eigentliche Zweck von Tabellen ist, Zahlen zu strukturieren, war es trotzdem relativ lang die gängige Methode, um Websites zu gestalten. Ein weiteres Problem war die Schwierigkeit der Instandhaltung dieser fragilen Struktur. Zu jener Zeit entwickelte sich der Begriff „slicing design“, welcher sich großer Beliebtheit erfreute. Designer gestalteten schrille und schräge Layouts, aber Developer mussten das Layout erst in kleine Häppchen teilen und herausfinden, wie sich das Design am besten umsetzen lässt. Auf der anderen Seite hatten Tabellen einige großartige Eigenschaften, wie Inhalte vertikal zu zentrieren oder Elemente in Pixel oder Prozent zu definieren. Der Hauptnutzen von Tabellen war mit Sicherheit, dass es sehr stark einem Grid (Raster) ähnelte. Zu jener Zeit entschieden sich ebenso viele für, wie gegen das Front-end-development.
– HTML-Element h1, p, ...
– ID #id
– Klasse .class
Note: IDs genießen bei der Verarbeitung durch den Browser eine höhere Priorität als Klassen und sind dadurch auch schwerer überschreibbar.
Bevorzugt Klassen anstatt IDs verwenden!
CSS: HTML-Element stylen
h1 {
font-size: 20px;
text-align: center;
...
}HTML: HTML-Element anwenden
<h1> Das ist eine Headline 1. Ordnung </h1>CSS: ID stylen
#navigation {
background-color: #000;
margin: 10px;
...
}HTML: ID anwenden
<div id="navigation"> Das ist der Bereich für die Navigation. </div>Note: IDs werden einmalig im HTML-Dokument angewendet.
CSS: class style
.breadcrumbs {
font-size: 20px;
text-decoration: underline;
...
}HTML: class anwenden
<div class="breadcrumbs"> Das ist der Bereich für die „Brotkrümelnavigation“. </div>Note: Wenn verschiedene HTML-Elemente gleich gestylt werden, dann sind Klassen im Einsatz.
Pseudoklassen sind einfache Selektoren, die ein Element dann ansprechen, wenn es eine bestimmte Eigenschaft hat oder einen Status besitzt.
selector:pseudo-class {
property: value;
}Bsp. CSS
a:hover {
color: blue;
}Bsp. HTML
<a href=""> Bei einem Mouseover wird der Link blau </a>:hover – selektiert Elemente, die mit dem Mauszeiger berührt werden
:active – selektiert Elemente, die aktuell angeklickt sind
:focus – selektiert Elemente, die den Fokus erhalten – zum Beispiel durch die Tabulatortaste
:first-child – selektiert das erste Kindelement
:last-child – selektiert das letzte Kind eines Elternelements
:first-of-type – selektiert das erste Kindelement einer bestimmten Art
:last-of-type – selektiert das letzte Kindelement einer bestimmten Art
Note: Mehr über Pseudoklassen auf wiki.selfhtml.org oder developer.mozilla.org
* { ... } – stylt alle Elemente auf der Seite
.header * { ... } – stylt alle Kindelemente in der Klasse „header“
.header a { ... } – stylt alle Kindelemente in der Klasse „header“, die ein Link sind
Zwei Möglichkeiten – abhängig vom Inhalt – Elemente zu zentrieren:
Text-Elemente (z.B. Headline, Absatz/Fließtext)
text-align: center;Block-Element (z.B. Container)
width: 960px;
margin-left: auto;
margin-right: auto;