Unterschied von html und body im CSS?

Hey, wo liegt denn der Unterschied, wenn man CSS für Body { ... } und HTML { ... } angibt? I.d.R. schreibt man dort ja Angaben zur Breite, Schriftart ect.

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

CSS, HTML5, Webdesign

23.10.2020, 14:22

Da der HTML-Tag das Root-Element des DOM darstellt, stellt es auch den Startpunkt für die Vererbungshierarchie dar. Vererbt werden allerdings nicht alle Properties.

Dazu ein Beispiel:

html {
  background: red;
}

body {
  background: yellow;
}

Was meinst du, welche Hintergrundfarbe die Webseite haben würde? Richtig, sie wäre rot.

Der Hintergrund wird vom body-Element nicht geerbt, aber das html-Element nimmt die Farbe des body-Elements auf, wenn es keinen eigenen, intransparenten Wert definiert.

Auf CSS-Tricks gibt es noch einen guten Artikel, der auf die Frage eingeht, für welche Fälle es sinnvoller ist, den html-Selektor zu verwenden und für welche stattdessen den body-Selektor: https://css-tricks.com/html-vs-body-in-css/.

Ähnliche Beiträge

HTML und CSS Imagetag Unterschiede?

Warum nutze ich im HTML img Tag "src" und im CSS "url"?

Also die technischen Unterschiede verstehe ich, aber warum kann ich im CSS nicht mit SRC arbeiten, wo meine Bilddatei doch im Webspace liegt?

...zum Beitrag

Website schrift ändert sich nicht?

Font face wurde verwendet.

Ich hatte vorher eine andere Schriftart installiert und ausgewählt in der css datei .

nun zeigt mir die webseite noch immer die alte schrift an, sogar dann, wenn ich die schriftart aus dem ordner entferne oder in der css datei den namen umbenenne. (dann müsste es normalerweise die standard html schrift anzeigen)

...zum Beitrag

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

Unterschied Html etc. zu WordPress/Wix?

Hallo,

ich habe eine Frage zum Thema Websites. Und zwar weiß ich nicht genau, worin der Unterschied zwischen einer programmierten Website (beispielsweise mit Html oder CSS) und einer Website, die mit einer Programm wie WordPress erstellt wurde liegt.
Denn falls es dahingehend keine nennenswerten Unterschiede geben sollte, wäre es ja unnötig extra eine Programmiersprache zu lernen, wenn man es auch einfacher machen kann oder liege ich da falsch?

Vielen Dank schonmal

...zum Beitrag

Bilder auf der HTML/ CSS Seite nur zur hälfte sichtbar?

Hey,

die Bilder im slider unten auf der Webseite sind leider nur zur hälfte zu sehen. Weiß jemand woran das liegt ? danke

https://jsfiddle.net/vk9wqys0/1/

...zum Beitrag

Unterschied von padding-top und margin-top?

Hey, ich lerne seit neuem HTML und CSS, und würde gerne wissen, was der Unterschied zwischen diesen beiden Elementen ist

...zum Beitrag

iFrame Schriftart ändern oder RTF einbinden

Hallo. Wie kann ich über iFrame (html) die Schriftart von der geladenen txt Datei ändern über CSS? Geht das? Oder ansonsten: Wie kann ich eine RTF Datei einbinden, die nicht runtergeladen sondern angezeigt wird???

Danke

...zum Beitrag

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zum Beitrag

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

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

und

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

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

Ordnerstruktur bei HTML Webseiten für Fonts?

Hallo. Ich frage mich, wo ich meine Schriftarten (Fonts) in meinem HTML-Project unterbringen soll. Meine derzeitige Struktur sieht wie folgt aus:

Ordner

↳index.html

↳css
 ↳style.css

↳js
 ↳script.js

↳img
 ↳Alle meine Bilder

Wo soll ich die .tff- oder .otf-Dateien unterbringen? Wie macht ihr das? In etwa so:

↳fonts
 ↳Schriftart.tff

Oder wie ?

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

HTML CSS Background Filter?

Hi ich habe seit einer Woche angefangen mit das Programmieren beizubringen, und bin nun auf folgendes Problem gestoßen.

Ich habe bei der HTML Datei in <body> das hier drin :

<body>

<ul>

<li><a href="" class="active"><b>Tv Shows</b></a></li>

<li><a href="" class="active">Movies</a></li>

<li><a href="" class="active">Recetly Added</a></li>

</ul>

<a href="" class="logo">NETFLIX</a>

</header>

<span>99% Match</span>

</div>

</div>

</section>

</body>

Und in der CSS Datei habe ich den Body so definiert:

body{

background: url(wallpaper1.jpg);

background-size: cover;

background-repeat: no-repeat;

height: 100vh;

Nun habe ich das Problem wenn ich nun einen Filter wie z.B Brightness anwenden will macht es ja nun logischerweise den ganzen Body Dunkler aber ich möchte nur den background verdunkelnm, sodass die anderen Elemente stärker zum Vorschein kommen.

Und meine zweite Frage wäre diesen background zu Skalieren weil auf dem Original Bild ist unten links ein kleiner Schriftzug der auf der Website nun abgeschnitten ist.

Vielen Dank :)

...zum Beitrag

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen