Design, Interaction, Code & Teaching

006 CSS-Styles und Selectors – Positionieren, Raster & Layouts Part I

CSS-StyleSheets und Selectors zum Positionieren, Raster und Layout

Diese Flipped-Classroom Serie Positionieren, Raster und Layouts erklärt die Grundlagen der Gestaltung mit CSS: Angefangen bei den Selectors – HTML-Elemente zum Stylen auswählen – über das Boxmodel – die Größeneigenschaften von Elementen – bis zur Positionierung mit float. Dieses Grundwissen ist der Ausgangspunkt für kreatives Webdesign und für die Konzeption von pixelgenauen Rastern und Seitenlayouts.

    CSS-Styles und Selectors

  1. Cascading-Style-Sheets
  2. 3 Positionen für Styles im Code
  3. 5 Selectors
  4. Tag-Selector
  5. Class-Selector
  6. ID-Selector
  7. Descendant-Selector
  8. Vererbung von CSS-Eigenschaften
  9. Fazit

Cascading-Style-Sheets

HTML als Auszeichnungssprache strukturiert Webseiten und Inhalte. Um Webseiten zu gestalten, muss das Aussehen der einzelnen HTML-Elemente definiert werden.Cascading-Style-Sheets – kurz CSS – ist die Sprache für diese Stilvorlagen . Eine Überschrift H1 in 24 Pixel, Rot und einer eine Linienhöhe von 30 Pixel wird in CSS so beschrieben:

1
2
3
4
5
    H1 {
         color: red;
         font-size: 24px;
         line-height: 30px;
     }

Ein Selector wählt ein oder mehrere HTML-Elemente aus, für die im darauf folgenden Block festgelegten Eigenschaften mit Werten gelten. Der Selector ist in diesem Fall der Tag H1 und in den geschweiften Klammern stehen die Eigenschaften mit ihren Werten. CSS bietet sehr viele Gestaltungsmöglichkeiten wie Schriftfamilie, Farbe, Größe, Ausrichtung, Abstände, Ränder, Linien, Hintergrundbilder, Transparenz, Schatten, Animationen usw.

Wo werden die Style-Sheets in der HTML geschrieben?

Style-Sheets können an drei Positionen gesetzt werden.

  1. Inline-Style direkt beim Element mit dem Style-Attribut:
  2. 1
    2
    3
    4
        <!-- HTML-Code -->
        <h1 style="color: red, font-size: 24px, line-height:30px;">
            Das ist eine Überschrift
        </h1>
  3. Internal-Style-Sheet im gleichen File im HEAD Bereich:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
         <head>
         <style type="text/css">
             H1 {
                 color: red;
                 font-size: 24px;
                 line-height: 30px;
         }
         </styles>
         </head>
         <body>
              <h1>Das ist eine Überschrift</H1>
         </body>
  4. External-Style-Sheet ausgelagert und verlinkt in ein externes File mit der Endung *css*:
    1
    2
    3
    4
    5
    6
         <head>
         <link rel="stylesheet" type="text/css" href="css/styles.css">
         </head>
         <body>
              <h1>Das ist eine Überschrift</h1>
         </body>

    Rel=“stylesheet“ weist den Browser darauf hin, dass der folgende Link href=“…“ ein Style-Sheet in Form eines Textfiles type=“text/css“ ist.

Grundsätzlich gilt, dass alle Styles in ein External-Style-Sheet gehören. Der Vorteil: In diesem externen styles.css kann das Aussehen von einem ganzen Designkonzept mit vielen einzelnen Webseiten zentral geändert werden.

Demo Positionen Style-Sheets

Download Code

Mit Selectors die zu stylenden Elemente auswählen

Die wichtigsten Selectors sind:

  1. Tag-Selector: alle HTML-Elemente des gleichen Typs bekommen die gleichen Eigenschaften.
  2. Class-Selector: ein oder mehrere Elemente, die eine Klasse mit Eigenschaften zugewiesen bekommen.
  3. ID-Selector: genau ein Element (unique), welches eine ID mit Eigenschaften zugewiesen bekommt.
  4. Group-Selector: Gruppen von Selektoren, welche die gleichen Eigenschaften haben.
  5. Descendant-Selector: Nachkommen von Elementen – also im HTML-Baum tiefer verschachtelte Elemente – bekommen die gleichen Eigenschaften.

Alle Selectors einmal angewendet

Ich stelle alle Selectos der Reihe nach vor und wie diese geschickt für die Gestaltung der Seite eingesetzt werden. Im Beispiel coden wir ein HTML-Grundgerüst für eine Interseite.

