Frage von Siebot, 29

HTML Hilfe bei Stylesheet (.css)?

War letztens krank und muss jetzt das mit den Stylesheets nachholen. Alles andere hab ich jetzt schon gelernt aber komme mit dem Stylesheet einfach nicht weiter.
Achtung: Ich weiß noch nichts über Stylesheets und fang also bei 0 an. Habe meinen Rechner vor mir und habe gerade die ganz normale HTML Datei im Editor geschrieben. Wie mache ich jetzt weiter.
Bilder zur Übung im Anhang.
Danke schonmal

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von weed9r, 24

Ok, ich helfe dir mal ;)

Um den CSS Code zu schreiben, den du als Aufgabe hast, sieht das ganze wie folgt aus:

html, body {
  background-color: #CCC; /*einfarbig reichen 3 Angaben*/
}
table {
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  font-family: "Courier New", Courier, mono;
  font-size: 14pt; /* hier lieber PX, REM oder EM nehmen. Alles andere wird von browser zu browser unterschiedlich interpretiert */
 font-weight: bold; /* renundant - headlines sind immer fett... */
}
ol {
  color: #009900;
  background-color: rgb(170,170,170);
}
ul {
  color: #990000;
}

Um das ganze einzubinden nutzt folgendes Snippet:

<link rel="stylesheet" href="Formatierungen.css" />

Ich schreibe dir noch eine Erklärung in den Kommentar und ein paar kleine Anmerkungen um deine Note zu verbessern ;)

Kommentar von weed9r ,

Stylesheets bindest du in deine Index.html in den Head (<head></head>) ein. und zwar mit folgenden Syntax: 

<link rel="stylesheet" href="path/to/file.css" />

Css ist recht einfach aufgebaut. Das Element, dessen Style du ändern wirst schreibst du als erstes und dann eine klammer:

body {
  attribute: value;
}

Möchtest du mehrere Elemente miteinander verbinden, trennst du sie durch ein Komma:

span, div, p {
  color: red;
}

Willst du es richtig machen, musst du jedem HTML-Element (richtige Bezeichnung ist DOM-Element) eine klasse geben.
Der nachfolgende Code zeigt dir, wie du einem Div eine klasse gibst und diese stylest:

<!-- html -->
<div class="myDiv"></div>
/*css*/
.myDiv {
  attribute: value;
}

Hast du zwei Klassen verbindest du diese wie folgt. Beachte hier, dass kein Leerzeichen zwischen den Klassen ist:

.myClass.myModifier { }
<div class="myClass myModifier"></div>
Kommentar von Siebot ,

Vielen Dank. Sehr nett von die. Ich probier es gleich mal aus. Klingt alles sehr kompliziert. Melde mich eventuell wieder bei dir ;). Vielen Dank
Lg

Kommentar von weed9r ,

Übrigens sind mir ein paar kleine Fehler in dem Markup deiner Index.html aufgefallen.

  1. Es fehlt die HTML5 Deklaration am Anfang(wirklich vor allem anderen): <DOCTYPE html>. Hier bedarf es keines closing-tags
  2. Tabellen nutzt man wirklich nur noch als Tabellen. Besser sind Divs mit Float: left; oder display: table/table-row/table-cell;
  3. Höhen/Breitenangaben macht man nur noch mit CSS. Sowas gehört in kein valides HTML5 Markup. Auch Align löst man mittels css (display: inline-block; float: right;)
  4. Die Darstellung der Listpunkte lässt sich auch mittels CSS lösen. list-style-type ist da das zauberwort
  5. Headlines (h1,h2,h3,h4,h5,h6) Gehören nicht in eine OL/UL. Sie müssen Davor stehen. Innerhalb von ol/ul gibt es nur li. Denn ol/ul definieren sortierte/unsortierte listen und li definiert ein Listitem.
  6. <b></b> nutzt man auch nicht mehr. man macht <span class="bold">text</span> und im CSS span.bold { font-size: bold; }
  7. ein Link mit dem Verweis auf eine E-Mail hat ein prefix mit mailto:info@html.at - dann öffnet sich gleich das E-Mail Programm

Diese Punkte die ich hier geschrieben habe sind Standards die nach W3C festgelegt wurden und an die sich jeder Webentwickler halten sollte, da es Webseiten kleiner, performanter und lesbarer macht. Außerdem hilft es beim SearchEngineOptimizing

Lg weed9r

Kommentar von Sarkophator ,

Kleiner Nachtrag:

> <b></b> nutzt man auch nicht mehr. man macht <span
class="bold">text</span> und im CSS span.bold { font-size:
bold; }

Allgemein soll man dafür seit HTML5 den strong-Tag benutzen, der nun genau das gleiche macht. (Nebenbei auch em für <i></i>)

https://www.w3.org/TR/html5/text-level-semantics.html#the-b-element

Kommentar von weed9r ,

Stimmt! Guter Einwand!

Ich persönlich nutze aber lieber inline-elemente wie span für sowas

Kommentar von Siebot ,

Ok, könntest du bitte den aller ersten Schritt noch einmal beschreiben. Das war jetzt ein bisschen zu viel.
Wo muss ich das ganze hineinschreiben?
Danke dir
Lg

Kommentar von weed9r ,

Na klar ;)

Die Aufgabe ist, eine Datei für dein Stylesheet zu erstellen. Also in den Ordner wo deine Index.html liegt rechtsklick -> neu -> neues Textdokument. 

Dort schreibst du den Code rein, den ich dir genannt hab und nennst sie "Formatierungen.css"

