This is an old revision of the document!
Aber mit Style bitte
CSS steht für Cascade style sheet.
Mit CSS kann das Aussehen bestimmter Elemente und ihrer Unterelemente (cascade!) festgelegt werden.
Selektoren
Elemente könne mit verschiedenen Selektoren ausgewählt werden.
By tag
/* Kommentare zwischen Slash Stern und Stern Slash */ h1 { /* alle Übertitel <h1>...</h1> */ color: white; /* Textfarbe als Farbname */ background: #002244; /* Farbe als Hex-Code */ }
By class
.wichtig { /* Alle Elemente mit dem Attribut class="wichtig", z.B. <div class="wichtig">...</div> */ font-weight: bold; /* Fette Schrift */ }
By id
#catpics { /* Das (einzige!) Element mit id="catpics" */ border-radius: 5px; /* Abgerundeter Rand */ border-style:solid; /* Durchgezogener Rand */ border-width: 2px; /* 2 Pixel breiter Rand */ background-color:orange; margin:20px; /* 20px Platz ausserhalb vom Element */ padding:10px; /* 10px Platz innerhalb vom Element */ }
Direkte Kind-Elemente
#catpics > div { /* Alle Div-Elemente, die direkt innerhalb des Elements mit id="catpics" sind. Aber nicht verschachtelte Unterlemente */ display:flex; /* Flexible Anordnung der Element innerhalb */ align-items: center; /* Elemente innherhalb vertikal zentrieren */ justify-content: space-evenly; /* Elemente horizontal gleich verteilen */ flex-wrap: wrap; /* "Zeilenumbruch", wenn zu viele Elemente */ }