HTML Basis-Layout

Demo Selectors mit HTML-Grundgerüst
Download Code

Die HTML-Datei besteht erst mal nur aus drei DIVs und ein extern verlinktes CSS-File. Ein DIV hat keine definierten CSS-Eigenschaften, die werden erst in den Styles zugewiesen.

1
2
3
    <div></div>
    <div></div>
    <div></div>

Tag-Selector

Als Erstes wende ich den Tag-Selector an, um alle DIVs gleiche Eigenschaften zuzuweisen. Der Tag-Selector ist einfach der Name des HTML-Elements. Die Bedeutung des CSS-Eigenschaften steht direkt im Code. Ich definiere nur die Height-Eigenschaft, weil die Width-Eigeschaft automatisch 100% vom der Breite des Elternelements ist – in diesem Fall der BODY, der sich über die ganze Seite zieht.

Das erste Style in der CSS-Datei styles.css:

1
2
3
4
5
    div {
        height: 200px; /* the dimension of the box */
        border: 10px solid grey; /* 10 pixel grey border */
        background: black; /* background color of the box */
    }

Die DIV-Boxen stehen etwas vom Rand ab. Der BODY-Tag ist Schuld. Der BODY hat bereits Werte für den Abstand (margin) eingestellt – automatisch als Grundeinstellungen. Diese Grundeinstellungen des Browser resetet man am besten. Dafür wird die margin im BODY auf null gesetzt – ein weiterer Tag-Selector. Jetzt kleben die DIVs direkt am Rand.

1
2
3
    body{
        margin: 0; /* space around elements, outside the border */
    }

Class-Selector

Dann probiere ich den Class-Selector. Ich füge jedem DIV eine Class-Attribute zu – header, main und footer – und kann die DIVs dann mit diesen Klassen unterschiedlich stylen. Der vorherige Tag-Selector DIV wird nicht mehr gebraucht und muss gelöscht werden!

1
2
3
4
    <!-- code -->
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>

Dann kann ich die Eigenschaften für die Klassen definieren:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    .header {
        height: 150px; /* the dimension of the box */
        border: 10px solid grey; /* 10 pixel grey border */
        background: black; /* background color of the box */
    }
    .main {
        height: 400px;
        border: 10px solid grey;
        background: black;
    }
    .footer {
        height: 50px;
        border: 10px solid grey;
        background: black;
    }

Mehrere Klassen für ein Element

Elemente können mehrere Klassen gleichzeitig zugewiesen bekommen. Die Klassen werden einfach hintereinander mit Leerzeichen aufgelistet und alle Eigenschaften werden auf das Element angewandt.

Der Vorteil: Man braucht die gleichen Eigenschaften nicht in jedem Style zu wiederholen. Die CSS-Eigenschaften border und background werden in einer Klasse bg-main ausgelagert und in den Klassen header, main und footer gelöscht – es bleibt nur noch die height-Eignschaft und eine übersichtliche CSS-Datei.

1
2
3
4
5
6
7
8
9
10
11
12
13
    .bg-main {
        border: 10px solid black;
        background: grey;
    }
    .header {
        height: 150px;
    }
    .main {
        height: 400px;
    }
    .footer {
        height: 50px;
    }

Und die Klasse bg-main noch im HTML ergänzen:

1
2
3
4
<!-- code -->
     <div class="header bg-main">header</div>
     <div class="main bg-main">main</div>
     <div class="footer bg-main">footer</div>

ID-Selector

Der ID-Selector ist unique – d.h. jeder ID-Selector darf genau einmal pro Webseite vorkommen. Deshalb wird dieser Selector nur für Hauptelemente oder Javascript genutzt.

Ich benutze den ID-Selector, um die DIV-Boxen mit einer Breite von 960 Pixel im Browser zu zentrieren. Dafür schließe ich alle DIVs in ein äußeres DIV mit einer ID ein. Die Benennung des ID-Selectors: Am Anfang steht immer eine Raute und der Name der ID wird beliebig sinnvoll gewählt. Diese ID heißt #wrapper.

Ein Element mit margin zentrieren

