Something interesting: Browser default styles

HTML & CSS
1

I see where HTML seems to attach a certain default size and height to the heading values, but I was able to override them with coding in the stylesheet. I just assigned certain sizes in there, and they all went with it.

2

Well, bugger me, I never knew that was humanly possible.:rofl:

coothead

1 Like
3

There are defaults for all manner of things - size, colour, font, etc., all of which can be overridden with your own CSS.

2 Likes
4

Yes, all browsers uses a defalt style for the html, usually called the “user agent style sheet”. Try search the quote if you like to compare browsers.

W3.org did publish a typical browser style sheet for HTML 4:
https://www.w3.org/TR/CSS2/sample.html

And a more comprehensive list of the default styles for HTML 5:
https://www.w3.org/TR/html5/rendering.html

At Mozilla Dev you can learn more about properties and terms for default values:
https://developer.mozilla.org/en-US/docs/Web/CSS/initial

Glad you asked. :smiley:

Note: Added to the topic to be more specific, if you don’t mind. :slight_smile:

5 Likes
5

What you want to avoid is using less appropriate elements to get their default styles. For example, if I wanted a word to look a bit larger:

I have a big job ahead of me.

it would be possible to do something like:

I have a <h3>big</h3> job ahead of me.

But because that is not a heading it is misuse of the tag. It is more correct to do something like

I have a <span class="somename">big</span> job ahead of me.

and then use CSS to style it

.somename { 
  font-size: 2em; 
  font-weight: bold; 
}
5 Likes
6

The context of a statement like that would lead me to use an <em> tag.
Along with the font styling, I also see an actual emphasis on the word “big”.

I think one of the first things a beginner to HTML & CSS should do is learn about all the available HTML Elements and their proper semantic use. Then learn CSS later after they have a firm grasp on structuring HTML correctly. That way there is less chance of using improper tags just to get the visual appearance they want. :slight_smile:

6 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.