THANK YOU for looking at my Tribute Page project. I am a COMPLETE beginner, so please be patient with my questions and my lack of knowledge for the correct jargon. Thank you!
Link to project at the bottom.
Some questions I have/problems I encountered:
I do not know if there’s a particular order in which to list the properties under the id names. Does the order affect the way it all works at this level? I read that it matters when using properties that override each other, but does it matter with these particular properties?
I could not get all properties to work with all elements and don’t know yet what the rules are around this.
For example: I was not able to style the body of the page under the #main id. I was not able to make the ‘background-color’ property work.
For some ids, I was able to make the ‘text-align: center’ property and value work - but not for all. I ended up using the ‘padding’ property to center others, but I felt like that might not be correct (?), since I don’t know if it is truly centered. Also - I looked up and used the ‘display: block’ property and value to center the image. Was that OK? I couldn’t find where that was in our lessons. I don’t really understand exactly how that works yet.
I’m not sure if the image caption is linked to the image. I could not enlarge the text of the image caption, because it kept wrapping to the next line. I’m not sure if I created a container, and if the text is hitting the wall of that container (?).
Thank you again for any feedback you are able to give!
Most of the time, you’ll see overwriting just for short-forms like padding and margin.
I think this is specific for codepen, because you build a website inside a website and codepen implicitly adds a body around all of your code.
So in practice, you just can add all the content of a normal body to the codepen html box. Currently, your html tags don’t work (but they also don’t break anything).
text-align doesn’t work for every html element:
The text-align CSS property sets the horizontal alignment of a block element or table-cell box.
For example, a is an inline element, meaning it flows inline with the stuff around it.
You can layout your a by creating a (full-width) container around it (e.g. a div) and make this container a flexbox (don’t know if you already learned flexbox). It’s mostly not a good idea to center with padding, because this will break a lot of times on different devices (e.g. a smartphone) or will be hard to maintain (many different paddings for different device sizes).
You can add the FCC test suite for your project by adding this code to the top of your html box: