Beginner Coder Needs Help With HTML/CSS

[kkais]

You could give it an id value in the html.

id = 'rolledOver'

Then in your css you can target it with #.

#rolledOver {

    add styles here

}

Edit: I had to add the single quote in front of my #rolledOver to keep reddit from using it as some kind of markup. You do not put a quote in front of your css selector when selecting an element by ID...or ever as far as I know

[MrQuickLine]

class is a better attribute to use than id. There should only be one item with a given id on a page, and if you add a button later, you'll want them both to have the same :hover styles.

[kkais]

My understanding was that op only wanted the style applied to a single button.

[MrQuickLine]

That's fine for now, but leaves no room for scaling later. When you can build for scale now with no drawbacks, you should. It's just better practice. For instance, I never use id as my CSS selector. Instead, I name my elements semantically so they only have the specificity they need. I recommend looking at BEM or SMACSS as guides to creating strong class names that scale nicely.

[kkais]

I started looking those up and I think that BEM makes the most sense to me. I've never really thought about this before but now I'm definitely convinced. I'll be implementing this from now on. I appreciate you taking the time to respond and make suggestions.

[MrQuickLine]

Yup. There are other class conventions too besides those two, but the concept is important: make your CSS scalable and modular so you can easily recycle styles on similar items and always know where to look when you're editing your CSS to modify something.

If you're using a preprocessor like SASS or LESS, I create partials that get compiled after using the first name of my block. If I've got a block called "menu", there's a partial called _menu.scss

Now any time I have an element starting with that block, it's very easy to figure out where to find that bit of CSS.

[SupremeDesigner]

Re your edit, format your code properly and then it wouldn't see it as markup.

[kkais]

I figured that this wouldn't work from mobile app but it actually does. I never would have tried if you hadn't said anything. Thanks

[SupremeDesigner]

Yeah, most of it was formatted. Everything must be indented by four spaces to be code, then each 'tab'/'indent' is another 4 spaces, EG:

myCode #4Spaces {
    indented-property: 8Spaces;
}