CSS einfügen

[Valentinchen]

Hallo
ich möchte gerne CSS lernen, je mehr ich lese und anschaue, werde ich verwirter.
Ich kapiere einfach nicht wo ich css einfügen muss.Auf was es ankommt.
Ich will mir die ersten Schritte optisch darstellen, d.h. html in schwarz, css in blau und nach Bedarf der Rest in einer anderen Farbe.
Gibt es da gute Beispiele zum Nachvollziehen oder kann mir Jemand behilflich sein?
Um Hilfe wäre ich sehr froh!
Ich wünsche Allen einen guten Tag! Valentinchen

 

[Doitsu]

AW: CSS einfügen

Am besten lernt man immer noch, indem man etwas macht..
Also setzt dich einfach hin, un bau eine mehr oder wenige Sinnlose HP, die auf CSS basiert..
Nachschlagen kann man ganz gut hier.. Einfach mal umschaun, und dann ein paar CSS-Eigenschaften miteinander verbinden..
Ansonsten: google oder Forum, wenn du mal was suchst, aber den Befehl nicht kennst.. :>

*hust* Buecher kaufen is auch nicht die Welt.

 

[beautyIAF]

AW: CSS einfügen

Learning by doing, kann dem Vorposter nur beipflichten!!

Werd dir klar, was du erstellen möchtest, am Besten mit einfachen Sachen anfangen, dann bau dir z.B. ne kleine Seite zusammen und erstelle dir dann ein CSS File und beginne von Grund auf, beispielsweise Hintergrundfarbe wechseln, Tabellen formatieren, oder Div Container manipulieren...

Welche Bücher hast du denn bisher gelesen??

 

[maromedia84]

AW: CSS einfügen

Für die das lesen schwer fällt gibt es auch noch schöne lehrvideos !

 

[leohh]

AW: CSS einfügen

Eigentlich ist das wie als ob man einen Dialog mit seinem Browser fuehren wuerde.
Du sagst deinem Browser mittels CSS, wie du dein HTML (Markup) haben moechtest und der Browser antwortet dir, indem er dir die interpretation deiner Ausfuehrungen anzeigt.

