How to prevent "User agent stylesheet"?

HTML-CSS
1

I had to add a class to my h1 tag because the browser added its CSS and removed my text-align: center rule. How can I prevent the browser from EVER not choosing my styles? I have the h1 style in a header h1 if that matters.

2

can you post your code?

3

@kernix, this may be a good read for you

4 
.header-title, .header p {
    text-align: center;
}

I originally had

.header h1, .header p {
    text-align: center;
}

It’s from one of my portfolio items.

5

I don’t see in that article any mention of the browser styles overriding the CSS styles in the stylesheet. I can understand where you do not have ANY styles for an element, but when you do, how does it do that?

6

where were you seeing the override? what item? I’m trying to get to where i’m seeing what you’re seeing when i inspect

7

I think what you might be looking for is what is referred to as a CSS reset. If you google “CSS reset” you will get a ton of links back with different implementations. I find myself using this reset from Josh Comeau a lot.

1 Like
8

@bbsmooth ooooh this is neat! thanks for the share! I’m also learning about user agent sheet today from helping someone else. Now it’s nice to have a bit more concrete explanation!

9

The h1 title at the top of the page.: MOUSE-ONLY DOCUMENT & EMAIL COMPOSITION TOOL.

The weird thing is that this just happened. something else really weird happened with words from WordPress files (plugins maybe) were being loaded into my alphabetical list so I had to change some of the js. I was also losing the other styles like the font-family. The files are living in my public_html folder alongside my WordPress files which I think is fine. I think that is unrelated but I thought I’d mention it anyway.

What you could do is in the inspector, change the style to .header h1 because that is what it originally was. I gave the h1 a class because I figured that browsers give default styles to common elements like body, h1, h2, p, etc.

10

I learned that from Kevin Powell - here is a link to my stylesheet for that page: https://kernixwebdesign.com/css/style.css

I use the 2 most common ones with margin: 0 for the body and the universal selector. In going through the RWD beta course on the Piano section though I made of note of this setting:

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

I think I’ll start using that as my basic styling for box-sizing. Oh, and removing padding and margins on ul tags.

11

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