Zentrieren funktioniert mit einem kleinen Trick: Die CSS-Eigenschaft ‚margin‘ bestimmt den Abstand des äußeren Rands eines Elementes. Für den BODY-Tag hatte wir die margin auf null Pixel gesetzt, damit es kein Randabstand gibt. Für die ID-Wrapper stellen wir den Rand für oben und unten auch auf null Pixel und den Abstand für links und rechts auf automatisch – d.h. den Rand gleichmässig links und rechts aufteilen – also 50% links und 50% rechts. Und das ist genau in der Mitte. Dazu bekommt die ID-Wrapper eine feste Breite von 960 Pixel. Die verschachtelten Elemente – header, main und footer – passen sich in der Breite wieder zu 100% dem Eltern-Element an, die 960 Pixel des Wrappers Alles fein zentriert auf 960 Pixel.

1
2
3
4
5
6
    /* code */
   
    #wrapper {
        margin: 0 auto; /* center box width the space around the element */
        width: 960px;
    }

Und das HTML:

1
2
3
4
5
6
     <!-- code -->
      <div id="wrapper">
          <div class="header bg-main">header</div>
          <div class="main bg-main">main</div>
          <div class="footer bg-main">footer</div>
     </div>

HTML-Basislayout

An diesen Punkt haben wir eine eine ganz grobe Layout-Struktur bestimmt: Header, Main, Footer, die 960 pixelbreit auf dem Screen zentriert sind. In einem Seitenlayout würde alle weiteren Seitenelemente oder Module in diesen drei Boxen verschachtelt werden.

Descendant-Selector

Der Descendant-Selector eignet sich hervorragend, um diese Module zu stylen. Ergänzen wir das Beispiel um ein Modul Logo. Das Logo besteht aus dem DIV mit der Klasse logo, indem eine Überschrift H1 mit der Textauszeichnung STRONG verschachtelt ist.

1
2
3
4
5
6
7
8
9
10
     <!-- code -->
     <div id="wrapper">
          <div class="header bg-main">
              <div class="logo">
                   <h1>NA<strong>LOGO</strong></h1>
              </div>
         </div>
         <div class="main bg-main"></div>
         <div class="footer bg-main"></div>
     </div>

Das sieht ungestyled so aus:

Fangen wir an die Schrift etwas schicker zu machen. Mit dem Descendant-Selector kann ich direkt die Elemente genau an dieser Stelle im HTML-Baum selektieren. Der Selector .logo h1 kann übersetzt werden in: Nach der Klasse logo soll jedes Tag H1 folgende Eigenschaften haben. Und analog.logo h1 strong: Nach der Klasse logo und dann nach den Tag H1 soll jedes STRONG folgende Eigenschaften haben.

Die CSS-Eigenschaften für die Schrift sind etwas aufwendiger und man bekommt einen Eindruck, wie detailliert das Aussehen von Schrift bestimmt werden kann.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     .logo {
          margin: 30px; /* space around elements, outside border */
     }
     .logo h1 {
          font-family: Helvetica; /* font face */
          font-size: 26px; /* font size */
          color: white; /* font color */
          font-weight: normal; /* font weight */
          letter-spacing: 2px; /* space between letters */
          text-shadow: black 2px 2px 2px; /* font-shadow */
     }
     .logo h1 strong {
          padding-left: 8px; /* space around elements, inside border */
          font-size: 36px;
          font-weight: bold;
      }

Der Descendant-Selector scheint auf dem ersten Blick etwas verwirrend. Es hilft sich die Webseite als verschachtelten Baum vorzustellen. An jeder Gabelung wird geprüft, ob die Bedingung des Selectors zutrifft.

Der Vorteil des Descendant-Selector: Es können spezielle Bereiche des HTML-Trees selektiert werden, ohne dass sich diese Styles zufälligweise mit anderen Styles überschneiden. Deshalb eignet sich der Descendant-Selektor gut, um Bereiche des Layouts in Module auzuspalten. Auf diese Weise definiert man weitere Module wie Banner, Navigation, Article, Advertising, etc.

Group-Selector

Fügen wir noch ein paar Überschriften in unsere Boxen ein, um den Group-Selector zu zeigen. Die Überschriften sind unterschiedlich hierarchisiert, sollen aber alle gleich aussehen.

Die Überschriften im HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     <!-- code -->
     <div id="wrapper">
          <div class="header bg-main">
               <div class="logo">
                    <h1>NA<strong>LOGO</strong></h1>
               </div>
         </div>
         <div class="main bg-main">
                 <h2>Hauptüberschrift h1</h2>
                 <h3>Hauptüberschrift h2</h3>
                 <h4>Hauptüberschrift h3</h4>
          </div>
          <div class="footer bg-main">
                 <h5>Hauptüberschrift h1</h5>
           </div>
     </div>

Und CSS:

1
2
3
4
5
6
7
     h1, h2, h3, h4, h5, h6 {
          margin: 30px;
          font-family: Helvetica;
          font-size: 16px;
          color: white;
          text-shadow: black 1px 1px 1px;
     }

Der Group-Selector spart eine Menge Tipparbeit, wenn Selectors die gleichen Styles bekommen sollen. Der Group-Selector ist natürlich nicht beschränkt auf HTML-Elemente. Es können ebenso Klassen, IDs oder Descendants zusammengefasst werden.

More Selectors

Diese fünf Selectors sind eine solide Basis für die Gestaltung mit CSS. Es gibt noch viele weitere spezielle Selectors, um HTML-Elemente gezielt im HTML-Baum anzusprechen wie den Child-Selector, Parent-Selector, etc. Die folgende Tabelle gibt einen detaillierten Überblick. W3Schools CSS Seletor Reference

CSS-Eigenschaften werden an Nachkommen im HTML-Baum vererbt.

Bestimmte CSS-Eigenschaften, die einmal definiert wurden, gelten für alle folgenden Elemente im HTML-Baum. Das ist sehr praktisch, denn sonst müsste jedes HTML-Element gestyled werden. Da sich die Eigenschaften vererben, brauchen nur die Eigenschaften neu definiert werden, welche im HTML-Element unterschiedlich sein sollen. Das reduziert die Anzahl der Styles erheblich und macht das Styles-Sheet übersichtlicher.

Wir können also alle gleichen Schrifteigenschaften in den BODY schreiben und bei den anderen Styles löschen. Das macht den Code wieder etwas übersichtlicher.

1
2
3
4
5
6
7
     body {
          font-family: Helvetica;
          color: grey;
     }
     h1 {
          color: white
     }

Nicht alle CSS-Eigenschaften werden vererbt!

Es gibt keine genaue Regel, welche im HTML-Baum vererbt werden. Doch hier hilft ein bisschen Logik weiter: Allgemeine Eigenschaften wie Schriftfamilie oder Größe sollten nach den Regeln des guten Design eher sparsam verwendet werden. Diese werden vererbt und können seitenübergreifend im BODY definiert werden. Spezielle Eigenschaften insbesondere Größen, Ränder und Abstände werden nicht vererbt, weil es meistens schlicht unsinnig ist, diese Eigenschaften mit gleich Werten auf alle verschachtelte Elemente anzuwenden. Wer möchte schon jedes Element mit einem 16 Pixel dicken roten Rand versehen?

Fazit

Mit CSS fängt Webdesign an. Style-Sheets kontrollieren das Aussehen und sogar Animationen einer Webseite. Das Styles-Sheet sollte unbedingt in ein zentrales externes Dokument ausgelagert werden. Das wichtigste für den Start ist ein grundlegendes Verständnis von Selectors. Diese fünf Selectors: Tag-, Class-, ID-, Group und Descendant-Selectors bilden eine solide Ausgangsbasis für die Gestaltung mit CSS. Besonders der Descendant-Selector eignet sich gut um einzelne Seitenmodule zu definieren, weil sich dann die CSS-Eigenschaften für die Elemente nicht überschneiden. Bestimmte CSS-Eigenschaften werde im HTML-Baum vererbt. Als Grundregel gilt allgemeine Eigenschaften werden vererbt und Eigenschaften, die sich auf Größen beziehen, werden nicht vererbt.

Im Zweiten Teil stelle ich das Box-Model und die CSS-Eigenschaft float vor, um die ersten komplexeren Layouts zu realisieren.

Hier noch Mal Demo & Code

Demo Selectors mit HTML-Grundgerüst
Download Code

Artikel dieser Serie Positionieren, Raster und Layouts mit CSS

Part I: CSS-Styles und Selectors
Part II: Box-Model und CSS-Float-Eigenschaft
Part III: CSS-Position: relative, absolute und fixed
Part IV: Raster und CSS-Raster-Systeme
Part V: alltägliche CSS-Probleme beim Positionieren von Elementen


Über den Autor


Prof. Pepe Jürgens konzipiert, gestaltet und programmiert seit 20 Jahren digitale Medien. Er gründete das interdisziplinäre Design-Studio Weltformat und ist Co-Founder von lernox mit dem Ziel, freie Lehr- und Lernmaterialien aus dem Internet zu kuratieren. Seit 2013 doziert Pepe Jürgens Interaction Design an der Hochschule der populären Künste in Berlin


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>