CSS - Cascading Style Sheets für eine moderne Gestaltung Ihrer Homepage

Cascading Style Sheets werden im moderen Webdesign zur Trennung von Inhalt und Design genutzt. Das heißt, im HTML-Code stehen die Inhalte und über Stylesheet-Angaben werden die Gestaltung und Farben definiert.




Vorteile von CSS sind:

  • zentral definierbar (eine .css Datei bestimmt das Aussehen der gesamten Homepage, Änderungen in dieser einen Datei verändern dann auch die Darstellung der gesamten Homepage)
  • schnellere Ladezeit, da die einzelnen HTML-Seiten schlanker werden und die zentrale .css Datei nur einmal geladen werden muss
  • CSS wird von allen Browsern in den Kernfunktionen unterstützt
  • Falls ein Browser eine CSS-Definition nicht kennt, wird diese einfach nicht angezeigt. Die Seite funktioniert trotzdem (sieht natürlich nicht so toll aus, aber die Funktionalität bleibt erhalten)

Beispiel einer Formatierung mit CSS:

Mit CSS formatierter Text

Und so sieht der entsprechende Quelltext aus:

<p style="background-color:#0080FF; color:black; font-family:BankGothic Md BT; font-size:20pt; letter-spacing:5px; padding:10px; text-align:center">Mit CSS formatierter Text</p>

Der rotgefärbte Teil sind die CSS-Angaben. Wie Sie sehen, sind die CSS-Angaben direkt im Tag <p> angegeben und werden mit dem abschließenden Tag </p> wieder beendet. Die CSS-Angaben wirken sich nur auf diesen Teil des Quelltextes aus.

Viel interessanter ist es aber, das komplette Design einer Webseite über eine externe CSS-Datei zu steuern. So wird eine externe CSS-Datei eingebunden:

Im Kopf Ihrer HTML-Datei fügen Sie einen Link auf eine .css Datei ein.

So sieht das aus (im Quelltext):

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="keywords"
content="css, cascading, style, sheets, Effekte, styling, desgin, der, homepage, internetseite, verbessern">
<meta name="author" content="Karl Oltmanns">
<meta name="description"
content="CSS - cascading style sheets - mit css können Sie Ihre Homepage um interessante Effekte aufpeppen">
<title>CSS - cascading style sheets</title>
<link rel="stylesheet" href="design.css" type="text/css">
</head>

Der rote Teil ist der entscheidende Teil .css - hier wird auf Ihre Datei verwiesen.

Jetzt erstellen Sie im Editor von Windows eine passende .css-Datei, in unserem Beispiel die Datei design.css mit folgendem Inhalt:

body {font-family: Arial, Helvetica, sans-serif; background-color: #ffffff;}
a {color: #00008B; font-weight: bold;}
a:visited {color: #3366CC; font-weight: bold;}
a:active {color: #ff0000;}
a:hover {color: #ffffff; background-color: #00008B; font-weight: bold;}
#rahmen {border: solid #000000 1px; padding: 15px;}
#header {background-image: url(bg1.gif); padding-top: 5px; border: dotted #cccccc 1px; text-align: center;}
#navigation li {display: inline; padding: 10px;}


Achten Sie besonders auf die Datei-Endung .css! Die Datei design.css können Sie jetzt nach Ihren Wünschen ändern.

Am einfachsten können Sie mit dem CSS-Editor Topstyle .css-Dateien erstellen und bearbeiten. Hier bekommen Sie mehr Infos:

Es gibt eine ganze Fülle an Formatierungen von CSS. Am besten sind diese bei Selfhtml beschrieben:

  • Deutsch de.selfhtml.org/css/index.htm - Selfhtml ist die Referenz zu HTML mit großem CSS-Bereich, alle Formatierungsmöglichkeiten werden genau und ausführlich beschrieben, erklärt und es gibt auch Beispiele.

Außerdem gibt es jede Menge Tricks, Tipps und Experimente rund um CSS. Nachfolgend die interessantesten Webseiten zum Thema Cascading Style Sheets:


Empfehlen Sie diese Webseite Ihren Freunden weiter:





Diese Seite kommentieren:

Kommentare (0)

Name
E-Mail (Wird nicht online angezeigt)
Homepage
Titel
Kommentar
Tragen Sie deshalb bitte den Text, den Sie in dem Bild sehen, in das nebenstehende Textfeld ein.
»




Weitere interessante Rubriken / Webseiten zu diesem Themenbereich:
  • Generatoren - lassen Sie sich fertige CSS-Codes wie farbige Scrollbalken online generieren
  • CSS-Popup - kein echtes Popup, aber es sieht genauso aus und wird nicht von den Popup-Blockern erfasst.
  • Cursor - einen individuellen Cursor für Ihre Homepage


Hier die 10 neuesten Homepage-News für Webmaster aus unserer Redaktion:


Bayernlogo.de - Logo-Design und mehr!
www.bayernlogo.de - Eigenbeschreibung: ...und immer an den Satz von Helmut Thoma (RTL) denken: Der Köder muss dem Fisch schmecken, nicht dem Angler. Persönliche und professionelle Beratung in Sachen Logo-Design, Grafik-Design und Webdesign mit günstigen Design-Preisen gibt es bei www.Bayernlogo.de
Gepostet am 27.11.2014 von meine-erste-homepage.com
Kostenloser Chat bei CHATROCKZ.de
www.chatrockz.de - hier können sich User einen kostenlosen Chat mit wenigen Klicks erstellen. Es können Admins und Moderatoren erstellt werden. Teamspeak und Spieleecke ist ebenfalls vorhanden.
Gepostet am 26.11.2014 von meine-erste-homepage.com
Wie Wearables Webdesign verändern werden - hier finden Sie einen sehr interessanten Blog-Beitrag
pixeltuner.de/wie-wearables-webdesign-veraendern - Wie Wearables Webdesign verändern werden - hier finden Sie einen sehr interessanten Blog-Beitrag zum Thema Webseiten für die Ausgabe auf Smartwatches und andere Wearables mit winzig kleinen Displays optimieren und was dabei zu beachten ist.
Gepostet am 25.11.2014 von meine-erste-homepage.com
Gute Texte vom Texter Michael Bondzio
www.bondzio.de - Michael Bondzio berät in Marketingfragen und schreibt Texte, die verkaufen und Kunden gewinnen. Für Website, Werbung, Geschäftsberichte und mehr.
Gepostet am 24.11.2014 von meine-erste-homepage.com
Kostenloses eBook: Bei Google auf Platz 1 von Michael Bondzio
www.bondzio.de/bei-google-auf-platz-1 - Michael Bondzio gibt in seinem kostenlosen eBook sehr gute Tipps und Informationen rund um eine gute Findbarkeit einer Webseite durch die Suchmaschine Google. Dabei geht es um in dem über 40 Seiten starken eBook um Grundlagen, den richtigen Suchbegriff, eine gute Navigation, einen sauberen Aufbau der Webseite inklusiver durchdachter Verzeichnisstruktur, Metatags und Tags an sich, gute Webtexte und optimale Verlinkungen, richtige Bildbezeichnungen, Vermeidung von Duplicate Content, Optimierung für mobile Geräte, XML-Sitemaps und eigene Fehlerseiten, robots.txt und schnelle Ladezeiten, Tipps für eine bessere Sichtbarkeit der Seite, nützliche externe Links und vieles mehr zur Verbesserung der Positionierung bei Google.
Gepostet am 23.11.2014 von meine-erste-homepage.com
Übersetzungsbüro Orbis
www.orbis-uebersetzungen.de - Beschreibung von der Webseite: Ihre Übersetzung ist im Übersetzungsbüro ORBIS in guten Händen: Unser Experten-Netzwerk umfasst über 370 hoch qualifizierte Übersetzer – Spezialisten für nahezu jedes Fachgebiet. Auch umfangreiche Fachübersetzungen erledigt unser Übersetzungsbüro in kürzester Zeit.Sie erhalten Ihre Übersetzungen in jedem gewünschten Dateiformat, z.B. als .doc, .pdf, .ppt, .html, und, und, und. Wir liefern auch druck- oder präsentationsfertige Dokumente, in Ihren Vorlagen, in der CI Ihres Unternehmens. Und wenn Sie es ganz besonders eilig haben? Kein Problem: Unser 24h-Service ist rund um die Uhr für Sie da.
Gepostet am 22.11.2014 von meine-erste-homepage.com
Reflection Werbeagentur - Webdesign-Agentur aus Kempen bei Düsseldorf
www.reflection-werbeagentur.de - Werbeagentur in Kempen, Krefeld, Düsseldorf. Wir sind genau der richtige Ansprechpartner im Webdesign, Printdesign, Fotografie, SEO uvm. am Niederrhein und Umgebung.
Gepostet am 21.11.2014 von meine-erste-homepage.com
XenForo - PHP-Forensoftware
xenforo.com - PHP-Forensoftware, von ehemaligen vBulletin-Entwicklern entwickelt. Es gibt ein deutschsprachiges Forum unter www.xendach.de
Gepostet am 20.11.2014 von meine-erste-homepage.com
Power-Netz.de - Webhoster aus Bad Gandersheim
www.power-Netz.dePower-Netz.de - Webhoster aus Bad Gandersheim.

Power-Netz.de
Gepostet am 19.11.2014 von meine-erste-homepage.com
Online-Weihnachtswunschzettel mit Gewinnspiel

Online-Wunschliste

Auf einer Online-Weihnachtswunschliste können Sie sich Ihre Weihnachtswünsche als Geschenkliste zusammenstellen. Zudem veranstaltet der Anbieter ein Gewinnspiel, wo unter allen Wunschzetteln jeden Adventssonntag ein Geschenk bis 100€ (welches noch nicht reserviert ist) ausgelost und dem glücklichen Gewinner zu Weihnachten zugesandt wird.

Hier geht es zum Wunschzettel Weihnachts-Gewinnspiel

Wunsch Koala

Gepostet am 18.11.2014 von meine-erste-homepage.com

Mehr News in unserer Rubrik Aktuelle News für Webmaster!



Hier die neuesten Postings aus unserem Homepage-Forum:


Unser großes Homepage-Forum ist bei all-inkl.com gehostet:

ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Feedback und Informationen zu meine-erste-homepage.com:
meine-erste-homepage.com ist bei 1&1 Webhosting gehostet.

1&1 Webhosting