broider and css

Help
1

I’ve found a border on broider that I’d like to use, but I don’t know where it should go on my stylesheet. Below is the broider code, plus the code for my header:

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAP9JREFUWEftmNsOgzAMQ8f/f/SmTa00KtIeB7amKDyCSRzn0irbgz9PDpWQG0EjUDEUlmhLTAmKiFQxyE/POTKgMDKwyM8R0frjrxQcxXbof0milpIoNSOZHN93fL4VXZZoqFrtKRqOqJeQ9wBQp8nHz/un2xL1BtaeRFRZt6LhiZ4l2I5Sak9WlBqms53aS6KpqFQrZfZS1Xo4ya8y8KlhGgS1l82Uikq1ks1kF0w20/Rm8t4nvbemnT9l4C9H1NoZ0ZTTm/1pRacRvSqlVFGKkzcl1PDVuCT6N0Wj1Op99qPWCVLfq/OPlgLavy69w7eU8G7vRsqiTCFQ8TSV6As1I3wVczbM1QAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}
header {
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  padding: 15px;
  color: #b1fced;
  border-width: 5px;
  border-color: #b1fced;
  border-radius: 50px;
  border-style:  solid;
}
2

Hi, @manatee. Now that you’ve got the .broider class in your stylesheet, you need to apply it to your HTML like this:

<div class="broider">
<p>*meow!* This is a test of the Emergency Smudge Haz a Hungry System. If Smudge really had a hungry, you'd hear about it.</p>
</div>

You can use class on any HTML element that you’d use in <body>, and you can use it in <body> as well.

3

Okay. So should I apply it in addition to the CSS classes certain elements already have? Show me exactly what my header class would look like with the broider class applied.

4

I think that the rules specified in the .broider class will take precedence over those specified for the <header> element, but if you want to be sure you should remove the border-* stuff from the header selector in your stylesheet.

5

Okay, I’ll try that in a little while and see if it works. But what about applying the broider stuff to named classes that have, say, display:flex; applied to them?

6

That shouldn’t be a problem since your .broider class doesn’t currently have its own display directives.

You should be able to see for yourself when you get around to trying it.

7

Can I apply two classes to the same tag?

8

an element can have multiple classes (but should only have one id).

to add other classes, separate them by a space:

<div class=“navbar broider”>

for this div, CSS rules for navbar and broider classes would both apply.

1 Like
9

@hermit’s got you covered. I would only add that the order in which you specify classes might affect how each class’ rules are applied.

In @hermit’s example one might expect that the .navbar class would be applied before .broider, so if both classes specify border-width then the border-width setting in .broider would override the one in .navbar. If this isn’t what you want, you can add !important to the border-width setting in .navbar.

11

Since this is about a border, either nesting elements or combining classes can get the same result.

12

I’ve got the border now, but it’s black. Border-color isn’t applying to it.

Edit: Never mind, figured it out!

1 Like