{"id":3000,"date":"2022-11-15T23:27:59","date_gmt":"2022-11-15T22:27:59","guid":{"rendered":"https:\/\/cbrell.de\/blog\/?p=3000"},"modified":"2022-11-16T17:11:31","modified_gmt":"2022-11-16T16:11:31","slug":"css-einstieg-von-null-auf-hundert","status":"publish","type":"post","link":"https:\/\/cbrell.de\/blog\/css-einstieg-von-null-auf-hundert\/","title":{"rendered":"CSS Einstieg von Null auf Hundert"},"content":{"rendered":"

CSS ist eine Beschreibungssprache, mit der Sie das Aussehen Ihrer HTML-Seiten steuern k\u00f6nnen. F\u00fcr den niederschwelligen Start in die Programmierung ist HTML gut geeignet, HTML selbst ist f\u00fcr die Struktur der Seiten zust\u00e4ndig.\u00a0<\/em><\/p>\n

CSS lernt man durch das Benutzen von CSS und das Herumspielen im Zusammenhang mit HTML-Seiten. CSS lernen Sie eher nicht aus B\u00fcchern.<\/em><\/p>\n

Stand: 15.11.2022<\/em><\/p>\n

Dieser Beitrag ist Teil 2 einer kleinen dreiteiligen Serie<\/p>\n

Teil 1: HTML Einstieg von Null auf Hundert<\/a><\/p>\n

Teil 2: CSS Einstieg von Null auf Hundert (Dieser Beitrag)<\/p>\n

Teil 3: Mit HTML und CSS Infografiken bauen (wird noch erstellt)<\/p>\n

Was ist CSS?<\/h2>\n

CSS hei\u00dft Cascading Style Sheets und ist eine Auszeichnungssprache<\/strong> f\u00fcr Internet-Seiten. Eine separate CSS-Datei hat oft die Endung .css. Mit CSS k\u00f6nnen Sie Farbe, Schriftgr\u00f6\u00dfe und weiterer Eigenschaften einzelner DOM-Elemente in HTML-Seiten beeinflussen.<\/p>\n

CSS sieht so \u00e4hnlich aus wie JSON<\/a>.<\/p>\n

CSS Lernen ist nicht sehr schwer, ben\u00f6tigt jedoch aktive \u00dcbung. Sie ben\u00f6tigen nur einen Rechner mit einem Dateisystem, einem Browser und einem Texteditor.<\/p>\n

Im folgenden Beispiel sind die Auswirkungen von CSS auf Internetseiten gezeigt (Einige Grafiken sind aus den Lehrgangsunterlagen von J\u00f6rn Rings, NEU GmbH in D\u00fcsseldorf<\/a>)<\/p>\n

 <\/p>\n

Abb. 1: Mit und ohne CSS<\/p>\n

Ziel dieses Beitrags CSS Einstieg<\/h2>\n

Ziel des Beitrags ist<\/p>\n

    \n
  1. einen schnellen ersten Einstig in CSS zu schaffen<\/li>\n
  2. die Erstellung von einfachen Infografiken mit HTML und CSS vorzubereiten. Das wird insbesondere die Manipulation des <div> Elementes beinhalten.<\/li>\n<\/ol>\n

    Ziel ist es nicht, einen umfassenden \u00dcberblick zu geben. Das leiste eher die Quellen weiter hinten.<\/p>\n

    Wie kommt CSS mit HTML zusammen?<\/h2>\n

    Es gibt drei M\u00f6glichkeiten, CSS mit HTML zusammenzubringen:<\/p>\n

    1. direkt am DOM Element (\u201einline\u201c) (gilt nur f\u00fcr das einzelne Element an dieser Stelle. Das ist die schnellste Methode, das Aussehen von einzelnen DOM-Elementen zu ver\u00e4ndern.)<\/p>\n

    2. im Kopfbereich zwischen <head> und <\/head> des HTML-Dokuments (gilt f\u00fcr alle Elemente in diesem Dokument)<\/p>\n

    3. als externe Datei (dateiname.css) (gilt f\u00fcr alle HTML-Seiten, die das referenzieren)<\/p>\n

    Im Folgenden wird nur noch die dritte M\u00f6glichkeit besprochen. Die anderen lesen Sie nach im CSS-Teil von selfhtml.org<\/a>.<\/p>\n

    Wie k\u00f6nnen Sie CSS-Dateien erstellen, bearbeiten und testen?<\/h2>\n

    Starten Sie in Ihrem Wurzelverzeichnis und legen Sie sich ein neues Projektverzeichnis an, z.B. „HTML“. Wechseln Sie in das Verzeichnis. Arbeiten Sie im Terminal unter Linux oder Mac, k\u00f6nnen Sie nun zwei Datei anlegen mit<\/p>\n

    touch index.html\r\ntouch index.css<\/pre>\n
    Ansonsten verwenden Sie einen grafischen Editor wie Notepad++, Sublime Text oder Visual Studio Code. Die genannten Editoren haben den Vorteil, dass sie die CSS-Tags farbig darstellen k\u00f6nnen. Das erleichtert die Fehlersuche . Editoren werden in einem eigenen Beitrag beschrieben.<\/p>\n
    Bearbeiten Sie die Dateien mit dem Editor und speichern Sie sie h\u00e4ufig. F\u00fchren Sie einen Doppelklick auf eine Datei mit der Endung html aus, wird sie automatisch in Ihrem Browser ge\u00f6ffnet und l\u00e4dt die CSS-Datei nach. Damit haben Sie gleich den Bearbeitungs-Workflow: Editieren – Speichern – Test der zugeh\u00f6rigen HTML-Datei mit Browser und von vorn.<\/p>\n
    Achten Sie darauf, von vornherein den Quelltext geordnet schreiben, das erleichtert sp\u00e4ter die Fehlersuche.<\/p>\n
    Die index.html erh\u00e4lt zun\u00e4chst einen Verweis auf die CSS-Datei. Ab dann haben Eintr\u00e4ge in der CSS-Datei Auswirkungen auf das Aussehen.<\/p>\n
    <html>\r\n  <head>\r\n   <meta name=\"language\" content=\"de-DE\"> <meta http-equiv=\"Content-type\" content=\"text\/html;charset=utf-8\"> \r\n   <meta name=\"mobile-web-app-capable\" content=\"yes\"> \r\n   <link rel=\"STYLESHEET\" type=\"text\/css\" href=\"index.css\">\r\n  <\/head>\r\n  <body>\r\n    <h1>Erste \u00dcberschrift der Ebene 1<\/h1>\r\n    <p>Hallo Welt.<\/p>\r\n    <ul><li>Mini Liste<\/li><\/li><\/ul>\r\n    <div>\r\n      Ich bin nur ein Demo-Text.\r\n    <\/div>\r\n   <\/body>\r\n<\/html><\/pre>\n
    Abb. : HTML-Datei mit wenigen Tags und einem Verweis auf die CSS-Datei.<\/p>\n
    Wichtig ist die Zeile ‚<link rel=“STYLESHEET“ type=“text\/css“ href=“index.css“>‘. Das Statement sorgt daf\u00fcr, dass der Browser die CSS-Datei nachl\u00e4dt.<\/p>\n
     <\/p>\n
    Wie sieht eine CSS-Datei aus?<\/h2>\n
    Starten Sie mit wenigen CSS-Anweisungen. Im ersten Schritt geben Sie den \u00dcberschriften und den Listenelementen sowie dem Absatz etwas Farbe.<\/p>\n
    body,div,span,p,textarea {\r\n      max-width:1024px;\r\n      margin-left:auto;\r\n      margin-right:auto;\r\n      font-family:Arial, Verdana, Helvetica, Geneva, sans-serif, sans serif, sansserif, SansSerif;\r\n      font-size:2.0em;\r\n      text-align:center;\r\n}\r\nh1 {\r\ncolor: white;\r\nbackground-color: orangered;\r\nfont-size:1.6em;\r\n}\r\np {\r\ncolor: white;\r\nbackground-color: turquoise;\r\nfont-size: 1.0em;\r\n}\r\nli { color: red; background-color: turquoise; font-size: 0.5em; }\r\n\r\n<\/pre>\n
    Abb.: Inhalt der ersten index.css<\/p>\n
    Mehreren DOM-Elementen k\u00f6nnen zusammen Eigenschaften gegeben werden. Die Eigenschaften des Absatzes <p> werden dann weiter unten erweitert. Die Anweisungen „kaskadieren“ also.<\/p>\n
     <\/p>\n
    \u00dcbung \/ Breakout Session 1<\/h4>\n
    Tippen Sie das HTML Grundger\u00fcst und die CSS-Statements im Editor Ihrer Wahl ab - oder kopieren Sie den Quelltext hinein. Speichern Sie sie unter index.html und indexXXX.css. Testen Sie durch Doppelklick auf index.html. Benennen Sie indexXXX.css um in index.css und testen Sie erneut.<\/pre>\n
    Wie arbeiten Sie mit <div>, <span> und CSS-Klassen?<\/h2>\n
    HTML-Tags lassen sich ineinander schachteln. Mit dem rechteckigen Bereich <div> und dem Inline-Bereich <span> k\u00f6nnen Sie sofort erste Schritte in Richtung Visualisierung von Daten gehen.<\/p>\n
    Die folgende Kombination index.html und index.css gibt erste Ideen, wie das funktionieren kann. Es werden gleich Klassen verwendet. In der CSS Datei werden die Klassennamen mit Punkt getrennt an das DOM-Element angehangen. In der HTML-Datei wird die Klasse benannt und weist dem entsprechenden Element ihre Eigenschaften zu.<\/p>\n
    <html>\r\n <head>\r\n  <link rel=\"STYLESHEET\" type=\"text\/css\"   href=\"index.css\">\r\n <\/head>\r\n <body>\r\n <h1>Ein Balkentest<\/h1>\r\n <div>\r\n <span class=\"B1\">erster Balken<\/span> und weitere Text<br>\r\n <span class=\"B2\">zweiter Balken<\/span> und weiterer Text\r\n <\/div>\r\n <br><br>\r\n<div class=\"Abbildung\">\r\n<span class=\"B3\">*******<\/span> 7<br>\r\n<span class=\"B4\">***********************<\/span> 21\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
    Abb. index.html mit der Verwendung von div und span<\/p>\n
    body, div, span {\r\nmax-width:1024px;\r\nmargin-left:auto;\r\nmargin-right:auto;\r\nfont-family:Arial, Verdana, Helvetica, Geneva, sans-serif, sans serif, sansserif, SansSerif;\r\nfont-size:1.0em;\r\ntext-align:left;\r\n}\r\ndiv {\r\ncolor: white;\r\nbackground-color: lightgrey;\r\nfont-size:0.8em;\r\n}\r\ndiv.Abbildung{\r\nbackground-color: grey;\r\nmax-width:512px;\r\nmargin-left:auto;\r\nmargin-right:auto\r\n}\r\nspan.B1 {\r\ncolor: white;\r\nbackground-color: darkred;\r\n}\r\nspan.B2 {\r\ncolor: white;\r\nbackground-color: darkgreen;\r\n}\r\nspan.B3 {\r\ncolor: darkred;\r\nbackground-color: darkred;\r\nfont-size:3.0em;\r\n}\r\nspan.B4 {\r\ncolor: darkgreen;\r\nbackground-color: darkgreen;\r\nfont-size:3.0em;\r\n}<\/pre>\n
    Abb. : index.css mit der Verwendung von div und span<\/p>\n
    \u00dcbung \/ Breakout Session 2<\/h4>\n
    Probieren Sie die index.html und index.css aus. Testen Sie vier Balken mit unterschiedlichen Breiten. Googeln Sie, ob es M\u00f6glichkeiten gib, dem div-Container abgerundete Ecken zu spendieren<\/pre>\n
    Fazit<\/h2>\n
    Sie k\u00f6nnen nun das Aussehen von HTML-Dateien mit CSS ver\u00e4ndern.<\/p>\n
     <\/p>\n
    Quellen f\u00fcr den CSS Einstieg & Weiterlesen<\/h2>\n
      \n
    1. Selfhtml eigent sich auch zum CSS-Lernen: HTML: Zum Nachschlagen, Lernen, einfach anfangen: selfhtml<\/a>(extern)<\/li>\n
    2. Ein ganz anderer Ansatz mit SVG: https:\/\/css-tricks.com\/how-to-make-charts-with-svg\/<\/a><\/li>\n<\/ol>\n
      <\/p>\n
      Teile diesen Beitrag.<\/div>