I´m working on a project for Style Stage. My problem is that the styling for a list in one part of the website is affecting a list in the bottom of the website.
Part of the perimeters of this challenge are that cannot change the HTML, so I´m trying to find work-arounds to point to the section of the website I want to style.
I´m attaching a CodePen with my project (I´m writing it on VSCode, hence elements in the head that seem unnecessary on CodePen).
I know it´s the ul and li that bottom that are causing problems but I really don´t know how to differentiate them.
This is the link to the CodePen with the full website on it:
https://codepen.io/bananahair/pen/bGKKvqO
I´ve tried using the footer id, but this doesn´t seem to specify it enough. I´m not looking for someone to give me the answer. Just tell me where to look, what to target.
That´s all. (Please ignore the horrific style in the rest of the website. I´m coming back to it as soon as I figure out this problem.)
I´m still struggling with pointing to a particular part of the HTML code with my CSS in the Style Stage challenge that I´m trying to complete. (A link to this in my CodePen is below.)
The perimeters of the challenge state that I cannot add anything to the HTML.
Below is the HTML for the two sections causing me problems.
The top one is the “lists” section of the page which I intended to design as such.
I´ve tried to identify elements that differentiate these two sections of my page, but these have failed to differentiate them. I´m posting a link to my CodePen which features all my code. You´ll see efforts I´ve made there. Please take a look and tell me what I´m overlooking.
Again, a key perimeter of this challenge is that I can´t add classes or ids to the HTML.
Are you not using the dev tools? They tell you all you need to know without even looking at the HTML in the editor.
You can code this site 100% in-browser and if you use local overwrites you can even have it saved to the CSS file. Not that I’m suggesting that is how I would solve this but it is a pretty nice workflow to know about and have handy.
Using the browser for prototyping is often more productive than using the CSS file, even with hot reloading. Especially when trying things out and debugging the CSS.