Grundlagen in CSS

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Grundlagen in CSS

      Hallo,
      ich möchte Euch kurz die Grundlagen in CSS näher bringen.


      Generell sind CSS Cascading Style Sheets - mit .css Dateien stylen wir unser .html Dokument. Beispielsweise könnte dies so aussehen:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <link rel="stylesheet" type="text/css" href="stylesheet.css"> <!-- Wir sagen unserem HTML Dokument hier, wo es den Stylesheet findet -->
      5. <title>Testseite</title>
      6. </head>
      7. <body>
      8. <div id="test1">Dies ist ein Button</div> <!-- Dies ist ein DIV-Container mit einer ID. Die ID ist = test1 -->
      9. <div class="test2">Dies ist ein weiterer Button</div> <!-- Dies ist ein DIV-Container mit einer Klasse. Die Klasse ist = test2 -->
      10. </body>
      11. </html>
      Alles anzeigen


      Anschließend haben wir unsere stylesheet.css Datei die beispielsweise so aussehen könnte:

      Eine ID ist einmalig und sollte dementsprechend nur einmal im Code vorkommen. Wir sprechen eine ID aus unserem HTML Dokument mit einer # an:

      Quellcode

      1. #test1{
      2. background-color: #000; /* Hintergrundfarbe Schwarz */
      3. color: white; /* Schriftfarbe Weiß */
      4. width: 200px; /* Breite: 200px */
      5. height: 50px; /* Höhe: 50px */
      6. text-align: center; /* Textausrichtung: Mittig */
      7. }


      Eine Klasse ist im Vergleich zu einer ID mehrfach verwendbar. Im Standard-CSS Layout könnte man für wiederkehrende Dinge beispielsweise eine Klasse festlegen wie .widthNav{width: 200px;}. Ich könnte nun jedem Element, dass 200px breit sein sollte, die Klasse <div class="widthNav weitereKlasse"> zuweisen. Mehrere Klassen sind auch kein Problem und werden durch ein Leerzeichen getrennt voneinander. Klassen sprechen wir in CSS mit einem . an.

      Quellcode

      1. .test2{
      2. background-color: #000; /* Hintergrundfarbe Schwarz */
      3. color: white; /* Schriftfarbe Weiß */
      4. width: 200px; /* Breite: 200px */
      5. height: 50px; /* Höhe: 50px */
      6. text-align: center; /* Textausrichtung: Mittig */
      7. }


      Das war eine kurze Einführung in CSS. Der neue Standard sind LESS/SASS, dazu schreibe ich die nächsten Tage gerne noch etwas!

      Beste Grüße 8)
      Lebe jeden Tag als sei es dein Letzter.