Home > Tutorials > CSS-Tutorial

Webdesign-Workshop: Professioneller Einsatz von CSS

In diesem Tutorial geht es darum, einen schnellen, effektiven Einstieg in den professionellen Einsatz von CSS zu vermitteln. Professioneller Einsatz von CSS bedeutet, die Vorteile von CSS voll auszuschöpfen, gleichzeitig die wenigen Nachteile gekonnt zu vermeiden. Dieser Workshop richtet sich an Webdesign- Anfänger.Der größte Vorteil von CSS liegt in der Möglichkeit, zentrale Formate für jeden einzelnen Bereich einer Homepage zu definieren. Der größte Nachteil von CSS ist die unterschiedliche Umsetzung von CSS-Formatierungen durch die verschiedenen Browser. Die Vorteile zu nutzen bedeutet also vor allem, eine einfache Definition aller Stile für die gesamte Website zu erreichen. Je einfacher die Definitionen gehalten werden, desto sicherer werden sie in allen Browsern korrekt dargestellt.

Cascading Style Sheets dienen der Trennung von Inhalt und Layout in HTML Seiten. Am Anfang des WWW waren Layout und Inhalt in der Webseite zusammengefasst. Dies hatte den Nachteil, dass keine für die gesamte Homepage einheitlich gültigen Layoutregeln erstellt werden konnten.

HTML-Definitionen Ein Absatz erschien auf der einen Seite mit 12 Pixeln in Schrift Arial, rot, auf der anderen in 10 Pixel Grösse mit der Schrift Times New Roman in grau. Die zugehörigen Formatierungen im HTML-Quellcode lauteten beispielsweise

<font color="#FF0000" size="3" face="Arial">12 Arial rot</font>
<font color="#666666" size="2" face="Times New Roman">10 Times in grau</font>

Hier werden sofort einige Nachteile der Durchmischung von Formatierung und Inhalt im HTML-Quellcode ersichtlich:

  • Jeder einzelne Bereich muss extra formatiert werden. Gerade in längeren Tabellendokumenten können die Formatierungen den eigentlichen Inhalt einer Webseite um ein Vielfaches an Länge übertreffen und damit die Seitengröße unnötig aufblähen.
  • Es ist nicht möglich, das Erscheinungsbild eines bestimmten Tags für die gesamte Homepage gültig zu definieren. Somit ergibt sich ein großes Problem bei gewünschten Änderungen: Jeder Tag muss einzeln neu definiert werden. Time is money.
  • Die Möglichkeiten der Layoutgestaltung mittels HTML-Formatierung sind sehr begrenzt. Es ist beispielsweise nicht möglich, Schriftgrößen absolut in Pixeln anzugeben, Rahmen zu definieren oder Hintergrundgrafiken anzuordnen.

Warum CSS Lernen? Allen diesen Nachteilen der Formatierung von Webseiten direkt in HTML steht nur ein einziger Nachteil bei der Nutzung von CSS gegenüber: das System von CSS ist anfangs etwas schwierig zu begreifen und damit auch komplizierter in der Umsetzung. Aber daran gewöhnt man sich schnell; der Zeitgewinn durch zentrale Formatanweisungen wächst, und die Zeit zum Erstellen der nötigen Stylesheets wird immer geringer.

Viele der Schwierigkeiten, die sich dem Anfänger bei der professionellen Nutzung von CSS in den Weg stellen hängen direkt mit dessen Vorteil zusammen: Cascading Style Sheets bedeutet übersetzt Kaskadierende Formatanweisungen. Es gibt verschiedene Ebenen bei den Formatanweisungen mittels CSS. So können Formatanweisungen für einen bestimmten Tag, z.B. <p> definiert werden. Alle <p>-Tags schauen dann gleich aus. Will man nun erreichen, dass ein <p> anders ausschaut, kann man noch zusätzlich Klassen-Selektoren verwenden. Am einfachsten lässt sich das mit folgendem kurzen HTML-Quellcode-Beispiel erläutern:

<TABLE>
<TR>
<TD>
<P>Ein Absatz, der eine besondere <FONT>Schrift </FONT> beinhaltet</P>
</TD>
</TR>
</TABLE>

