{"id":3651,"date":"2024-02-27T09:26:53","date_gmt":"2024-02-27T09:26:53","guid":{"rendered":"\/tutorials\/?p=3651"},"modified":"2025-12-18T13:48:40","modified_gmt":"2025-12-18T13:48:40","slug":"was-ist-css","status":"publish","type":"post","link":"\/de\/tutorials\/was-ist-css","title":{"rendered":"Was ist CSS und wie funktioniert es?"},"content":{"rendered":"<p>CSS wurde 1996 vom <strong>W3C<\/strong> (<a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener\"><strong>World Wide Web Consortium<\/strong><\/a>) aus einem recht einfachen Grund entwickelt. HTML wurde nicht daf&uuml;r konzipiert, Tags zu haben, die bei der Formatierung der Seite helfen w&uuml;rden. Sie sollten lediglich das Markup f&uuml;r die Website schreiben.<\/p><p>Tags wie <strong>&lt;font&gt;<\/strong> wurden in der HTML-Version 3.2 eingef&uuml;hrt und haben Webentwicklern ziemlich viel &Auml;rger bereitet. Dadurch dass Websites unterschiedliche Schriftarten, farbige Hintergr&uuml;nde und mehrere Stile haben, war es ein langer, schwieriger und teurer Prozess, den Code neu zu schreiben. Daher wurde CSS vom W3C erstellt, um dieses Problem zu l&ouml;sen.<\/p><p>CSS ist technisch gesehen keine Notwendigkeit, aber Sie w&uuml;rden wahrscheinlich keine Webseite ansehen wollen, die nur HTML-Elemente enth&auml;lt, da sie v&ouml;llig kahl aussehen w&uuml;rde.<\/p><div class=\"wp-block-rank-math-toc-block\"><h2 id=\"h-inhaltsverzeichnis\">Inhaltsverzeichnis<\/h2><nav><ul><li><a href=\"#h-vorteile-von-css-auf-websites\">Vorteile von CSS auf Websites<\/a><\/li><li><a href=\"#h-wie-funktioniert-css\">Wie funktioniert CSS?<\/a><\/li><li><a href=\"#h-interne-externe-und-inline-css-stile\">Interne, Externe und Inline CSS-Stile<\/a><\/li><li><a href=\"#h-fazit\">Fazit<\/a><\/li><li><a href=\"#h-was-ist-css-faq\">Was ist CSS FAQ<\/a><\/li><\/ul><\/nav><\/div><p>\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">Was ist CSS?<\/h2>\n                    <p>CSS steht f&uuml;r Cascading Style Sheets Sprache und wird verwendet, um Elemente zu stilisieren, die in einer Markup-Sprache wie HTML geschrieben sind. Es trennt den Inhalt von der visuellen Darstellung der Website. Die Beziehung zwischen HTML und CSS ist eng miteinander verbunden, da HTML das Fundament einer Website ist und CSS die gesamte &Auml;sthetik einer gesamten Website darstellt.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-vorteile-von-css-auf-websites\"><strong>Vorteile von CSS auf Websites<\/strong><\/h2><p>Der Unterschied zwischen einer Website, die CSS implementiert, und einer, die dies nicht tut, ist enorm und sicherlich bemerkbar.<\/p><p>Es k&ouml;nnte sein, dass Sie eine Website gesehen haben, die nicht vollst&auml;ndig l&auml;dt und eine wei&szlig;e Hintergrundfarbe hat, wobei der Gro&szlig;teil des Textes blau und schwarz ist. Das bedeutet, dass der CSS-Teil der Webseite nicht korrekt geladen wurde oder &uuml;berhaupt nicht existiert.<\/p><p>So sehen Webseiten aus, die nur HTML verwenden, und Sie w&uuml;rden sicherlich zustimmen, dass das nicht sehr ansprechend ist.<br>Bevor CSS verwendet wurde, musste die gesamte Stilisierung in das HTML-Markup einbezogen werden. Das bedeutet, dass Webentwickler die Hintergrundfarbe, Schriftgr&ouml;&szlig;e, Ausrichtungen usw. separat beschreiben mussten.<\/p><p>CSS erm&ouml;glicht es Ihnen, alles in einer anderen Datei zu stilisieren, das Design dort zu erstellen und sp&auml;ter die CSS-Dateien &uuml;ber das HTML-Markup zu integrieren. Dies macht das tats&auml;chliche HTML-Markup viel sauberer und einfacher zu warten.<\/p><p>Kurz gesagt, mit CSS-Funktionen m&uuml;ssen Sie nicht immer wieder beschreiben, wie einzelne Elemente aussehen. Dies spart Zeit, verk&uuml;rzt den Code und macht ihn weniger anf&auml;llig f&uuml;r Fehler.<\/p><p>CSS erm&ouml;glicht es Ihnen, mehrere Stile auf einer HTML-Seite zu haben, wodurch die Anpassungsm&ouml;glichkeiten nahezu endlos sind. Heutzutage ist dies mehr eine Pflicht als ein Extra.<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-funktioniert-css\"><strong>Wie funktioniert CSS?<\/strong><\/h2><p>CSS verwendet eine einfache, auf Englisch basierende Syntax mit einem Satz von Regeln, die sie regieren. Wie bereits erw&auml;hnt, war HTML nie daf&uuml;r vorgesehen, Stilelemente zu verwenden, sondern nur das Markup der Seite. Es wurde lediglich erstellt, um den Inhalt zu beschreiben. Zum Beispiel: <strong>&lt;p&gt;Das ist ein Absatz.&lt;\/p&gt;<\/strong>.<\/p><p>Aber wie gestalten Sie den Absatz? Die Syntaxstruktur von CSS ist ziemlich einfach. Es hat einen Selektor und einen Deklarationsblock. Sie w&auml;hlen ein Element aus und erkl&auml;ren dann, was Sie damit machen m&ouml;chten. Ziemlich einfach, oder?<\/p><p>Es gibt jedoch Regeln, die Sie sich merken m&uuml;ssen. Die Strukturregeln sind ziemlich einfach, also machen Sie sich keine Sorgen.<\/p><p>Der Selektor zeigt auf die HTML-Elemente, die Sie gestalten m&ouml;chten. Der Deklarationsblock enth&auml;lt eine oder mehrere Deklarationen, die durch Semikolons getrennt sind.<\/p><p>Jede Deklaration beinhaltet einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch einen Doppelpunkt. Eine CSS-Deklaration endet immer mit einem Semikolon und Deklarationsbl&ouml;cke sind von geschweiften Klammern umgeben.<\/p><p>Schauen wir uns ein Beispiel an:<\/p><p>Alle <strong>&lt;p&gt;<\/strong>-Elemente werden blau und fett gef&auml;rbt.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p {\n color: blue;\n text-weight: bold;\n}\n<\/pre><p>In einem weiteren Beispiel werden alle <strong>&lt;p&gt;<\/strong>-Elemente zentriert ausgerichtet, 16px breit und pink sein.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p {\n   text-align: center;\n   font-size: 16px;\n   color: pink;\n}<\/pre><p>Sehen Sie sich unseren <a href=\"https:\/\/www.hostinger.com\/tutorials\/css-cheat-sheet\"><strong>CSS-Spickzettel<\/strong><\/a> f&uuml;r weitere Beispiele an.<\/p><p>Sprechen wir nun &uuml;ber die verschiedenen Stile von CSS. Sie sind Inline, Extern und Intern.<\/p><h2 class=\"wp-block-heading\" id=\"h-interne-externe-und-inline-css-stile\"><strong>Interne, Externe und Inline CSS-Stile<\/strong><\/h2><p>Lassen Sie uns jeden Stil kurz durchgehen, beginnend mit dem <strong>Internen<\/strong> Stil. CSS-Stile, die auf diese Weise erstellt werden, werden jedes Mal geladen, wenn eine gesamte Website aktualisiert wird, was die Ladezeit erh&ouml;hen kann. Dar&uuml;ber hinaus k&ouml;nnen Sie denselben CSS-Stil nicht auf mehreren Seiten verwenden, da er auf einer einzelnen Seite enthalten ist. Dies bringt jedoch auch Vorteile mit sich. Alles auf einer Seite zu haben, erleichtert das Teilen der Vorlage f&uuml;r eine Vorschau.&nbsp;<\/p><p>Die <strong>Externe<\/strong> Methode k&ouml;nnte die bequemste sein. Alles wird extern in einer <strong>.css<\/strong>-Datei erledigt. Das bedeutet, dass Sie die gesamte Gestaltung in einer separaten Datei durchf&uuml;hren und das CSS auf jede Seite anwenden k&ouml;nnen, die Sie m&ouml;chten. Der externe Stil k&ouml;nnte auch die Ladezeiten verbessern.<\/p><p>Zuletzt werden wir &uuml;ber den <strong>Inline<\/strong>-Stil von CSS sprechen. Inline arbeitet mit spezifischen Elementen, die den &lt;style&gt;-Tag haben. Jede Komponente muss stilisiert werden, daher ist es m&ouml;glicherweise nicht die beste oder schnellste Methode, um CSS zu handhaben. Aber es kann n&uuml;tzlich sein, wenn Sie beispielsweise ein einzelnes Element &auml;ndern m&ouml;chten, &Auml;nderungen schnell anzeigen m&ouml;chten, oder vielleicht keinen Zugriff auf die CSS-Dateien haben.<\/p><h2 class=\"wp-block-heading\" id=\"h-fazit\"><strong>Fazit<\/strong><\/h2><p>Fassen wir zusammen, was wir hier &uuml;ber CSS gelernt haben und wie es bei der &Auml;sthetik von Webseiten hilft:<\/p><ul class=\"wp-block-list\">\n<li>CSS wurde erstellt, um in Verbindung mit anderen Auszeichnungssprachen wie HTML zu arbeiten. Es wird verwendet, um eine Seite zu stilisieren.<\/li>\n\n\n\n<li>Es gibt drei Arten der Implementierung von CSS, und Sie k&ouml;nnen den externen Stil verwenden, um mehrere Seiten gleichzeitig anzupassen.<\/li>\n\n\n\n<li>Sie werden heutzutage nicht weit kommen, ohne irgendeine Art von CSS-Implementierung zu sehen, da es genauso eine Voraussetzung ist wie die Auszeichnungssprache selbst.<\/li>\n<\/ul><p>Alles in allem hoffen wir, dass Sie diesen Artikel hilfreich fanden, und wenn Sie Fragen haben, hinterlassen Sie diese bitte im Kommentarbereich unten.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/de\/webhosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-3553\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-was-ist-css-faq\"><strong>Was ist CSS FAQ<\/strong><\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69440638e14f1\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Was bedeutet CSS?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Die Abk&uuml;rzung CSS steht f&uuml;r Cascading Style Sheet und es ist eine Programmiersprache, die verwendet wird, um den Stil einer Website zusammen mit HTML zu definieren. Sie wird auch als Standard-Stylesheet-Sprache oder Formatierungssprache bezeichnet.&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69440638e14f5\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Warum wird CSS verwendet?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>CSS wird verwendet, um einem Webbrowser mitzuteilen, wie eine bestimmte Website aussehen sollte. Es kann nicht verwendet werden, um neue Seitenelemente zu erstellen, sondern es wird stattdessen verwendet, um HTML-Elemente zu gestalten.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69440638e14f6\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Was sind die verschiedenen Arten von CSS?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Es gibt 3 verschiedene Arten von CSS: Inline-CSS, internes oder eingebettetes CSS und externes CSS.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69440638e14f7\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Was ist der Unterschied zwischen HTML und CSS?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Als Auszeichnungssprache wird HTML verwendet, um statische Websites zu erstellen. CSS hingegen ist eine Stylesheet-Sprache, die verwendet wird, um den Stil und die Gesamtdarstellung verschiedener Dateien und Seitenelemente in einer Auszeichnungssprache wie HTML zu definieren.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS wurde 1996 vom W3C (World Wide Web Consortium) aus einem recht einfachen Grund entwickelt. HTML wurde nicht daf&uuml;r konzipiert, Tags zu haben, die bei der Formatierung der Seite helfen w&uuml;rden. Sie sollten lediglich das Markup f&uuml;r die Website schreiben. Tags wie &lt;font&gt; wurden in der HTML-Version 3.2 eingef&uuml;hrt und haben Webentwicklern ziemlich viel &Auml;rger [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/was-ist-css\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":392,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Was ist CSS, wie funktioniert es und wann wird es verwendet?","rank_math_description":"In diesem Artikel erkl\u00e4ren wir, was CSS ist und wie es funktioniert. Wir gehen auch auf die verschiedenen Arten von CSS ein und wann sie verwendet werden.","rank_math_focus_keyword":"was ist css","footnotes":""},"categories":[24],"tags":[],"class_list":["post-3651","post","type-post","status-publish","format-standard","hentry","category-css"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-css","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-css-guia-basico-de-css","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/css-cest-quoi","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-css","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-css","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/was-ist-css","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-css","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-css","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-css","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-css","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-css","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-css","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-css-guia-basico-de-css","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-css","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-css","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-css","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-css","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/3651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/392"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=3651"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/3651\/revisions"}],"predecessor-version":[{"id":7840,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/3651\/revisions\/7840"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=3651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=3651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=3651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}