Css in HTML?
Ich musste ein Formula in html machen und muss dieses jetzt mit css gestalten. (Im Bild links ist mein html code, in der Mitte mein aktueller Stand wie es bis jetzt ohne css aussieht und rechts ist das Beispiel, wie es aussehen SOLL) das einzige Problem was ich gerade habe ist, dass ich nicht weiter komme, wie das alles zu so eine ordentliche Anordnung wird. Was muss ich in der Einbindung meines links (Stylesheets) reinschreiben? Muss ich was mit dem id Tag oder dem attribut class machen?
Danke für die Hilfe im vorraus!!!
2 Antworten
Kurze Antwort: CSS kannst du direkt in HTML einbetten oder eine externe Datei laden. Es kann auch beides kombiniert werden. Für eine übersichtliche Aufgabe wie die beschriebene wäre CSS in HTML wohl angemessen.
<html>
<head>
<style>
input[type=text] {
max-width: 90%;
background-color: wheat;
color: rebeccapurple;
}
</style>
Du kannst auch Klassennamen verwenden, was feinere Kontrolle ermöglicht und die Lesbarkeit verbessert:
<html>
<head>
<style>
.buntes-eingabefeld {
color: rebeccapurple;
border: solid 2px orange;
}
</style>
</head>
<body>
<form>
<input type="text" class="buntes-eingabefeld">
<input type="text" class="anderes-eingabefeld">
usw.
Mit IDs würde ich Styles eher nicht verknüpfen, weil es jede ID nur einmal auf einer Seite geben darf.
Falls du deutschsprachige Anleitungen zu HMTL suchst, schau mal bei Kulturbanause oder SelfHTML (sofern letzteres noch weitergepflegt wird).
https://kulturbanause.de/tag/css/
Wenn du Fragen auf höherem Niveau hast, solltest du auf jeden Fall Code posten - oder zu einem externen Beispiel auf Codepen oder ähnlichen kostenlosen Demoseiten verlinken.
Die Anleitung von StackOverflow, wie gute Fragen zu stellen sein sollten, finde ich zwar zu streng, aber grundsätzlich hilfreich. Das sollte es in Zukunft erleichtern, Antworten auf deine Fragen zu bekommen. Dein kombinierter Screenshot ist nicht schlecht, aber eben "nur ein Bild". Das werden sich nur wenige Kolleg:innen in ihrer Freizeit bereit sein anzuschauen.
Das hat mir aufjedenfall etwas weiter geholfen, aber gerade das mit dem style direkt in die html Datei einbinden wollte ich eigentlich vermeiden....
"Nur ein Bild" klar... aber wie soll ich es sonst hier zeigen was aktuell mein Stand ist?
Bei Selfhtml habe ich aber auch schon geschaut, dort wird finde ich aber nicht klar genug erklärt wie man es mit dem class attribut einbindet... (zumindest in den Stylesheet)
Danke trotzdem!!!!
(...) wie das alles zu so eine ordentliche Anordnung wird.
Da jedes Formularfeld mit seinem Label in einer eigenen Zeile steht, wäre es praktisch, beide in einem Blockelement zu kapseln.
<div class="row">
<label for="abteilung">Abteilung:</label>
<select id="abteilung" name="abteilung"><!-- ... --></select>
</div>
Das Label wird in diesem Zug auch an sein Formularfeld gebunden (for - id).
Dazu könnte man nun CSS-Selektoren anlegen:
.row {
border-top: 1px solid #ddd;
column-gap: 15px;
display: flex;
padding: 20px 0;
}
.row:first-child {
border-top: 0;
}
Jedes Element, welches row in seinem class-Attribut stehen hat, bekommt einen oberen Rahmen und einen vertikalen Innenabstand von 20px. Zudem werden diese Elemente zu Flexboxcontainern, in denen sich ihre Kindelemente mit einem Abstand von 15px horizontal nebeneinander positionieren.
Für das erste Element, welches row in seinem class-Attribut stehen hat, wird die obere Rahmenlinie ausgeblendet.
Mehr zu den CSS-Properties, u.ä. kannst du auf MDN nachschlagen.
Muss ich was mit dem id Tag oder dem attribut class machen?
Sowohl id, als auch class sind Attribute. Einen id-Tag gibt es nicht.
Ob du diese Attribute für das Styling via CSS verwendest, steht dir frei. Mit CSS kannst du für Elemente, Elemente mit id oder Elemente mit einer class jeweils Selektoren bilden.
Beispiel:
<style>
span { color: red }
.my-class-selector { color: blue }
#my-id-selector { color: yellow }
</style>
<span>Red text</span>
<span>Red text 2</span>
<span class="my-class-selector">Blue text</span>
<span id="my-id-selector">Yellow text</span>
- Elementselektoren sprechen alle Elemente desselben Namens im Dokument an (hier also alle span-Elemente).
- Klassenselektoren beginnen mit einem Punkt und sprechen alle Elemente an, die in ihrem class-Attribut den Namen des Klassenselektors haben.
- ID-Selektoren beginnen mit einem #-Zeichen und sprechen das Element an, welches den Namen des ID-Selektors in seinem id-Attribut hat. Im gesamten Dokument darf eine ID nur einmal vorkommen.
- ID-Selektoren haben eine höhere Spezifität als Klassenselektoren und die wiederum sind spezifischer als Elementselektoren. CSS-Properties in Selektoren mit höherer Spezifität überschreiben Properties aus Selektoren niedrigerer Spezifität.
Es gibt noch mehr Selektortypen und zudem kann man Selektoren miteinander kombinieren. Dafür ist aber SelfHTML schon eine gute Quelle.