HKHLogo

CSS als externe Datei

html knowhow







CSS als externe Datei

Diese Seite sieht eigentlich ganz normal aus. Das besondere ist aber, dass das CSS in eine komplett andere Datei ausgelagert wurde.
Das hat nun den Vorteil, daß man diese "Vorlage" mit dem Befehl <link rel="stylesheet" href="beispiel.css"/> im Head für alle anderen Seiten benutzen kann.

So sieht der CSS-Quellcode aus

body {background-color: powderblue;width:100%; font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif; font-size:0.8em;}
p {color: black;margin-top: 3px;margin-bottom: 3px;text-align: left;font-weight: normal;font-size: 1.3em;}
h1 {color: yellow;}
h2 {color: white;text-align:left;background-color:teal;margin-left:20px;height:auto;valign:middle;}
h3 {color: black;font-size:1.3em;background-color:white;margin-left:20px;font-weight: normal;}
h4 {color: white;font-size:1.3em;background-color:teal;padding-left:20px;padding-right:20px;font-weight: bold;}
tr {color: black;text-align:left;background-color:transparent;padding: 0px; border: 0px solid;border-width:0.5em;border-color:white;font-size:1.3em;}
a {color: purple;text-decoration:none}
span {color: gray;}
td {color: black;text-align:left;background-color:white;margin-left:20px;border-style: solid; padding: 0px; border: 1px solid white;font-size:1.0em;height:auto}
th {color: black;text-align:left; valign:middle; background-color:teal;border-style: solid; padding: 0px; border: 0px solid lime;font-size:1.0em;height:auto}
table {border:1em;border-color:lime;width:95%;border-spacing: 0px; border-collapse: separate;cellspacing:0; cellpadding:0}
div {color: transparent;height:40px;border: 0px solid black;}
img {display: block; margin: 0 auto;width:30%;height:auto;float:left;}
.table {border:0em;width:90%;background-color:transparent;text-align:center;}
.td {color: black;text-align:left;background-color:transparent;font-size:1.0em;border:0px;height:10px}
.h1 {color: purple;font-size:1.5em;valign:bottom;}
.h2 {color: #008080;font-size:1.6em;background-color:transparent;font-family: "Sigmar One"; }
.div {left: 2%;top: 2em;position:absolute;height: 2em;width: 5.6em}
#img {height:10px}
.img2 {width:40px;height:auto}
.wrapper {width:100%;float: right;height: 200px;}
.fixed-bg {background-attachment: fixed;background-repeat: no-repeat;background-size: cover;background-position: right right;height: 300%;
width: 100%;display: table;}
.fixed-bg h1 {display: table-cell;vertical-align: middle;}
.scroll-bg {background-color: white;padding: 10px 10px;color: black;font-size:0.8em;}
/* first section */.bg-1 {background-image: url('../bilder/monroeoben.jpg');}
/* third section */.bg-2 {background-image: url('../bilder/monroeunten.jpg');}
#parallax-background {background-image: url("../Bilder/plakat2.jpg"); width: 100%; background-color:#D2FFEA; height: auto; background-size: 100%; background-attachment: fixed; background-repeat: no-repeat; text-align:center;}
div#hintergrundbild {background-image: url(../Bilder/verlauf.jpg);background-size: 100%;}
th {height:auto;}
#img30 {width:100%;}
.container {position: relative;width: 100%;left: 0%;}
footer {background-color:teal;font-size:1.3em;text-align:center}

Und so sieht´s aus, das Styling mit CSS

Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können.

Html, CSS und Java bieten da super Möglichkeiten der Webseiten-Gestaltung. Bevor Sie aber mit Ihrem Homepage-Projekt beginnen, sollten Sie sich über Grundsätzliches informieren, damit Sie wissen, was alles auf Sie zukommt. Ich gebe Homepage-Designern Tipps, wie sie ihren Webauftritt verbessern können.

homepagebasics
Space
homepagebasics
Space
homepagebasics

Viele, die eine Webseite betreiben wollen, greifen auf vorgefertigt Seiten zurück. Die gibt es z.B. bei Ionos, Jamdo, Strato und vielen, vielen mehr. Aber wer etwas Individuelles haben möchte, der macht alles selber. Es lohnt sich garantiert. Ein Styling, das keinem anderen gleicht.

Ich möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können, bieten.

Alle hier dargestellten Modelle habe ich persönlich getestet und sie funktionieren hervorragend, wie Sie auf den folgenden Seiten feststellen werden.

Aber wie machen wir das am Besten?

Ich habe Ihnen hier ein paar ausgewählte, sehr praktische Abwendungen vorgestellt, die Sie bestimmt gut gebrauchen können.

Außerdem habe ich versucht, meta-tags und css-tags verständlich zu erklären, ohne viel Fachchinesisch.

 Viel Spaß ...


Anwendungen

Bilder

Bilder

Bilderrotation

Borderbild

Hovereffekte

Unicodesymbole

Slideshows

Runde Ecken

Menüs

Medien

Audio

Video

Google Maps

Texte

Aufzählungszeichen

Textboxen

Klick & Copy

Laufschrift

Schreibmaschinentext

Zeilenhöhe

Schatten

Kolumnen

Überschriften

Schrifteinbau

Texttrennung

Silbentrennung

Bildschirm

Backgroundbild

Helligkeit

Suchmaschinen

Ladeanimation

Screenshot

Tabellen

Sortierbar

xxxx

yyyy

Buttons

Buttons

Popupinfo

Vor-Zurück

Gestaltung

Farbgraduierung

Gästebuch

Gototop-Button

Hilfe-Popup

QR-Code

Webseitsuche

Aufzählungszeichen

Übersetzung

Frames

Layer Table

Guter Rat!

Verzichten Sie auf aufwendige Bild und Textgestaltung, vermeiden Sie Tabellen, Hovereffekte und sonstiges Schniko-Schnako.

Warum?

Sie möchten mit Ihrer Webseite Computer-, Laptop- und Smartphone-Benutzer erreichen. Das sind ganz unterschiedliche Bildschirmgrößen. Aber Ihre Seite sollte für jedes Gerät passen. Deshalb ist es auch wichtig, Bildergrößen nicht in px (Pixel) sondern in % (Prozent) anzugeben. 500px-Bildgröße bedeckt auf dem Computer nur etwa 1/3 der Bildschirms, auf Smartphones sprengt es das Bild. Aber 50 % bleiben immer 50 %!

Alle hier dargestellten Modelle habe ich persönlich getestet und sie funktionieren hervorragend, wie Sie auf den folgenden Seiten feststellen werden.








Kontakt    Datenschutz    Impressum