Twenty Twelve theme – targeting ID tags?

Why do they need to be in the stylesheet?
Why are you looking in the stylesheet?

Why wouldn’t tags be defined in the stylesheet? Don’t they need to be defined somewhere? I guess this is a concept i don’t understand.

Specific example:

I’m trying to change the background color of the footer. The inspector shows that #colophon and .site-info are defining its look.

However, I can’t find either of those styles in the stylesheet, and creating styles with a different background color (even including the !important tag) doesn’t work.

(child theme created, etc. etc.)

Not every class and ID needs to be defined in the stylesheet.

I was wondering why you were looking in the stylesheet because it sounds as though you’re changing the theme’s original styles. Are you? If you are, may you instead use a Child Theme or Custom CSS Manager plugin to manage your CSS (to write new styles)?

Can you provide a link to the webpage with the CSS issue and point out which element you’re struggling to target?

Why wouldn’t tags be defined in the stylesheet?

Because they’re not being styled by the theme itself. That doesn’t mean styling couldn’t be applied to them via a child theme. a good theme developer provides plenty of hooks to allow for such re-styling.

Do not edit the Twenty Twelve theme itself. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.

If not in the stylesheet, then where are they styled?

Note: I mentioned I was using a child theme in my previous comment.

If they are not used in the parent’s stylesheet, then there is no CSS being applied.

Trying to change my footer background color – this actually works in the Inspector, but not in the child theme:

Original style:

footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
}

Revised style (remove border, change background color)”

footer[role="contentinfo"] {
	background-color: #ff0000;
	border-top: 0;
}

link to site: https://spitfiremoto.com/

I’ve cleared the cache, no plugins running.

Try:

#colophon {
	background-color: #ff0000;
	border-top: 0;
}

That’s what I’d originally done, and it’s what prompted my initial questions. ??

I just tried it again, and it still doesn’t work.

Looks like the issue is with a syntax error in your stylesheet (child theme);

.wrapper {
	padding: 0 40px;
	padding: 0 2.857142857rem;

this style in your child theme’s stylesheet is not closed and keeps the one further down from getting applied:

/* add the padding removed from body .site */
.wrapper {
	padding: 0 40px;
	padding: 0 2.857142857rem;

edit: @andrew: beaten by 3 seconds ;-(

lol ^

Oh thank god. And you guys, too. ??

What did you use to identify that stylesheet error so quickly?

Whenever you get to the headbanging stage with CSS, it’s always a good idea to validate your CSS – just in case. One simple error can cause some really unpredictable results.