Erster Versuch mit CSS

    html-seminar.de/woltlab/attachment/2240/Hallo liebe Community,

    da ich hier super unterstützt werde, möchte ich gleich noch eine Frage los werden:

    Ich versuche mich nun an CSS, im Buch "CSS lernen Websiten erstellen" welches ich hier erworben habe steht auf Seite 19, dass man 3 Möglichkeiten hat CSS auf seiner Website einzubinden, die Variante 3 wäre wohl sinnvoller, das als eine einzelne Datei zu bearbeiten.


    Dies habe ich nun getan, möchte auch gern ein Bild einfügen um es euch einmal zu zeigen.

    Wie ihr seht, seht ihr nichts bis auf "Lang="de">.

    Hab ich da wieder mal was falsch gemacht?

    Verwendeter Editor ist Visual Studio Code von Microsoft.

    Freue mich über Antworten :)

    Liebe Grüße

    Kevin

    Einmal editiert, zuletzt von Computerbaer (6. März 2020 um 08:06)

    Da sehe ich drei Fehler:

    <html> lang="de">

    muss so aussehen:

    <html lang="de">

    Und hier gehört das Gänsefüßchen nicht hin und die Überschrift h1 auch nicht:

    "<title><h1>CSS zum TESTEN</h1></title>

    Statt dessen gehört das h1 in den Body-Bereich, zwischen <body> und </body>.

    BTW: Code besser als Text kopieren und einfügen mit Codetags, das </> in der Werkzeugleiste oben. Dann hat man es leichter, ebenfalls mit Copy&Paste zu arbeiten.

    Vielen vielen Dank Sempervivum,

    ja als ich dann noch mal ausprobiert habe, ist mir der Fehler aufgefallen :)

    Danke schön, dass du mir dennoch geholfen hast - eine tolle Community....

    html-seminar.de/woltlab/attachment/2242/Nun habe ich doch eine Frage zum CSS einbinden :)

    Ich zitiere aus dem Buch "CSS lernen - Webdesign erstellen".

    Dort gibt es auf Seite 22 eine Aufgabe die ich jetzt erledigen darf :)

    Es heißt dort:
    "Ergänzen Sie obiges Beispiel - zu der Überschrift h1 und dem Absatz (p) soll ein weiterer Absatz und eine Aufzählung (ul) kommen.

    Diese 3 Elemente sollen die Farbe Rot, Orange, Gelb zugewiesen werden.

    Und die Frage ist dann, wie übertrage ich das in die design.css datei?

    Das ganze sieht bei mir dann so aus :

    weiterhin heißt es dann: "...für die fett hervorgehobenen Bereiche über den HTML-Befehl <strong> die Hintergrundfarbe Gelb wählen, alle Kursiven Textstellen sollen hellgrün dargestellt werden....."

    Jetzt bräuchte ich doch bitte mal Hilfe :)

    2 Mal editiert, zuletzt von Computerbaer (6. März 2020 um 08:43)

    Zitat

    Das ganze sieht bei mir dann so aus :

    Da hast Du wohl vergessen, etwas einzufügen.

    Und beachte bitte meinen Hinweis oben:

    Zitat

    BTW: Code besser als Text kopieren und einfügen mit Codetags, das </> in der Werkzeugleiste oben. Dann hat man es leichter, ebenfalls mit Copy&Paste zu arbeiten.

    So ist es auch viel einfacher und schneller als mit Screenshots.

    Code
    Jetzt soll ich die Schriften ändern, in der css.datei habe ich das nun so eingetragen, es funktioniert aber bei mir irgendwie überhaupt nichts

h1 {
    color: #ff9f00
    font-size: 28t
    font-family:arial, "lucida console"
}

    Vielen Dank :) Wenn ich dich nicht hätte.

    Code
    font-size: 28t

    Es gibt in HTML / CSS keine Einheit t. Schriftgrößen werden üblicherweise in px, em oder rem angegeben. Die Einheit pt ist nur für Drucker vorgesehen.

    Elemente wie strong und i dürfen nach den HTML-Regeln nicht zur Gestaltung verwendet werden. Das gilt bereits seit 20 Jahren und wurde mit dem aktuellen HTML (HTML5) noch einmal konkretisiert, da das bei vielen Webseitenerstellern nicht angekommen ist. Lernquellen, die das empfehlen oder fordern sind entweder veraltet oder es fehlt an Hintergrundwissen. Zumindest sollte bei der Verwendung solcher Elemente erklärt werden, wann sie in der Praxis überhaupt sinnvoll eingesetzt werden können.

    Das Buch "CSS lernen - Webdesign erstellen" kann ich bei Amazon nicht finden. Aus welchem Jahr stammt es?

    Einmal editiert, zuletzt von MrMurphy (6. März 2020 um 10:19)

    Zitat von MrMurphy
    Code
    font-size: 28t

    Es gibt in HTML / CSS keine Einheit t. Schriftgrößen werden üblicherweise in px, em oder rem angegeben. Die Einheit pt ist nur für Drucker vorgesehen.

    Elemente wie strong und i dürfen nach den HTML-Regeln nicht zur Gestaltung verwendet werden. Das gilt bereits seit 20 Jahren und wurde mit dem aktuellen HTML (HTML5) noch einmal konkretisiert, da das bei vielen Webseitenerstellern nicht angekommen ist. Lernquellen, die das empfehlen oder fordern sind entweder veraltet oder es fehlt an Hintergrundwissen. Zumindest sollte bei der Verwendung solcher Elemente erklärt werden, wann sie in der Praxis überhaupt sinnvoll eingesetzt werden können.

    Das Buch "CSS lernen - Webdesign erstellen" kann ich bei Amazon nicht finden. Aus welchem Jahr stammt es?

    Das Buch "CSS lernen - Webdesign erstellen" habe ich von html-seminar.de heruntergeladen, habe auch schon ein paar Aufgaben lösen können, jetzt scheitere ich an der Einbindung mit css.

    Das Buch, oder das E-Book ist es ja, ist aus dem Jahr 2018

    Beziehungsweise ich habe es hinbekommen allerdings nur mit der Hilfe von Sempervivum, weil er mir eine Seite gezeigt hat, wo Beispiele drin stehen... Aber das frustriert gerade weil ich die Aufgabe aus dem E-Book lösen will

    Problem auch hier,

    ich soll die Schrift in der Überschrift 2 fett machen.

    Habe ich getan, problem ist nur, es sieht bei beiden gleich aus.

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <title>
    CSS zum TESTEN
    </title>
    <link href="design.css" rel="stylesheet"
    </head>
    <body>
    <h1>Wichtigste Überschrift</h1>
    <p>Jetzt kommt ein Absatz</p>


    <h2><b>Überschrift 2</b></h2>
    </body>
    </html>

    <h2><b>Überschrift</b></h2>

    ob ich nun bei "h2 das b raus nehme oder nicht, beide varianten bleiben "Fett"

    Das entspricht den HTML-/CSS-Regeln. h2 und b stellen den enthaltenen Text jeweils fett dar. Durch b innerhalb von h2 wird der Text nicht fetter dargestellt, sondern das fett von h2 wird einfach durch das fett von b überschrieben. Die Darstellung ändert sich also nicht.

    Das entspricht einer Grundregel von CSS, die sich bereits aus dem Namen Cascading Style Sheets ergibt. Cascading (Kaskade, hier kaskadierend) hat hier die Bedeutung, das bestehende Anweisungen durch später folgende überschrieben werden können, und zwar mehrfach. Daraus folgt gleichzeitig, dass Überschreibungen vorhandene Angaben nicht verstärken, sondern löschen. Davon gibt es nur wenige Ausnahmen.

    2 Mal editiert, zuletzt von MrMurphy (6. März 2020 um 11:00)

    Noch eine Frage:

    ich soll ein Textblock verschieben mit 1.5 em, ich finde auf der Website SelfHTML auch nichts, das muss ja dann irgendwie in <p> rein?

    <p>

    text-ident: 1.5em ?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden