Search the Community

Hello everyone, thank you for taking the time to assist me in my learning process. On kali.org, you can see that its design has that styling in which a given background color fills the 100% width and height of the screen, and when you scroll down, another bg color fills the 100% width and height of the screen. (The height percentage can seemingly vary here, though). I am trying to imitate this effect, but as a CSS neophyte I am not succeeding. First of all: the browser does output the width to be 100%, but not the height. Also, I have assigned some divs to have a different bg color, but this color is not being applied. I have used the universal selector to apply border-box to everything. My understanding was, if I am to allow an element to be set to 100% height, I am to use the HTML and BODY style selector and apply 100% height. I then applied 100% height to my divs via the div style selector(doesn't work). Then I made a .2 class that I applied to every second div in which I assign a white background color. This color is not applied. My understanding was, as the div is already styled via the div type selector, applying a class to some of the divs will still make the type selector apply all its styling, safe but where I have made an overriding change in the class selector. In this instance, the div type selector has the background-color set to grey, and the .2 class selector has its background-color set to white. Hence: <div>Grey BG</div> <div class="2">All the styling of div but has a white BG</div> <div>Grey BG</div> <div class="2">All the styling of div but has a white BG</div> Your assistance is much appreciated, as I can truly not see what I must be doing wrong. My example HTML/CSS is very small. The index.html can be found here: https://cellseven.w3spaces.com/ HTML/CSS on JSFiddle: https://jsfiddle.net/afg5tsyd/ HTML/CSS in .txt file: The HTML code here: https://cellseven.w3spaces.com/html.txt The CSS code here: https://cellseven.w3spaces.com/css.txt Here is the relevant CSS: *{ box-sizing: border-box; } html, body{ height: 100%; margin: 0; padding: 0; background-color: #161a1d; font-family: 'Montserrat Alternates', sans-serif; color: #CDCDCD; } /* SETTING THE BG COLOR TO GREY AND THE WIDTH AND HEIGHT TO 100% */ div{ text-align: center; margin: 20% auto; width: 100%; height: 100%; background-color: grey; } /* THIS CLASS IS INTENDED TO BE ADDED TO EVERY SECOND DIV, CHANGING THE BG COLOR WHILE MAINTAINING DIV STYLING */ .2{ background-color: white; } The relevant HTML: <div><p>My name is Logan Throne, <br><br> Here you will find my publications on Oriental philosophy.<br> Subscribe to the <a href="#">newsletter</a> or follow me on <a href="#">X</a> for updates.</p> <h1>emptycloud.io</h1> </div> <div class="2"> <h2>Publications</h2> <h3>Book Title 01</h3> <p class="bookDescription">Lorem...</p> </div> <div> <h2>Publications</h2> <h3>Book Title 02</h3> <p class="bookDescription">Lorem...</p> </div> <div class="2"> <h2>Publications</h2> <h3>Book Title 03</h3> <p class="bookDescription">Lorem...</p> </div> silverRainfall