CSS: Wo wird was definiert? In CSS können wir das Aussehen des obigen FONT-Tags an verschiedenen Stellen definieren: Wir können das Format dem Tag TABLE, TR, TD, P oder FONT zuweisen. Alles innerhalb des jeweils für die Definition ausgewählten Tags wird nach den im Stylesheet festgelegten Regeln dargestellt. Auch CSS selbst bietet nochmal mehrere Ebenen der Definitionsmöglichkeiten: Sie können das Aussehen aller Tags einer Art, oder aber nur bestimmter Tags definieren. Für Webdesign-Anfänger ist es deswegen anfangs schwer zu erkennen, warum welcher Text auf eine bestimmte Weise dargestellt wird. Sowohl übergeordnete CSS-Definitionen, als auch übergeordnete HTMLTags wirken sich auf untergeordnete Definitionen und Tags aus.

CSS-Datei erstellen Zuerst muss eine HTML-Datei, welche Anweisungen aus einer CSS-Datei umsetzten soll, auch mit jener verknüpft werden. Dies geschieht im Kopfbereich der HTML-Datei mit folgender Anweisung:

<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>

Der Vollständigkeit halber sei angemerkt, dass man CSS-Definitionen durchaus auch direkt im HTML-Quellcode einem Tag zuordnen kann. Damit macht man aber den Hauptvorteil von CSS, die Allgemeingültigkeit der Formate, gleich wieder zunichte. In der Regel verwendet man daher CSS-Definitionen immer in einer separaten Datei, die vom Kopfbereich jeder HTML-Seite aus verlinkt ist.

Legen Sie nun eine neue Datei an, benennen Sie diese formate.css und speichern Sie sie im Stammverzeichnis Ihrer Homepage. Das Grundgerüst jeder CSS-Datei sieht wie folgt aus:

DefinierterTag {
Definitionen;
}
.DefninierteKlasse {
Definitionen;
}

CSS Grundlagen Vor der eigentlichen Definition innerhalb der geschweiften Klammern steht, was definiert wird. Dies kann entweder ein HTML-Tag sein (BODY, TABLE, TD, P etc.), eine Klasse (z.B. .roteSchrift, .großerAbstand, .gelberRahmen) oder ein Mischkonstrukt aus beidem, ein sogenannter Selektor (z.B. P.gelberRahmen). Die Definition ist jeweils gültig für den betreffenden HTML-Tag, oder die jeweilige Klasse. Eine Klasse kann jedem beliebigem HTML-Tag mittels class=”xyz” zugewiesen werden.

Die CSS-Definitionen ermöglichen bedeutend mehr Layoutkontrolle als die herkömmlichen HTML-Definitionen. Es sind Angaben zur Schriftfarbe, Größe, Stil, Auszeichnung, Abständen, Rahmen, Positionierung und vielem mehr möglich. Eine exzellente Erklärung aller möglichen CSS-Definitionen finden sie bei selfhtml.

Einfache CSS-Definitionen Eine zentrale Rolle bei der einfachen Definition des Erscheinungsbildes sämtlicher Texte einer Website hat der TD-Tag (Tabellenzelle). Da bei praktisch jeder Website unsichtbare Tabellen zur Layoutformatierung verwendet werden, kann man auch davon ausgehen,liegt fast jeder Text auch innerhalb einer Zelle. Eine Formatierung sämtlicher Texte über den höchsten HTML-Tag <BODY> wird leider in älteren Browsern (Netscape 4.x) nicht für alle untergeordneten Tags übernommen. Auch der TABLE-Tag birgt solche Risiken. Verwenden Sie daher zu Definition Ihrer Hauptschriftart stets den TD-Tag. In Ihrem CSS-Stylesheet könnte ein möglicher Eintrag folgendermaßen aussehen:

td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}

Mit dieser einen Anweisung haben Sie im Regelfall das Aussehen sämtlicher Textabschnitte Ihrer Homepage festgelegt.

Kaskadierend? Bedenken Sie, dass CSS “kaskadierend” ist, d.h., da Sie praktisch alle Texte hiermit formatiert haben, müssen Sie für abweichende Formate nicht wieder alles neu definieren: Alle Tags unterhalb von TD übernehmen automatisch dessen Formatierungen. Wollen Sie einen Bereich innerhalb von TD anders formatieren, müssen Sie nur die abweichenden Formatierungen in der CSS-Datei notieren. Will man eine Liste <ul> in der Schriftart Times New Roman darstellen, muss man nur die Schriftart neu definieren, die Farbe und Größe wird automatisch von der Definition des übergeordneten <TD> übernommen:

ul {
font-family: "Times New Roman", Times, serif;
}

Das Prinzip der Kaskadierung wird auf 2 Arten umgesetzt: Einerseits bewirkt die CSS-Definition eines übergeordneten HTML-Tags automatisch die Übernahme dessen Definitionen für alle untergeordneten Tags. Andererseits besteht die Kaskadierung aber auch schon im CSS-Stylesheet selbst. Definieren Sie TD, so definieren sie alle TD. Wollen Sie erreichen, dass der Text in einer bestimmten TD anders aussieht, als die Standarddefinition vorgibt, so verwenden Sie am besten Klassen:

.rot {
color: #990000;
}

Klassen erkennt man in CSS daran, dass sie immer mit einem Punkt beginnen. Klassen definieren nicht einen bestimmten Tag, sondern beliebige Tags, denen im Quellcode mittels z.B. <TD class=”rot”> eben diese Formatierung zugewiesen wurde. Beachten Sie auch hier wieder das Prinzip der Kaskadierung: Die Schriftart ist in allen TD bereits definiert, sie müssen nur noch das definieren, was von der Standarddefinition abweicht – in diesem Fall also die Schriftfarbe.

Wie man einfache CSS-Definitionen erstellt Prinzipiell gibt es zwei Arten der Stildefinitionen: Klassen- und Typ-Selektoren. Typ-Selektoren definieren das Erscheinungsbild von bestimmten HTML-Tags. Klassen definieren hingegen nur das Erscheinungsbild von HTML-Tags die explizit mit dieser Klasse angezeigt werden sollen. Stildefinition in der .css-Datei:

p {
font-size:12px;
font-style:bold;
}
.grossrot {
font-size:16px;
color:red;
}

Dazugehörige HTML-Seite:

<html><head>
<title>Bsp für Typ-Selektoren und Klassenselektoren in CSS</title>
</head>
<body>
<p>Jeder Absatz wird in der Schriftgrösse 12px fett dargestellt, auch der untige.</p>
<p class="grossrot">Da dieser Absatz jedoch explizit die Klasse .grossrot verwenden soll, wird er in 16px und rot dargestellt</p>
</body>
</html>

Sie sehen: der Einsatz von Typselektoren vereinfacht den Quellcode der Seite. Definieren Sie daher immer zuerst einen Standard für die Homepage durch einige Typselektoren. Klassen-Selektoren sollen nur für vom Standard abweichende Definitionen verwendet werden. Sie vergrößern wie die veralteten Formatierungen mittels HTML den Quellcode nur unnötig. Definieren Sie Ihre Formate immer so einfach wie möglich!

Dynamische Links mit CSS Ein weiterer wichtiger Punkt beim professionellen Einsatz von CSS sind die Links. Zuerst definieren wir ein allgemeines Erscheinungsbild für alle Links. Unsere Links sollen rot sein, fett und nicht unterstrichen. In CSS sieht dies folgendermaßen aus:

a {
color: #ff0000;
text-decoration: none;
font-weight: bold;
}

CSS Pseudoformate In CSS gibt es sogenannte Pseudoformate. Dies sind Formate, die sich nicht ohne Aktionen des Users auf die Darstellung bestimmter Tags auswirken. Beispiele hierfür sind z.B. ein “noch nicht besuchter Verweis” oder der “erste Buchstabe eines Absatzes”. Die wichtigsten Pseudoformate betreffen die Links. Über Pseudoformate wie z.B. a:visited oder a:hover hat man die Möglichkeit, bestimmten Links verschiedene Formate zuzuweisen. So kann ein besuchter Link dunkler dargestellt werden, als ein noch nicht besuchter. Noch interessanter ist die Möglichkeit, Links bestimmte Formate zuzuweisen, wenn gerade die Maus darüberfährt (a:hover).

a:hover {
text-decoration: underline;
background-color: #333333;
}

In obigem Beispiel wird jeder Link, über den Sie mit der Maus fahren, temporär unterstrichen und mit hellgrauem Hintergrund dargestellt. Bewegen Sie den Mauszeiger wieder weg vom Link, so erscheint er wieder wie in der Definition für <a> angegeben.

CSS Kompatibilität Beachten Sie stets, dass nicht alle Browser alle CSS-Definitionen richtig umsetzen. Sehr schlecht ist die Implementation in alten Browsern wie z.B. Netscape 4.x. Es werden hier keine Pseudoformate für Links angezeigt. Rahmen werden prinzipiell verkehrt angezeigt, verwendet man Sie für Links, werden diese sogar unklickbar – eine Katastrophe für die Usability. Auch die Positionierung von Hintergrundbildern oder die Innenabstände von Elementen (padding) wird in fast allen Browsern unterschiedlich interpretiert. Testen Sie also immer in allen Browsern, wenn sie komplexere CSS-Definitionen verwenden. Eine gute Übersicht über die Crossbrowser-Kompatibilität aller möglichen CSS-Definitionen finden Sie unter www.css4you.de.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.

Webdesign-Angebot WDEpro : Webdesign-Entwurf + HTML

Unser Preis: ab 540 €626,40 € incl. MwSt.
Für wen? Sie wünschen ein professionelles Webdesign-Layout nebst Umsetzung des Entwurfes in HTML, die einzelnen Seiten der Homepage aber selbst mit Texten und Bildern bestücken.
Auftrag erteilen

Angebot wie oben WDE, zusätzlich noch 2h Umsetzung des Webdesign-Entwurfes in HTML, incl:

  • saubere Umsetzung des grafischen Entwurfs in HTML
  • semantisch korrekter HTML-Code, W3C-valide, barrierefrei
  • CSS-Definitionen für Schriften, Hintergründe und Links und alle weiteren Seitenelemente
  • Anordnung Dummy-Überschriften / Texte / Bilder
  • Fertige Navigation incl. 1 Beispielnavigation für 2. Ebene
  • ausgeführte Meta-Angaben für Eingangsseite
  • Layouttest in alle gängigen aktuellen Browsern und alten Internet-Explorer-Versionen
  • Übergabe des Masterlayouts mit allen nötigen Dateien als .zip per Email

Das Angebote WDEpro beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität und üblicher Form durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
Webdesign-Angebot WEA : Webseiten-Ausarbeitung

Unser Preis: ab 360 €417,60 € incl. MwSt.
Für wen? Sie haben einen fertigen Homepage-Entwurf, aber keine Zeit zum Erstellen der einzelnen Seiten.
Auftrag erteilen

Sie liefern als Auftraggeber ein fertiges Masterlayout / Template für Ihre Homepage in HTML. Häufig kommt dieses Layout von einem vorherigen Webdesigner.

  • Die ff-webdesigner erstellen Ihnen bis zu 10 HTML-Seiten inclusive Verlinkungen und optimierten Bildern aus dem gelieferten Material.
  • Saubere Suchmaschinenoptimierung aller Seiten
  • Eingehende Beratung und weitere Tipps Usability, Inhalte und SEO betreffend
  • Sie erhalten eine fertige Homepage incl. aller Dateien als .zip per Email.

Das Angebote WEA beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität digital durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
Webdesign-Angebot HPK : Komplette Homepage-Erstellung mit Layout, 10 Seiten

Unser Preis: 900 € 1.044,00 € incl. MwSt.
Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.
Auftrag erteilen

Komplettangebot aus den unter WDEpro, WEAund HUTaufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration – Sparen Sie bis zu 450 € gegenüber den Einzelpaketen!

  • Installation eines guten Redaktionssystems wie z.B. WordPress auf Ihrem Server. Grudlegende Konfiguration
  • Erstellen eines einfachen semantisch korrekten individuellen Templates / Layouts in HTML
  • Erstellen und formatieren von Seiten incl. Impressum und Kontakt
  • Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
  • Individuelles überzeugendes Layout mit Ihrem Firmenlogo
  • Semantisch korrekte und benutzerfreundliche Navigation als Grundlage für gute SEO ihrer Webseite
  • Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
  • Saubere Suchmaschinenoptimierung auf relevante Keywords
  • Layouttest in alle gängigen aktuellen Browsern + alter Versionen Internet Explorer
  • Anmeldung bei den wichtigsten Suchmaschinen
  • Einrichtung aller Email-Adressen

Bei mehr als 3h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Webdesign-Links    

www.css4you.de Sehr umfengreiche Seite über CSS: Grundlagen, Cross-Browser-
Kompatibilität, Beispiele, Tipps und vieles mehr.

