Einfügen der externen css datei?

Lona · 21.10.2010

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

sokie · 21.10.2010

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:

Herr_D · 21.10.2010

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">

Lona · 21.10.2010

AW: Einfügen der externen css datei?

Dankeschön da will ichs mal versuchen