Antworten auf deine Fragen:
Neues Thema erstellen

Einfügen der externen css datei?

Lona

Aktives Mitglied

Ich habe mal versucht nach diesem Tuterial

eine Webseite zu erstellen...nun muss ich eine dumme Frage stellen....wie füge ich die externe, css in die Webseite ein?
Hab hier mal den Quelltext kopiert

HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Webdesign mit (x)html und css</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">



</style>




</head>


<body>

<div id="layout">

<h1><span></span>Webdesing mit xhtml und css</h1>


<div id="navigation">

<ul>

<li class="blau"><a href="">Startseite</a></li>

<li class="grau"><a href="">Kontakt</a></li>

<li class="gruen"><a href="">Gallerie</a></li>

<li class="orange"><a href="">Impressum</a></li>

</ul>

</div>


<div id="inhalt">

<h2>Überschrift</h2>

<p>

Text

</p>

</div>


</div>


<div id="footer">

<p>

<span>xhtml und css</span>

</p>

</div>


</body>

</html>

und hier die css

Code:
 /* #id, .class, html-tag { Anweisung;  Anweisung2; } */

html,body {

height:100%;

margin:0;

padding:0;

font-size:100.01%;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-align:center;

background:#ccc;

}

* html #layout {

height: 100%;

}
#layout {

margin:0 auto;

width:780px;

text-align:left;

min-height:100%;

height:auto;

border-left:1px solid #000;

border-right:1px solid #000;

background:#fff url(bilder/inhalt_bg.png) repeat-y;

}

h1 {

width: 100%;

height: 167px;

position: relative;

padding:0;

margin:0;

background:#fff;

}

 

h1 span {

background: url(bilder/header.png) no-repeat;

position: absolute;

width: 100%;

height: 100%;

}
h2 {
font-size:120%;
font-weight:normal;
border-bottom:1px solid #999;
margin:0 2em 0 0;
}

#navigation{
    display:block;
    height:25px;
    font-size:0.9em;
    background:#000 url(bilder/navi_bg.png) repeat-x;
    border-bottom:2px solid #fff;
}

#navigation ul{
    margin:0 auto;
    padding:0;
    list-style-type:none;
    width:37em;
}


#navigation ul li{
    display:block;
    float:left;
    margin:0;
}

#navigation ul li a{
    display:block;
    float:left;
    color:#fff;
    text-decoration:none;
    padding:0 3.5em 0 1em;
    line-height:25px;
}

#navigation ul li a:hover {
    color:#000;
}

.blau {
    background: url(bilder/navi_blau.png) repeat-x;
    border-left:1px solid #fff;
}

.grau {
    background: url(bilder/navi_grau.png) repeat-x;
    border-left:1px solid #fff;
}

.gruen {
    background: url(bilder/navi_gruen.png) repeat-x;
   
    border-left:1px solid #fff;
}

.orange {
    background: url(bilder/navi_orange.png) repeat-x;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
}

#inhalt {

padding:4em 200px 8em 150px;

font-size:0.85em;

color:#666;

line-height:1.4em;

}

#footer {

background:url(bilder/footer_bg.png) repeat-x left bottom;

width:780px;

height:196px;

margin:-196px auto;

text-align:center;

font-size:0.7em;

color:#666;

}

 

 

#footer p {

padding:0;

margin:0;

height:196px;

background:url(bilder/footer.png) no-repeat right bottom;

}

 

#footer span {

position:relative;

top:160px;
}


Ich hoffe ihr könnt mir nen Tipp geben,denn das ist leider nicht angegeben und ich kriegs nicht hin eine Webseite zu erstellen
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

AW: Einfügen der externen css datei?

den css soce fügst du in eine datei ein - nennen wir sie mal style.css. Wenn diese datei im gleichen Verzeichnis liegt, wie die Seite, fügst du im head-Bereich die Verlinkung so ein:
HTML:
<link href="style.css" type="text/css" rel="stylesheet" />
ps: der öffnende und schliessende <style> tag gehört NICHT in die css Datei.

zur Darstellung von code in Diskussionen sind die codeWerkzeuge ein gutes Hilfsmittel:
codeyoaf.png
 
Zuletzt bearbeitet:

Herr_D

offline

AW: Einfügen der externen css datei?

css als style.css speichern

dann einfügen in den head-Bereich deines Dokumentes:

Code:
<link rel="stylesheet" href="style.css" type="text/css">
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben