CSS (Cascading Style Sheets) in HTML-Seiten einbinden

  • Ich habe auf der Seite https://www.html-seminar.de/st…ets_in_html_einbinden.htm eine Anleitung gefunden wie man ein CSS in ein HTML einbindet ...


    Das habe ich ausprobiert ... geht nicht ... was ist da falsch?


    Html :


    <html>


    <head>

    <link href="design.css" rel="stylesheet">

    <meta content="text/html; charset=ISO-8859-1">

    <meta content="text/html; charset=ISO-8859-1"

    http-equiv="content-type">

    <title>bbbbb</title>


    </head>


    <body>


    <br>


    <br>


    </body>


    </html>



    und in design.css steht


    h1 {

    color: red;

    background-color: black;

    }


    Danach habe ich dann eine Weisse Seite, wenn ichdie HTML im Browser öffne ...


    Ich finde den Fehler nicht...


    Woran ligt es dass das nicht geht


    Ich habe auch versucht ob es geht wenn ich den CSS Style ins HTML einfüge wie das als Methode 2 beschrieben ist. Geht auch nicht...


    Danke

    brainstuff





  • Wo muss die stehen ... in dem Tutorial steht die nirgens ..


    Ich habe jetzt

    <h1>

    aaa

    /h1>

    in den body geschrieben ... da kommt jetzt was ..


    Ist es das was in dem Tutorial fehlt?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von brainstuff ()

  • in der css gibt man zb h1 ,h5 , p , div und so weiter ein.

    Die müssen aber im html ,also zwischen den body auch vorhanden sein,weil sonst gibst du irgendein element eine andere Farbe was gar nicht da ist .

    Habe das Tutorial noch nicht gesehen ,aber mache ich mal gerade


    Zitat

    So steht es im Tutorial ,was auch vollkommen korekt ist

  • scheint so zu sein, dass das fehlt ... es geht jetzt jedenfalls ... aber ich habe es versucht da jetzt einen 2. Style dazu zu fügen

    h2 {

    color: yellow;

    background-color: black;

    }


    wenn ich jetzt


    <h2>

    aaa

    /h2>

    in den body schreibe kommt eine schwarze schrift ... wie muss man andere styles definieren?   


  • basti1012 ja h1>jetzt HTML lernen mit CSS</h1> steht im tutorial aber in der Variante 2 nichtim 3 wo ich das nicht gefunden habe ... und

    < h2>jetzt lernen CSS</h2> (ohne das Leerzeicehen nach <) geht bei mir auch noch nicht, obwohl ich einen Style für h2 ins CSS geschrieben habe.--

    Code
  • Wie auch immer.

    Mehrere styls gibst du so dazu zum Beispiel


  • @basti1012 Danke .. ich habe das jetzt verstanden und es geht ... kannst Du mir noch erklären, wie ich so einen Kasten:


    #box2 {

    background-color: blue;

    position: absolute;

    width: 200px;

    height: 90px;

    top: 655px;

    left: 280px;

    }


    Bei einem mouse over zum "wackeln" (oder zum Ändern der Farbe) bringen kann und dass er dann bei einem Klick darauf eine Seite öffnet?


    Und: ich übe zur Zeit mit Kompozer ... das kann zwar CSS, aber nicht mit einer WYSIWYG Vorschau von der Web seite ... kennst Du irgend ein Programm, was das kann?


    Danke,

    brainstuff

  • Bei einem mouse over zum "wackeln" (oder zum Ändern der Farbe) bringen kann und dass er dann bei einem Klick darauf eine Seite öffnet?

    Das geht. Wackeln habe ich in Beispiel mit keyframes gemacht.Da gibt es auch andere möglichkeiten.

    Und die Box verlinken kann man auch mit mit verschiedene Wege lösen

    Einmal Javascript cllick event

    oder ein a tag um den div bauen.

    Ich habe es mit location.href bein oncklick gemacht,

    Aber dann probier mal weiter aus. Wenn was ist meld dich

    PS: Mit keyframes kann man noch viel mehr machen ,zb zoomen ,strecken,drehen,blinken und das schnell langsam und vieles mehr.

  • Das geht mit der Pseudoklasse ':hover' - und damit es anklickbar ist und eine neue Seite öffnet, muss es ein Hyperlnk sein. Also so ein

    '<a href="irgendwas.de">blabla</a>'

    etwa so...

    Und wenn du einen Editor suchst, solltest du die Finger von diesen WYSIWYG Editoren lassen! Die produzieren in der Regel keinen guten Code und bereiten mehr Probleme, als dass sie nützlich sind.

    Versuche mal Notepad++ https://notepad-plus-plus.org/download/v7.5.6.html damit kannst du auch deine Seite direkt in einem Browser anzeigen lassen!

  • basti1012 Deine Version ist genau das was ich gerade suche ... aber ich bin noch nicht soweit, dass ich es fertig bringe das in ein ausgelagertes CSS umzuwandeln ...


    Ich habe jetzt ein HTML in dem steht:


    <div style="font-weight: bold;" id="titel01"><big><span style="font-family: Tahoma;">free &amp; evolutive corporations</span>

    </big></div>


    und im CSS steht


    #titel01 {

    color: white;

    background-color: green;


    position: absolute;

    border-color: green;

    border-width: 5px;

    border-style: solid;

    left: 50px;

    width: 300px;

    height: 22px;

    top: 110px;

    left: 300px;

    }


    Das gibt dann einen Kasten in dem "evolutive corporations" steht ... aber der soll beim Mouse over "aufleuchten" und bei enem Klick drauf die Seite "evolutive corporations" öffnen...


    wie integriere ich jetzt den Style von Deinem Beispiel?


    Auf der Seite hat es mehrere Kästen, die jeweils auf irgend eine Unter-Seite führen sollen. (das Ganze ist von den "Kacheln" von Windows 8 abgeleitet).


    Bitte zeige mir wie das geht. Ich möchte unbedingt lernen, wie man solche Styles ausgliedert.

    Ich habe inzwischen gemerkt, dass das CSS System eigentlich viel besser ist, wie das WYSYWG System .. man kann für jeden Platz auf dem Screen einen "Kasten" basteln, in dem man festlegt, was da drin passieren muss .. das ist eigentlich genial.


    Danke,

  • welche Version ?

    naja

    HTML
    1. <html>
    2. <head>
    3. <link rel="stylesheet" type="text/css" href="link zum css">
    4. </head>
    5. <body>
    6. <div style="font-weight: bold;" id="titel01"><big><span style="font-family: Tahoma;">free &amp; evolutive corporations</span>
    7. </big></div>
    8. </body>
    9. </html>

    jetzt mußt du die ganzen inline styl raus schmeißen und vorallem dein <big>

    HTML
    1. <html>
    2. <head>
    3. <link rel="stylesheet" type="text/css" href="link zum css">
    4. </head>
    5. <body>
    6. <div id="titel01"><span>free &amp; evolutive corporations</span>
    7. </div>
    8. </body>
    9. </html>

    und setzt die gelöschten Werte in deiner ausgelagerten css mit rein.


    PS: <big> = font-weight: bold; oder 900