Was ist eigentlich CSS

 

Geniales Webdesign
gibt es bei SOYOS:


Cascading Style Sheets

CSS ist eine Style Sprache.
CSS ist eine unmittelbare Ergänzung zu HTML.

Was kann ich mit CSS machen?

Mit CSS kannst du zum Beispiel bestimmen welche Farbe der Text haben soll. Oder welche Größe der Text haben soll. Natürlich noch viel viel mehr…

Was ist der unterschied zur standard HTML-Formatierung?

Stimmt- mit HTML kann man auch bestimmen welche Farbe der Text haben soll.

Beispiel HTML-Formatierung:

<p><font color="red">Ich bin ein roter Text</font></p>

Aber die Vorteile sind gewaltig. Dazu kommen wir gleich. Du wirst begeistert sein von CSS!

Was benötige ich um CSS verwenden zu können?

Brauche ich dazu einen spezielle Server oder muss JavaScript aktiviert sein?

Nein, du brauchst KEINE speziellen Server für CSS.
Nein, CSS funktioniert auch wenn JavaScript deaktiviert wurde.

CSS funktioniert direkt; genau wie HTML.

OK, und wie verwende ich CSS?

Es gibt 3 Möglichkeiten CSS in den HTML-Code zu integrieren:

  • Inline CSS
  • CSS als eigener Block
  • CSS als eigene Datei

Inline CSS:

Wie der Name schon verrät handelt es hierbei um Code, der direkt in die Code-Linie geschrieben wird. Das sieht fast so ähnlich aus wie bei der normalen HTML-Formatierung:

Beispiel Inline CSS:

<p style="color: red">Ich bin ein roter Text</p>

Beispiel HTML-Formatierung:

<p><font color="red">Ich bin ein roter Text</font></p>

CSS als eigener Block (Zeilen 4 bis 8):

<html>
  <head>
    <title>Das style-Element</title>
    <style type="text/css">
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Ich bin der Inhalt dieser Seite<p>
  </body>
</html>

CSS als eigene Datei (Zeile 4):

<html>
  <head>
    <title>Das style-Element</title>
    <link rel="stylesheet" type="text/css" href="test.css">
  </head>
  <body>
    <p>Ich bin der Inhalt dieser Seite<p>
  </body>
</html>

Der Inhalt der Datei test.css sieht dann genau wie der Block aus:

<style type="text/css">
  p {
    color: red;
  }
</style>

Und wo liegt der Vorteil? Warum soll ich CSS verwenden?

OK, es gibt also 3 verschiedene Wege CSS einzubauen, aber warum soll ich CSS verwenden, wo liegt der klare Vorteil?

Die 3 stärksten Argumente für CSS:

CSS bietet mehr gestalterische Möglichkeiten als die herkömmliche Formatierung mit HTML

CSS bietet nicht nur einfach die gleichen oder äquivalente Gestaltungsmöglichkeiten wie HTML-Formatierungen. Es bietet in vielen Bereichen weitaus größere Flexibilität und nie gekannte Eingriffsmöglichkeiten.

Mit CSS kann man beispielsweise Elemente unsichtbar machen, oder Wort- und Buchstabenabstände verändern und vieles mehr was mit herkömmlicher HTML-Formatierung nicht möglich ist.

CSS ermöglicht Designänderungen im Handumdrehen

Dieses Argument ist genau so stark wie das erste Argument. Bei einer Web-Seite Designänderungen vorzunehmen ist tausendmal unkompliziert wenn diese mittels CSS formatiert wurde.

Ein kleines Beispiel: Will man z.B. alle Überschriften “h1″ über die komplette Web-Seite ändern, geht das recht unkompliziert. Der Vergleich macht deutlich warum:

Nötige Änderungen bei der Formatierung mittels CSS:

Nur an einer Stelle in der CSS Datei muss die Formatierung geändert werden. Die Änderungen wirken sich sofort auf ALLE Überschriften aus.

Nötige Änderungen bei der Formatierung mittels HTML:

An allen Stellen wo einen Überschrift “h1″ verwendet wird muss die entsprechende Änderung gemacht werden. Hierbei kann es sich schon bei einer normalen Website um eine Vielzahl von Stellen handeln die manuell geändert werden müssen. Zusätzlich besteht die Gefahr, dass Bereiche übersehen und vergessen werden.

CSS bietet Gestaltung nicht nur für den Bildschirm

Mit CSS kann man die Seite pro Medium verändern. Du kannst deine Seiten beim Ausdrucken oder bei Betrachung auf einem PDA also ganz anders aussehen lassen.
Beim Ausdrucken kann man z.B. die Navigation völlig ausblenden, da diese auf dem Ausdruck meistens nicht von Bedeutung ist.

Weitere Gründe:

CSS bringt eine bessere Suchmaschinenplazierung

Klingt komisch, ist aber so. Google (Monopol) bewertet Web-Seiten mit CSS-Formatierungen besser als Seiten mit HTML-Formatierungen. Durch das höhere Ranking erhältst du eine höhere Position in den Suchergebnissen bei Google.

CSS verringert die Hosting-Kosten

Das ist eher relevant für große Web-Seiten mit Millionen von Besuchern wie z.B. YouTube oder eBay.

Durch die Verwendung von CSS wird die HTML-Datei kleiner, da man einen definierten Stil mehrfach anwenden kann. Bei der herkömmlicen Formatierung mittels HTML muss man jedes Element erneut stylen.

Beispiel mit CSS:

<html>
  <head>
    <title>Das style-Element</title>
    <style type="text/css">
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
    <p>Ich bin ein roter Text</p>
  </body>
</html>

Beispiel ohne CSS:

<html>
  <head>
    <title>Das style-Element</title>
  </head>
  <body>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
    <p><font color="red">Ich bin ein roter Text</font></p>
  </body>
</html>

Fazit: CSS sind Formatvorlagen - und Formatvorlagen sind einfach genial.

Hinterlasse eine Antwort


Impressum