In deine Index.html schreibst du unterhalb vom Title folgendes:

<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DeinTitel</title>
<link rel="stylesheet" href="Formatierungen.css" />
</head>

Ich möchte dir kurz erklären, was die 3 Zeilen machen, die ich dazu geschrieben habe - falls dein Lehrer fragt ;)

<DOCTYPE html> sagt dem Browser, der die Seite aufruft, dass es sich um eine HTML5 seite handelt. Da die meisten Seiten in HTML5 geschrieben wird, sollte das als Antwort reichen. Ich denke nicht, dass dein Lehrer sehen will wie man eine XML oder ähnliches deklariert

<meta charset="utf-8"> ist unglaublich wichtig für uns deutschsprachigen Entwickler. Es bezeichnet den Zeichenschriftsatz, mit dem die Webseite gerendert werden soll. UFT-8 beinhaltet ä,ö,ü,ß, uvm. Sollte das nicht drin sein, kann es zu ziemlich hässlichen Zeichensätzen kommen.

<link rel="stylesheet" href="Formatierungen.css"  /> ist die Verlinkung auf dein Stylesheet. Href gibt den Ort an, wo sich die Datei befindet und rel sagt, was es für eine Datei ist.

Kommentar von Siebot ,

^^wow. Bin gerade Sprachlos. Da mein Lehrer am der HTL uns das alles so erklärt hat und wir diese Schreibweisen alle bei ihm während der Stunde erklärt bekommen haben.
Lg

Kommentar von weed9r ,

Das Web entwickelt sich unglaublich schnell weiter. Gängige Praxis ändert sich stetig. Zu Html4 Zeiten war das auch noch gang und gebe, Elemente zu vermischen. Es hatte keine negativen Auswirkungen.

Heute ist das anders. Dadurch das Firmen bei Google immer an erster Stelle stehen wollen, ist ein W3C-konformes Markup unumgänglich. Ich denke dein Lehrer ist einfach nicht auf dem neusten Stand.

Weiter gibt es, was CSS angeht auch viele Neuerungen. SCSS/SASS und LESS sind abgewandelte CSS sprachen, die das Entwickeln im Team einfacher machen. Diese müssen danach allerdings noch durch einen Compiler (ein Programm was Code so verändert, dass das jeweilige Medium ihn korrekt ausgibt) gejagt werden. 

Ich hoffe du versuchst das ein wenig zu lernen was ich dir hier geschrieben hab und tippst es nicht nur ab ;)

Kommentar von Siebot ,

Danke nochmal ;)
Natürlich lernt man schon viel von dir.
Habe jetzt alles befolgt.
Das mit dem Verlinken auf das Stylesheet, wer wandelt jetzt die css (Sprache) in Html um? Oder wie funktioniert das, dass zwei verschiedene Sprachen gelesen werden können?
Lg

Kommentar von weed9r ,

Das ist recht einfach zu verstehen.

CSS ist teil von HTML. Du kannst den CSS part auch direkt in den header schreiben. Das würde dann so aussehen:

<meta charset="utf-8">
<title>DeinTitel</title>
<style>
html,body {
background: red;
}
</style>

Allerdings haben große seiten die an Frameworks gebunden sind reicht große CSS-Dateien. Diesen Inhalt jedesmal in die Website zu schreiben würde bedeuten, du müsstest den kompletten Inhalt jedesmal laden wenn du eine Seite besuchst. 

Css-Dateien werden erstellt, da der Browser sie nur 1x herunter lädt und alle Seiten auf der Domain die einen Verweis zu der Datei haben damit füttern kann.

Hier ein Beispiel:

du hast CSS code von etwa 23kb. 10 Seiten aufzurufen würde bedeuten, dass du 230kb herunter geladen hast. 40 Seiten wären dann schon fast 1mb. Und da hast du noch nicht ein Bild mit herunter geladen oder irgendwelchen Syntax

Kommentar von Siebot ,

Ok, ist verständlich.
Hab jetzt mal meine Kollegen gefragt. Sie sagen, dass sie das auch nicht in der Stunde, wo ich fehlte gemacht habe. Jetzt hoffe ich, dass das Morgen beim Test nicht kommt XD
Kannst du C# auch so gut?
Ist das dein Job oder nur Hobby?

Kommentar von weed9r ,

Ja ich bin Frontend Webdeveloper mit dem Schwerpunkt JavaScript. 

In C# habe ich nur Grundkenntnisse, brauche sie aber nie denn heutzutage kann man alles mit Javascript lösen :)

Kommentar von Siebot ,

Haha, hab ne 1 bekommen. Danke

Antwort
von FileXRT, 23

Grundlegendes zu CSS:

Klasse/class: .{NAME}
ID: #{NAME}

Klassenbeispiel:
.klasse { color: red; background: gray; ... }
ID Beispiel:
#ID { color: red; background: gray; ... }

Die Klasse reicht in CSS eigentlich aus, wofür die ID gebraucht wird, bin ich mir selber noch unsicher.

Einbinden im Head:

<link rel="stylesheet" href="style.css">
Kommentar von Sarkophator ,

> wofür die ID gebraucht wird, bin ich mir selber noch unsicher.

IDs sind für die eindeutige Identifikation zuständig, das heißt also dass es eine ID nur einmal in einem HTML-Dokument geben darf. Alles, was mehrere Elemente übergreifen soll, wird über Klassen gelöst.

Keine passende Antwort gefunden?

Fragen Sie die Community