0

I understand how CSS inheritance works, but I'm having trouble finding a good resource that indicates what properties the CSS spec initially applies to standard HTML elements like div, span, and ul. A div element is a block element, and a span element will be placed inline. These elements naturally have properties that cause these different behaviors, they aren't inherited. For example, if a span element and a div are two sibling elements that are direct descendants of the html element, they would still differ in behavior.

Where can I find a list of the CSS properties that each element initially has?

Himmel
  • 3,629
  • 6
  • 40
  • 77
  • 1
    are you looking for [browser default styleshets](http://stackoverflow.com/questions/32875/browsers-default-css-stylesheets)? – Stickers Apr 17 '15 at 17:44
  • You seem to be asking two different but linked questions here: 1) how inheritance works for properties where inheritance doesn't make sense, and 2) what default styles are applied to various elements. The answer to #1 is that CSS defines which properties are inherited by default and which are not - display is one of those properties that are not inherited by default because, as you've correctly pointed out, it doesn't make sense for that property to be inherited. – BoltClock Apr 17 '15 at 17:46
  • For example, you have to specify 'border-box' over 'content-box' for a div element, where is this specified? The browser default stylesheet for 'div' only has `display: block;`. – Himmel Apr 17 '15 at 17:49
  • There is [this W3C page](http://www.w3.org/TR/html-markup/elements.html) which lists "Typical default display properties" for each of the elements. Does that help? – Mr Lister Apr 17 '15 at 17:49
  • If you want the default stylesheet values for the browsers, this question is a duplicate of http://stackoverflow.com/questions/32875/browsers-default-css-stylesheets (which does have some links you might be interested in). – Mr Lister Apr 17 '15 at 17:53
  • Hmm, I was more interested in what the "typical default display properties" are. Is there not an exhaustive list of the properties that they have? `box-sizing: border-box` appears in neither of these lists for `div`, how would one know that there are changeable properties of the `div` element? – Himmel Apr 17 '15 at 17:56

1 Answers1

1

For example, you have to specify 'border-box' over 'content-box' for a div element, where is this specified? The browser default stylesheet for 'div' only has display: block;.

Properties that do not appear for a given element in a browser's default stylesheet are assumed to be what is known as their initial value for that element. This initial value is defined not by the browser, but by CSS (although of course a browser implementation can violate the spec as it so wishes).

As I mentioned in my comment, some properties, such as color, are designed to be inherited by default, while others, such as display and box-sizing, are not inherited by default because inheritance simply doesn't make sense for those properties.

You can find both the initial value and the inheritance information for a given property in either the propdef in the respective W3C CSS specification, or, if you prefer a more author-friendly reference, in one of many third-party resources such as MDN or WebPlatform.org.

For example, the initial value of box-sizing is content-box, and it is not inherited by default. This property is defined in the CSS User Interface module. This is why you need to explicitly declare box-sizing: border-box if you want to use that value.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • That last link you posted is helpful. It is evident that `div` has an initial value of `content-box` because the document specified "Applies to: all elements that accept width or height", but it would be nice to be able to search for an element, like a `div` or a `span` and determine which properties are applied to it. I guess this functionality isn't available? – Himmel Apr 17 '15 at 18:05
  • @Himmel: The thing about CSS is that, with a few exceptions, virtually *any* CSS property can be applied to *any* HTML element regardless of browser defaults. So when it says "Applies to: all elements that accept width or height", it really means all elements that are not display: none/inline/table-row/table-row-group. As such I don't think there are tools available to determine this sort of information - all I have at my disposal is my knowledge of the internal workings of CSS. – BoltClock Apr 17 '15 at 18:08
  • It just seems strange that you have to take a deductive approach to determine these initial property values (height/width -> div) rather than there being a source that allows you to see ALL of the properties and initial values that an HTML element contains. – Himmel Apr 17 '15 at 18:13
  • @Himmel: I agree. You *could* create a dummy element in a blank page and inspect its styles, but browsers tend to list used values rather than computed values, although they do try to point out if a certain property was taken from the default stylesheet. – BoltClock Apr 17 '15 at 18:15