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:

Diese Webseite weiterempfehlen:


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


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.
»

Webhosting inkl. Homepagebaukasten!


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


Bildschirmdarstellung von Webseiten online testen - Top Tool!
quirktools.com/screenfly - fantastisches Tool zum Testen von responsiven Webseiten auf sehr vielen Ausgabegeräten. Sie können die gängigen PC-Monitore, Tablets, Smartphones etc. nach Größe bzw. Marke/Hersteller auswählen und schwupps wird die eingegebene URL so angezeigt, wie sie z.B. auf dem iPhone 3 aussehen würde. Mit einem Klick lässt sich der Test von Hoch- auf Querformat ändern, zudem kann auch eine individuelle Bildschirmgröße eingestellt werden. Da es heute eine unglaubliche Vielzahl an Geräten und Bildschirmgrößen gibt, ist das Screenfly-Tool wirklich ein sehr gutes und quasi unverzichtbares Werkzeug, um die Darstellung von responsiven Webseiten zu überprüfen. Top-Tool für jeden Webdesigner!
Gepostet am 20.01.2016 von meine-erste-homepage.com
Socicon Generator
Social Icon Generator - unter der URL http://www.socicon.com/generator.php finden Sie einen sehr guten Socicon-Generator. Der Generator erstellt individuell anpassbare Social-Icons für unglaublich viele soziale Netzwerke als .png-Dateien. Die Größe, die Iconfarbe, der Hintergrund und die Form können beliebig angepasst werden. Sie können somit ganz einfach farblich passende Social-Media-Icons zu Ihrer individuellen Webseitenfarbe erstellen.

Hier ein Beispiel mit eckigen Social-Media-Icons mit unserer Linkfarbe #2175bc auf schwarzem Hintergrund:

Twitter Facebook Google_Plus Pinterest

Und hier ein weiteres Beispiel mit runden Social-Media-Icons mit gelbem Hintergrund:

Twitter Facebook Google_Plus Pinterest

Und zum Schluß unser Blauton als Hintergrund, mit weiße Icons, dabei eckige Grundform mit abgerundeten Ecken:

Twitter Facebook Google_Plus Pinterest

Wir finden ein echt fantastisches Tool!
Gepostet am 12.01.2016 von meine-erste-homepage.com
Bildgigant- Online-Bilddienstleister
www.bildgigant.de - Eigenbeschreibung des Anbieters: Machen Sie Ihre Kreativprojekte interessanter mit einem lizenzfreien Bild aus unserem Shop. Unsere Bilder können zum Beispiel als Hintergrund oder Titelbild für Ihre Webseite, Ihr Produkt, Ihren neuen Flyer, eine Präsentation oder eine nette Grußkarte verwendet werden. Unser Sortiment wird in unterschiedlichen Auflösungen angeboten und eignet sich zur Anwendung im gesamten Digital- und Printbereich. Verkaufen Sie jetzt Ihre Bilder auf Bildgigant und Sie bekommen 50% des Erlöses. Wir kategorisieren und keyworden Ihre Bilder kostenlos!
Gepostet am 12.01.2016 von meine-erste-homepage.com
Juannas bunte Smilie-Sammlung
www.juanna.ch/smilies/index.htm - Juannas bunte Smilie-Sammlung
Gepostet am 12.01.2016 von meine-erste-homepage.com
WebSite X5 jetzt in der Version 12 erhältlich
Incomedia hat die Version 12 seiner bekannten Webdesign-Software "WebSite X5" veröffentlicht.
Zu den umfangreichen Neuerungen gehören folgende Features:

- Neue Versionen: Professional 12 (199,99€), Evolution 12 (69,99€) und Home 12 (19,99€)
- Responsive Webdesign für bis zu 1.000 Templates
- Für eine optimale responsive Darstellung können Breakpoints definiert werden
- Prüfen von Produktverfügbarkeiten im WebSite X5 Control Panel (auch über mobile Geräte)
- Neues Datenschutz- und Sicherheitszentrum (Für Cookies und reCaptcha)
- Automatische Anpassung der Webseitensprache

Weitere Informationen im Web unter
http://www.websitex5.com/de/
Gepostet am 06.01.2016 von meine-erste-homepage.com
Blogplaner zum Ausdrucken oder als fertig gedruckte Version
Bei einem Online-Blog gibt es allerhand zu tun: Es müssen regelmäßig Posts abgesetzt werden, Updates müssen gemacht werden, bestimmte Themen je nach Blog jahreszeitlich angegangen werden, es gibt Ausgaben und Einnahmen und vieles mehr.

Für diese organisatorischen Dinge gibt es hier einen Blogplaner: http://kreavida.de/blogplaner-2016-zum-kostenlosen-download/. Den Blogplaner für 2016 können Sie als gedruckte Version direkt auf der Webseite bestellen.
Gepostet am 06.01.2016 von meine-erste-homepage.com
Haben Sie ein Interesse an einer obdachlosen Zeitung?
Einen sehr interessanten Bericht zum Thema Homepages und soziale Netzwerke findet sich in der Welt Digital: http://hd.welt.de/Kultur-edition/article150328869/Haben-Sie-Interesse-an-einer-obdachlosen-Zeitung.html
Gepostet am 06.01.2016 von meine-erste-homepage.com
Frohes Neues Jahr!
Gepostet am 01.01.2016 von meine-erste-homepage.com
Silvestergruss
Gepostet am 31.12.2015 von meine-erste-homepage.com
Frohe Weihnachten
Gepostet am 24.12.2015 von meine-erste-homepage.com

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

03 GIF-Banner


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 MyWebseite jetzt 30 Tage kostenlos testen