The default stylesheet
Remember that we said that HTML was invented well before stylesheets came around. Hmm. So how did browsers display content before there was another way to style it?
Simple. They had a built-in “default” stylesheet.
One big drag about this. Each browser had its own idea about how to style the page. This drove developers nuts.
Even today, browsers still have their own default stylesheets. So when developers want to style the page with CSS (Cascading Style Sheets), many will first add a “reset” stylesheet that un-sets all the various browser styles. Now the dev can work from the same base in every browser.
But that is well beyond the scope of this course. It is for context only. And modern browsers have been converging on a fairly standard stylesheet. So some devs are beginning to abandon the “reset” stylesheet entirely.
Some default styles
We’ll talk more about this further along, but for now this is all you need to know about default styles.
First, the default style has nothing to do with the HTML element. HTML elements exists to define structure and meaning. This will become clearer shortly.
To give an example, nearly every browser default stylesheet will add
space above and below a p element. But an HTML p
element is not a block of text with space above and below
it. A p element is a paragraph. That gives the text
some meaning.
This is important: do not use the p element
because you want space above and below the output. That is a styling concern
and is properly handled in the stylesheet. Use the p element
when you are marking up a paragraph.
So what are div and span for?
Simple. These elements are for text to which you want to apply styles using a stylesheet.
Other than the block/inline aspect, they have no default style. The browser
will put a newline after the div.
The span element, minus a stylesheet, might as well not exist.
It does nothing.
Hence, until you get to styling with CSS, you won’t use many div or span elements.
Next: Headings
Previous: Block vs. inline elements