Hello, I would like an assessment for cool looking box. Here is my solution: Task. Thank you in advance for your help!
Amazing work @TheRealSuperhuman
That’s indeed a cool looking box. 
From a technical standpoint you could remove the height, because it is already defined by the line-height. We have a single-line of text and no padding, so they are both the same.
Until later,
Michael
1 Like
Thank you for the reply. The details really matter, I did it without thinking much about it and since I didn’t change the box-sizing property value, the paddings would still extend the height beyond 200px if they existed. Thinking about it would make much more sense if the initial value of the box-sizing property was border-box.
Also some elements get styled by the browsers in quite strange ways, it seems that the browser styles the body element with a margin of 8px. How do you know which elements do the browser styles?
From what I’ve read from this site, there are user-agent default stylesheet and user stylesheet. But I can only access part of the user-agent styles from the dev tools and the user styles only exist in theory, I can’t find anywhere in the browser to set styles. Is the browser styles directly embedded in the browser’s code somewhat like the alert function code in JavaScript?
1 Like
Yes, that’s correct. There are various ways to see the browser styles:
- In the DevTools settings you can activate “Show Browser Styles” under “Inspector”. The screenshot shows the body element of this forum. You can also click on the file name to see the whole “html.css” file.
- You can click “Browser styles” in the “Computed” tab in the inspector.
- You can look at the various browser CSS files in the Firefox source code: https://searchfox.org/mozilla-central/source/layout/style/res
1 Like
Thanks but what I was really looking for is for a way to know which elements will get some of their properties styled by default with something other than the initial value by the user-agent sylesheet beforehand without having to type the code and read it in a browser to test it?
There’s no general set of rules, which will be used to style elements in all browsers (user-agents). The browsers agree on a lot of stuff like div should be display: block (instead of the initial value of inline) or that a link should be blue, but in the end the browsers decide for themselves what values should be changed from the spec values. This sometimes leads to inconsistency between browsers and that’s were projects like https://necolas.github.io/normalize.css/ emerged from.
So to find out what actually gets changed by the browsers without using the elements and look at the DevTools, the only options is to dig into the user-agents style sheets that I linked in my third bullet point (for Firefox).
Did I still misunderstand something?
1 Like
No you didn’t. For some features there’s just no way to know if they will work as intended without testing them in a specific browser. 