CSS and Attributes

I should preface I'm unfamiliar with CSS and HTML but I'm definitely getting better having worked on this sheet for the last couple weeks. So I have several roll buttons for skills that I want to have the button be the skill name. That's no problem, but now I have a lot of CSS entries, one for each button with the content being the skill name. .charsheet button[type=roll].sheet-athletics::before {     font-family: "Arial";     content: "Athletics"; } Etc, repeated for each skill. Is there anyway I can trim that all down or do I need to do that for each one? Also how do I get rid of the roll button border? .charsheet button[type=roll]::before { border: none; } This isn't doing it, nor is 0px instead of none, nor is placing it directly in the specific roll button CSS rather than a general one.

Well, instead of doing the skill name via css, simply put the skill name in the html of the button: <button type='roll' name='attr_athletics'>Athletics</button> As for getting rid of the button styling, here's what I do: button[type=roll]{ background-color: transparent; border: none; background-image: none; box-shadow: none; padding: 0px; margin: 0px; } The margin and padding are more for alignment in my sheet than styling of the button of itself.

Oh ok so adding ::before is what was messing me up with the border. And thanks, I didn't know that I could put things between <button> and </button> and have it do anything

Izberion said: Oh ok so adding ::before is what was messing me up with the border. And thanks, I didn't know that I could put things between <button> and </button> and have it do anything Looking at existing sheets/code can usually be quite enlightening. You would also had found numerous examples of at least the button text thing.

Andreas J. said: Looking at existing sheets/code can usually be quite enlightening. You would also had found numerous examples of at least the button text thing. Yea I've been trying that more and more. The more I understand how HTML and CSS actually work, the more helpful that will be.