Website Background Colour being applied to Text within new box

HTML-CSS
1

hey, got an annoying problem which will probably really obvious to anyone else.

to make sure no weird white like, lines come out from any element added to the site, i need to use the ‘*’. I’ve tried having as its own separate part of the code, separating the background colour from the section the asterisk applies to, ect. and if i remove the background colour from this part of my code, the white comes back

the code currently looks like this

html {
  * {
  margin:0;
  padding:0;
  box-sizing:border-box;
    background-color: rgb(223, 220, 220);
    font-family:Helvetica;
    color: olive;
}
}

I really need to sort this issue out, i feel like its probably a really easy fix and I’m just being a moron, but i genuinely cannot figure it out.
whenever i try and add text into the second box, the background colour of the website is added to the text.

2

can you show what you mean with “the white comes back” and what code that happens with?

3

absolutely, i tried to do that in the post but i couldnt post more than one image.

help
help1120×518 199 KB

html {
  * {
  margin:0;
  padding:0;
  box-sizing:border-box;
    font-family:Helvetica;
    color: olive;
  }
background-color: bisque; 

<!--this is just a placeholder so its more visible on the image--!>
}

this is the white i mean, i assume its part of the padding or the margin, but trying to mess with either of those doesnt fix it at all.

4

* {} and html {} are two different selectors,why do you nest one with the other one?

5

whenever i put the background into its own section within a new ‘html {’ section it doesnt show up at all. I might just be being dumb about things, but the only way I knew how to build a website was in dreamweaver (which is where i was taught) so im trying to figure out on my own and no tutorial i find is really helping me at all

6

Can you share all of your codes?Maybe I could give a comprehensive analyze based on the knowledge I have had so far.

7

sure! its really messy so im super sorry about that.

<!DOCTYPE html>
<html>
  <!--css goes here-->
<style>
    
html {
  * {
  margin:0;
  padding:0;
  box-sizing:border-box;
    background-color: rgb(223, 220, 220);
    font-family:Helvetica;
    color: olive;
}
}

#bx{
border-radius: 10px;
height: 200px;
width: 700px;
margin: 16px auto;
padding: 0px;
background-color: rgb(94, 21, 21);
background-image:url(https://win95os.nekoweb.org/nervmug.png);
}

#textfield {
   border: 2px rgb(163, 163, 141) solid;
border-radius: 10px;
height: 200px;
width: 680px;
margin: 16px auto;
padding: 0px;
background-color: rgb(206, 202, 202);

}

</style>

<!-- elements in here -->

<body>
  
  <div id="bx" > </div>
  <div id="textfield"> 
<p> hello, how the hell do i fix this.</p>
      
  </div>

</body>

</html>
8

It`s ok And what is your problem?

9

if the background color isnt within the *{ } parameter in the code it doesnt display, but if i try to add anything to any other box in the code it gives everything the background colour, if i remove the * from the code it adds this white, i dont even know what to call it (shown in my second reply in the thread) and nothing i do gets rid of it unless i add the asterisk to the html body

10

First,you have a basic structure mistake.

You miss the head element inside your html element.

<head></head> element is where you place your internal stylesheets which is referred to style element

This is the most basic HTML structure boilerplate.See the note I wrote for you inside this code piece.

<!DOCTYPE html> <!--declearation-->
<html lang="en"> <!--HTML root element with language attribute set to English-->
    <head> <!--HTML head element which is used to hold meta info for browser,links of external resources and CSS stylesheets and so on -->
        <meta charset="utf-8"/> <!--meta info-->
        <title></title> <!--name of your website tab-->
        <link rel="stylesheet" href=""> <!--links for external stylesheets-->
        <style></style> <!--place for your internal stylesheets-->
    </head>
    <body> <!--HTML body element which is used to hold everything that the users will see on your website -->
    </body>
</html>

Second one is what I have already mentioned above.