Simples Beispiel:
Hallo mein lieber Browser. ( das entspricht in etwa dem oeffnen des Browsers )
Ich moechte, dass du mir alle Ueberschriften der hoechsten Ordnung(h1) so um die 2.2em gross(font-size) machst, ihnen eine huebsche, rote(#eff) Farbe(color) mitgibst und es waere irgendwie auch noch schoen, wenn du eine Hintergrundfarbe(background-color) fuer diese Tags, in einem zarten Blau(#efefff) anlegst. Zu guter letzt, machst du mir bitte eine Breite(width) die 15em entspricht.

Das waere der Dialog, denn du dir in etwa aufsagst und den du waerend du ihn vor dich her murmelst gleich in harten Code schreibst, was dann so aussehen koennte

h1 {
   font-size: 2.2em /* Schriftgroesse */
   color: #eff; /* Schriftfarbe */
   background-color: #efefff; /* Hintergrundfarbe */
   width: 15em; /* Breite - unnoetig aber nur mal so als Beispiel */
}

eigentlich musst du nur die Eigenschaften und dazugehoerigen Werte erstmal lernen, der rest wie z.B. zusammenfassen von Eigenschaften ( Shorthand ), Browserspezifische Hacks, Tipps und Trix oder das Wichtigste ueberhaupt, das Boxed-Model lernt man mit der Zeit ueber Bücher, Mailinglisten oder Foren. Natuerlich kann ich mich meinen Vorrednern auch nur anschliessen und ihnen beipflichten, dass der beste Weg zur Erleuchtung nur sein kann, wenn man viel und ausdauernd selber tut und macht.

 

[Norbert Schumann]

AW: CSS einfügen

am besten ist-du besorgst dir einen html editor. dort kannst du versuche starten und gleich auch sehen, wie eine dazugehörige css datei ausschaut. ich denke, das ist der bessere weg, css zu erlernen.

dann achte bitte darauf, das es zwei verschiedene möglichkeiten gibt. erstere schreibt den css code direkt in das html dokument zum code, die andere verweist auf die css textdatei-in dieser befinden sich die definitionen.

empfehlung: expression web von microsoft. dort hast du die css befehle auch gleich farblich abgegrenzt von anderen codebestandteilen.

 

[sfischer]

AW: CSS einfügen

hallo,

für das grundstudium kann ich dir von little boxes empfehlen! das ist ein sehr guter einstig!

gruß sfischer

 

[lauffreak]

AW: CSS einfügen

Little Boxes wurde schon empfohlen, css-faq oder selfhmtl gegen auch gut info.

und dann: lesen und probieren !

Grüße- lauffreak

 

[leveler]

AW: CSS einfügen

hi, guten morgen, bin grad selbst dabei mich mit der materie auseinanderzusetzen, da gibt es noch diesen schönen link hier:

 

[Norbert Schumann]

AW: CSS einfügen

nun-ich persönlich lerne besser, wenn ich etwas praktisch vor augen habe. nachlesen, was da genau passiert ist-kann ich immer noch.

 

[Valentinchen]

AW: CSS einfügen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<title>Muster-Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<meta name="description" content="Muster-Homepage mit einem Beispiel, wie eine Homepage erstellt wird.">
<meta name="keywords" content="Muster, Homepage, Beispiel, der, Erstellung, einer, Webseite">
<meta name="language" content="de">
<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

<div id="rahmen">
<div id="header">
<div id="logo">
<h1>
Meine erste Homepage
</h1>
</div>
<div id="navigation">
<ul>
<li>
<a href="index.html">Startseite</a>
</li>
<li>
<a href="fotos.html">Fotos</a>
</li>
<li>
<a href="links.html">Links</a>
</li>
<li>
<a href="gaestebuch.html">G&auml;stebuch</a>
</li>
<li>
<a href="impressum.html">Impressum und Kontakt</a>
</li>
</ul>
</div>
<div id="inhalt">
<h2>
Nachfolgend ein Blindtext
</h2>
<p>
</div></div></div></body>

</html>
Hier ist mal eine Datei, kann mir jemand sagen, wo ich die CSS plaziere. Ziel ist das Auslagerungs Css, also ein CSS da mache ich die Änderung und die Änderung ist für all Seiten gültig.

Noch eine Anmerkung: ich versuche ja auszuprobieren und auch zu lesen und nachzuvollziehen. Ich habe leider ein Knopf in der Leitung. Vielleicht lest Ihr nochmals meinen ersten Text, ich glaube, er wurde nicht ganz verstanden. Vielleicht mache ich ein durcheinander von Html und css, kann es offenbar nicht recht auseinander zu halten.
Ich hoffe auf Hilfe. Grüässli Valentinchen

 

[Norbert Schumann]

AW: CSS einfügen

<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">


hast du doch schon drin den verweis! so, jetzt brauchst du nur die css (textdatei mit dem namen: stylesheet.css) anlegen und in den hauptordner deiner webseite (dort wo alle html seiten liegen)packen.

 

[Richum]

AW: CSS einfügen

Noch eine Anmerkung: ich versuche ja auszuprobieren und auch zu lesen und nachzuvollziehen. Ich habe leider ein Knopf in der Leitung. Vielleicht lest Ihr nochmals meinen ersten Text, ich glaube, er wurde nicht ganz verstanden. Vielleicht mache ich ein durcheinander von Html und css, kann es offenbar nicht recht auseinander zu halten.
Ich hoffe auf Hilfe. Grüässli Valentinchen

Ich denke das ist dann wiederum für andere schwer zu realisieren, wie deine Lernvorstellung ist. Ich habe mir dabei gedacht HTML Schwarz CSS Blau?
Das sind doch zwei verschiedene Dateien warum brauchst du unterschiedliche Farben?
Sicher hast du es ganz anders gemeint, aber man kann sich in sowas schlecht hineindenken(also ich spreche jetzt mal für mich ) weil dies deine ganz spezielle Vorstellung ist.
Vielleicht beschreibst du das noch einmal etwas genauer und möglicherweise kann man dir dann etwas entgegenkommen.
Ansonsten kann ich mich meinen Vorrednern nur anschließen praktische Erfahrung sammeln und immer weiter machen. Ich habe am Anfang auch gedacht "Um Himmels willen das verstehst du niemals" aber CSS und HTML sind wirklich simpel.

 

[Valentinchen]

AW: CSS einfügen

Hallo,
danke für die Antworten.
Zu den Schriftfarben: stellt Euch das ganze so vor: für wichtige Dinge nimmt man normalerweise Marker in gelb, orange etc und markiert die wichtigen Sachen. Da ich das nicht kann mit dem Computer, nehme ich halt jeweils farbige Schrift.

Nochmals zu css: was kommt in den head und was in den body und ist es egal, vor dem html oder wenn das html abgeschlossen ist.
Allen einen schönen Abend! Valentinchen

 

[Richum]

AW: CSS einfügen

Für mich liest sich das langsam so als hättest du dich von inline CSS-Definitionen, internen Stylesheets und externen Stylesheets verwirren lassen.
Grundsätzlich ist es so das diese drei Möglichkeiten zusammen funktionieren. Aber am sinnvollsten ist das externe stylesheet, das wie oben
(<link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">)
im Head eingebunden wird. In dieser CSS-Datei machst du alle deine Angaben. Dafür muss außer dem Link nichts in deiner HTML-Datei stehen.
Optional kannst du diese Definitionen auch in deine HTML-Datei ebenfalls in den Head schreiben, anstatt deinem stylesheet!
Natürlich ginge dies auch zusätzlich zu einem externen stylesheet, was aber weniger sinnvoll ist.
inline Styles schreibst du direkt in das Tag also z.B. <p style="border:1px dotted;">Beispiel</p>. Die kannst du allerdings die meiste Zeit außer Acht lassen, und sie blasen deine HTML-Seite nur unnötig auf.
Also, kurz und bündig:
Erstelle ein externes Stylesheet, mit allen deinen Angaben und binde diese so <link rel="stylesheet" type="text/css" Media="screen, projection" href="stylesheet.css"> im Head ein.

 

[bero08]

AW: CSS einfügen

Hi,
hier ist noch eine ganz nette Seite zum thema CSS.
The StyleWorks { Herzlich Willkommen }

 

[Valentinchen]

AW: CSS einfügen

body {font-family: Arial, Helvetica, sans-serif; background-color: #ffffff;}
a {color: #00008B; font-weight: bold;}
a:visited {color: #3366CC; font-weight: bold;}
a:active {color: #ff0000;}
a:hover {color: #ffffff; background-color: #00008B; font-weight: bold;}
#rahmen {border: solid #000000 1px; padding: 15px;}
#header {background-image: url(bg1.gif); padding-top: 5px; border: dotted #cccccc 1px; text-align: center;}
#navigation li {display: inline; padding: 10px;}
#footer {text-align: right; font-size: small;}


diesen Text versuche ich im obigen html zu plazieren, funktioniert leider nicht. Frage: fehlt da was, wenn ja, was und wo füge ich das ein?


Ich hoffe, dass ich dann ein gutes Beispiel habe um weiter auszuprobieren.
Ich hoffe sehr, dass noch einer die Nerven hat und mir hilft.
Grüässli Valentinchen

 

[cebito]

AW: CSS einfügen

diesen Text versuche ich im obigen html zu plazieren, funktioniert leider nicht. Frage: fehlt da was, wenn ja, was und wo füge ich das ein?

Wie medienfuxx schon sagte, hast du den Link zu deiner (einer) css-Datei ja schon drin... <link rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css"> Sofern die noch nicht existiert musst du die jetzt anlegen und dann deine Styles so wie hier gepostet dort einfügen. Die werden dann auf jeder Seite verwendet, die obigen Link im head stehen hat.

 

[Norbert Schumann]

AW: CSS einfügen

hallo vallentinchen, scheinbar ignorierst du die ganzen links mit den anleitungen, denn anders kann ich mir nicht erklären, wieso du noch nicht klar kommst. bei selfhtml (sehr gute referenzdatenbank) ist das thema ausführlich und anhand von beispielen erklärt und für jedermann nachvollziehbar.

 

[Valentinchen]

AW: CSS einfügen

Hallo,
an medienfux: nein ich ignoriere die links nicht, dafür habe ich schon zuviel gelesen und probiert.
Mein Problem ist: ich bin Legasthenikerin und versuche eine Anleitung zu finden wo es auch Bilder gibt. Bei unbekanntem habe ich oft Textverständnisprobleme, d.h. ich verstehe nicht, wie das gemeint ist. Wenn ich's mal kapiert habe, dann komme ich wieder vorwärts.
Darum will ich mir ja auch "Musterseiten" anlegen, wo ich immer wieder schauen kann, wenn ich etwas vergessen habe.
Für Euch "Normalen" ist es kaum vorstellbar und eigentlich habe ich auch nicht immer Lust es zu sagen.
Ich gehe die Dinge einfach anderst an, ich habe eine andere Logik.
So, jetzt wisst ihr es und der Eine oder Andere hat noch Tipps.
Schönen nachmittag! Valentinchen