Sie befinden sich hier: Startseite » CSS - Cascading Style Sheets für eine moderne Gestaltung Ihrer Homepage

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:


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




Newsbox

Nachfolgend die 5 neuesten Nachrichten, Links und Tools für Webmaster:

Startmobile.de - mobiler Fitnesstest für Ihre Homepage
www.startmobile.de - auf startmobile.de (gehört übrigens zu Google) geht es darum, ob Ihre Webseite bereits fit für das mobile Internet ist. Sie können Ihre bestehende Webseite einem mobilen Fitnesstest unterstellen. Sie erhalten eine mobile Vorschau Ihrer Webseite, ordnen Ihre Webseite in eine passende Kategorie ein und beantworten einige Fragen zur Webseite. Am Ende bekommen Sie einen Bericht angezeigt oder auf Wunsch auch zugemailt. Der Bericht enthält Tipps speziell zu Ihrer Webseite, aber auch Best Practices für mobile Webseiten, d.h. wichtige Tipps und Anforderungen an Webseiten bei der Anzeige auf Smartphone & Co. Unter der Rubrik Webseite erstellen finden Sie Anbieter speziell für die Erstellung mobiler Webseiten.
Geschrieben am 11 May 2012 von Karl Oltmanns

Tell-a-Friend
friend.share.lc - hier finden Sie ein "Tell-a-Friend"-PHP-Script.
Geschrieben am 08 May 2012 von Karl Oltmanns

Content4Links
www.content4links.de - hier erhalten Sie kostenlose Texte - als Gegenleistung verlangt der Anbieter 1-2 themenbezogene und seriöse Links, die der Anbieter in die Texte einbaut. Eigenbeschreibung des Anbieters: Hier bekommt man kostenlos Texte (mit bis zu 2500 Wörtern) für Webseiten oder Blogs gegen Links geschrieben.
Geschrieben am 08 May 2012 von Karl Oltmanns

SEOButler
www.seobutler.de - SEO-Butler ist ein professioneller Backlink-Marktplatz für Webmaster und Suchmaschinenoptimierer.
Geschrieben am 05 May 2012 von Karl Oltmanns

Kauf von Affiliwelt durch die Active Response
Gestern abend kam eine Informations-eMail von der Firma Active Response, dass diese das Partnernetzwerk Affiliwelt.net übernommen hat. Informationen zu den in der Vergangenheit bei Webmastern noch offenen Provisionen finden sich hier: affiliwelt.active-response.de.

Laut Webseite (www.affiliwelt.net) ist der Relaunch des Partnernetzwerkes für den 11. Mai 2012 geplant.

Als Linktipp enthält die eMail dann noch Verweis zu einem Exklusivinterview mit Karsten Windfelder über die Übernahme von Affiliwelt.net: blog.100partnerprogramme.de/2012/05/04/neustart-affiliwelt-wird-von-active-response-ubernommen/.

Rubrik bei meine-erste-homepage.com: Geld verdienen mit der eigenen Homepage, Auflistung von Partnernetzwerken.
Geschrieben am 05 May 2012 von Karl Oltmanns

Mehr Nachrichten in unserer Rubrik "Updates und News für Webmaster"

Facebook-Seite Twitter-Seite RSS-Feed

Bauen Sie Ihre Homepage kinderleicht (auch ohne Vorkenntnisse) mit der 1&1 Do-It-Yourself-Homepage, z.B. als private Homepage oder als Firmenhomepage.

1&1 Do-It-Yourself-Homepage


Homepage-Forum.de

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