Einfache CSS Formatierungen

Syntax 
h1 {
    color: green;
}
ruleder ganze Ausdruck von h1 bis zur letzten geschwungenen Klammer
selectorwelches Element soll referenziert werden (h1)
declarationalles zwischen den geschwungenen Klammern
propertywas soll gestylt werden (color)
valuewie soll gestylt werden (green).

Ein Strichpunkt trennt beliebig viele property/value Paare

Einbau im <head> 
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
Einbau als Attribut 
<h1 style="color:green;">
Einbau als .css Datei
  1. Textdatei mit der Endung .css erstellen
  2. CSS-Regeln hinzufügen, /* Kommentare sehen so aus */
  3. im HTML <head /> Bereich als <link /> Element referenzieren 
    <link rel="stylesheet" href="styles.css"></link>
Selektoren
h1 referenziert alle h1 Elemente
.right referenziert alle Elemente mit einem Attribut class="right"
#help referenziert das Element mit dem Attribut id="help"
a:link ermöglicht das Stylen von Links. Neben a:link gibt es auch a:visited für besuchte Links und a:hover für Mouseover-Effekte bei Links

Selektoren können auch kombiniert werden:

h1.right alle h1 Elemente mit class="right"
h1,h2,h3 alle h1, h2 und h3 Elemente
article p alle p Elemente innerhalb eines article Elements
Farben 
color: #00ff00;                 /* hexadezimal */
color: lime;                    /* benannt */
color: rgb(0,255,0);            /* red-green-blue */
color: rgba(0,255,0,1.0);       /* rgb mit Transparenz */
color: hsl(120,100%,50%);       /* hue-saturation-lightness */
color: hsla(120,100%,50%;1.0);  /* hsl mit Transparenz */

Farben werden über color und background-color festgelegt. Die Werte bei Transparenzen liegen zwischen 0.0 für durchsichtig und 1.0 für opaque. Farbnamen und mehr gibt es hier: https://drafts.csswg.org/css-color-3/#colorunits

Styling für Text
font-stylenormal, italic
font-weightnormal, bold, lighter, bolder, 100, 200 ... 900
font-size12px, 90%, 0.8em, 0.8rem, small, medium, large
font-familyserif, sans-serif, monospace
font-family (Alternativen)"Times New Roman", Georgia, serif
text-decorationnone, underline
line-heightnormal, 2em, 2.0

Die Größe der font-size bei em bezieht sich auf die Größe des übergeordneten Fonts, bei rem auf die Größe des ursprünglichen Fonts für die HTML-Seite

CSS Box-model margin border padding content width height

Für margin, border und padding gibt es auch die Varianten -top, -right, -bottom, -left.

Rahmen 
border: 1px solid black;
border-radius: 10px;
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);

Bei border müssen Breite, Typ und Farbe angegeben werden. Für abgerundete Ecken kommt border-radius zum Einsatz. Schatten setzen sich aus Offsets, Farben, blur und Transparenz zusammen - siehe http://css3gen.com/box-shadow/ (CSS3 Box Shadow Generator)

Ausrichten
text-alignleft, right, center, justify
vertical-alignbottom, middle, top
floatleft, right
clearleft, right, both
Aufzählungen
list-styledisc, circle, squarebei <ul />
list-styledecimal, lower-roman, upper-roman, lower-latin, upper-latinbei <ol />

Zum Festlegen des Startpunktes einer Aufzälung dient das Attribut start beim ol-Element. Über start="3" beginnt damit eine nummerierte Liste bei 3, eine Liste mit lower-roman bei iii und eine Liste mit upper-latin bei C.

Sichtbarkeit
displaynone, inline, block, ...
opacity0.0 bis 1.0
@media 
@media print {
    #nav-area {
        display: none;
    }
}

Über @media kann die Gültigkeit von Styleregeln eingeschränkt werden. In diesem Fall wird beim Ausdrucken der HTML-Seite der Navigationsbereich ausgeblendet.

Links zum Thema