de.selfhtml.org Umfangreichste freie Dokumentation von HTML, hervorragend geeignet zum Selbststudium. Gutes Forum, allerdings schlecht gegliedert.

Einträge aus dem ff-Webdesign Lexikon:
CSS ist eine zu HTML gehörige Ergänzung, die die Trennung von Layout und Inhalten ermöglicht. In seperaten Dateien werden allgemeingültige Regeln für das Aussehen bestimmter Tags auf der gesamten Website definiert. Änderungen am Layout sind so flexibler und in kürzerer Zeit möglich. Auch für unterschiedliche Ausgabegeräte (Audio, Drucker, ... [ Mehr lesen ]
HTML ist die Kurzform von "Hyper Text Markup Language" und ist die jeder Webseite zugrundeliegende Programmiersprache im Web. HTML wurde 1989 von Tim Berners-Lee in Genf zur Übermittlung wissenschaftlicher Daten entwickelt. Seine heutige Bedeutung erhielt HTML erst durch den Boom im Internet ab ca. 1995. HTML regelt den Aufbau und das Aussehen der in den HTML-Tags enthaltenen Texte. HTML wird im ... [ Mehr lesen ]
DHTML ist ein Oberbegriff für alle Techniken, die HTML-Seiten dynamisch machen. Dynamic HTML besteht aus drei Technik-Arten: HTML für die Webseiten, eine clientseitige Scriptsprache und eine Schnittstelle zur Steuerung und Überwachung des DOM (Document Object Model, hierarchische Struktur aller Seitenelemente). DHTML wird eingesetzt für alle Effekte, bei denen der Benutzer mittels Bewegen oder Klicken ... [ Mehr lesen ]
JavaScript ist eine von Netscape entwickelte objektbasierte Programmiersprache, die in erster Linie zur Dynamisierung von Webseiten verwendet wird. Javascript wird nicht auf dem Server, sondern auf dem Rechner des Betrachters ausgeführt und ist die einzige Möglichkeit zur Verarbeitung zahlreicher Variablen wie z.B. Bildschirmauflösung, ... [ Mehr lesen ]
Rollover ist das Austauschen einer Grafik gegen eine andere, sobald man darüber mit der Maus fährt. Ein Rollover wird im Webdesign gerne für Navigationselemente eingesetzt und basiert auf Javascript. Ein klassisches Beispiel ist die „Beleuchtung“ eines Buttons, wenn man mit der Maus darüberfährt. Vorteile beim Einsatz eines Rollovers ... [ Mehr lesen ]
Tag Ein Tag ist ein Befehl in HTML. Ein Tag beginnt immer mit < und endet mit >. HTML-Tags kommen fast immer paarweise vor. Der ausleitende Tag beinhaltet ein zusätzliches /: <b>Das wird dick geschrieben.</b>.
Usability Eine gute Nutzbarkeit ist die wichtigste Grundlage für den Erfolg einer Homepage. Usability bedeutet Gebrauchstauglichkeit: eine Homepage so zu gestalten, dass ein Maximum an Nutzern die Homepage mit minimalem Wissen einfach bedienen kann. Die kritischen Teilbereiche für gute Usability sind vor allem Navigation, Farben, Aufteilung, Layout ... [ Mehr lesen ]
Entwurf bedeutet im Webdesign die grafische Konzeption einer Webseite. Der Webdesign-Entwurf wird in Grafikprogrammen wie z.B. Photoshop erstellt. Die Abnahme des Entwurfes ist ein wichtiger Schritt bei der Realisierung einer Website. Erst nach Entwurfsabnahme folgt die Umsetzung der Webseite in HTML.
Netscape war der erste wirklich bedeutende Browser des Internet. Auf dem grafischen Browser Mosaic aufbauend war er um 1997 marktbeherrschend. Mit der fragwürdigen engen Bindung des Windows Betriebssystems an den Internet Explorer wurde Netscape darauf binnen ... [ Mehr lesen ]

Lang ist der Weg durch Lehren, kurz und wirksam durch Beispiele.

Seneca

Ausgezeichnet!

✓ 5/5 ☆☆☆☆☆ Bewertung auf Google

0 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 5 (0 Bewertungen, Ø 0,00 / 5)
Loading...

Listando
WordPress Cookie Plugin von Real Cookie Banner