Putting display: inline; in my #tabs id portion - html

Question

Hi I am new to HTML and CSS so I was wondering what the difference was between
putting all of my paddings, display, list-style-types under
ul#tabs. For example if I put display:inline; inside ul#tabs, my text wont appear in the same line. I am confused as too what the difference is between putting values under #tabs li, and #tabs li a and #tabs. My guess is that any property under #tabs, will happen to anything inside including a's, p's or whatever else I included within the ID of tag and #tabs li a, does things only to <a>'s within the tab id. If this is the case what does ul#tabs li do, and why cant i put display: inline , in my ul#tabs{} portion of the code. Sorry for the long questions. Thank you.
body{
}
#Title{
position: absolute;
top:5px;
right:600px;
}
ul#tabs {
list-style-type: none; margin: 30px 0 0 0; padding: 0.2em 0.5em 0.3em 0; /* takes off bullets (list-style..) */
}
ul#tabs li {
display: inline; /* puts them on same line */
}
ul#tabs li a {
color: #42454a; text-decoration: none; /* take off underline */
padding: 0.6em 0.7em 0.8em 0.9em; /* padding within a makes space between a */
}

Answer 1

Drew is correct, you are looking at specificity in this example and what it applies to. Think of CSS as boxes and, in most cases, what gets changed in the outer box affects the inner boxes, too. :) If you want to affect the middle box with padding, you place your padding there, but keep in mind the inner most box will be affected as well. In that sense, you can apply values very broadly:
body{
}
#Title{
position: absolute;
top:5px;
right:600px;
}
ul#tabs {
list-style-type: none; margin: 30px 0 0 0; padding: 0.2em 0.5em 0.3em 0; /* takes off bullets (list-style..) */
color: #42454a; text-decoration: none;
padding: 0.6em 0.7em 0.8em 0.9em;
}
ul#tabs li {
display: inline; /* puts them on same line */
}
This is one way you could affect all text, and lists under #tabs, but make sure individual lists are inline.
Adding things like:
ul#tabs li {
Just makes it even more specific, as you are targeting individual list items under a list parent with the ID "tabs."
A better way to write this is:
#tabs li
It would look for an element with the ID "tabs" and see if there is list items under it. Now, if you want to be really technical, you could use a class for list items as well, such as "mylistitems," then write:
#tabs.mylistitems
This would search for an element (in this case ul) with ID "tabs," then begin looking for another element under it with the class "mylistitems." Technically, you can also do:
ul li {
}
This would target all list items. Sorry it was a long response, hopefully this gives you some unique ways to write CSS selectors.