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 wiki.selfhtml.org/wiki/CSS - 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:


onlineconfig CMS
www.bentob.de/www/onlineconfig-CMS_211.php - Onlineconfig CMS ist ein sehr einfach zu bedienendes Content Management System für Websites. Über eine intuitiv zu bedienende browserbasierte Benutzeroberfläche werden die Inhalte der Website gepflegt. Das CMS berücksichtigt hierbei die Erstellung und Pflege seofreundlicher Webseiten. Eine integrierte Benutzerverwaltung und zahlreiche Zusatzmodule runden das Angebot ab. Der Aufbau und die Pflege eines Onlineshops ist dabei ebenso möglich wie der Aufbau einer Portallösung für unterschiedliche Bereiche. Webmaster können z.B. durch das onlineconfig CMS Zusatzmodul meconta über ein System ein Webseitenbaukasten aufbauen und die einzelnen Websites über eine zentrale Administrationsoberfläche von den Benutzern selbst bearbeiten lassen. Der Benutzer kann dabei aus vorhandenen Layouts das für seine Seite passende Design auswählen und mit wenigen Klicks eine responsive Website zusammenbauen.
Gepostet am 05.07.2015 von meine-erste-homepage.com
Webagentur Wechsler Websolutions in Luzern
www.wechsler-websolutions.ch - Webagentur Wechsler Websolutions in Luzern
Gepostet am 03.07.2015 von meine-erste-homepage.com
Responsive Besucher-IP-Anzeige als Widget für die eigene Webseite
wie-ist-meine-ip-adresse.com - IP-Widget zur Ausgabe der Besucher-IP auf der eigenen Webseite, das Widget gibt es auch in einer modernen, responsiven Version. Hier gibt es die Codeschnipsel.
Gepostet am 01.07.2015 von meine-erste-homepage.com
Webwave.ch - Onlineshop-Dienstleister aus Rheineck in der Schweiz
www.webwave.ch - Ihre professionelle Webagentur aus Rheineck in der Schweiz für moderene Webseiten und Onlineshops, welche sich sehen lassen! Beratung im Bereich Online Marketing Kampagne.
Gepostet am 29.06.2015 von meine-erste-homepage.com
Responsive Webdesign & Mobile Webdesign
www.chris-andfriends.de/blog/responsive-webdesign-und-mobile-webdesign-optimierung-fuer-mobilgeraete.html - Responsive Webdesign & Mobile Webdesign: Webseite für Mobilgeräte und Tablets optimieren
Gepostet am 24.06.2015 von meine-erste-homepage.com
Clever-Webspace.de - kostenlose Subdomain
clever-webspace.de/index.php/order - bei Clever-Webspace.de können Sie eine kostenlose Subdomain wie z.B. gratisdomain.clever-webspace.de erhalten.
Gepostet am 22.06.2015 von meine-erste-homepage.com
cssSlider.com - Programm zum Erstellen von CSS-Fotodiashows
www.cssslider.com - kostenpflichtiges Programm zur Erstellung von wunderschönen, responsive CSS-Slidern (selbstablaufende Fotodiashows) ohne jQuery und ohne Javascript. Retina-Ready, mit der Möglichkeit Texte zu den jeweiligen Fotos darzustellen. Für alle modernen Ausgabegeräte & Browser.
Gepostet am 20.06.2015 von meine-erste-homepage.com
Plattform für Gründer
Kostenloser Service zur Kontaktknüpfung für Gründer.
Gemeinsam für eine Gründungsidee, zusammen an einem Startup. Cofounder auf www.startupsfounder.com
Gepostet am 18.06.2015 von meine-erste-homepage.com
Webdesign und Glückwunschseiten
www.1webdesign.eu - Eigenbeschreibung des Anbieters: Webdesign für alle Anlässe zu fairen und übersichtlichen Preisen für kleine Firmen, Vereine, Selbstständige und Freiberuflicher. Außerdem Erstellung ganz besonderer Glückwunschseiten.
Gepostet am 16.06.2015 von meine-erste-homepage.com
Homepageanleitung.de
homepageanleitung.de - Blog mit kostenlosem eBook rund um die Erstellung einer Homepage
Gepostet am 10.06.2015 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