style links in a custom block in bookdown

245 Views Asked by At

I'm trying to style links in a custom block in bookdown. The custom block type is called "rmdcomment", and I've added the following to the style.css file:

.rmdcomment {
  padding: 1em 1em 1em 4em;
  margin-top: 30px;
  margin-bottom: 30px;
  background: #1f9ac9;
  position:relative;
  color: white;
}

.rmdcomment:before {
  content: "\f075";
  font-family: FontAwesome;
  left:10px;
  position:absolute;
  top:0px;
  font-size: 45px;
  color: white;
}

The above appears correctly.

I've also added the following in an (unsuccessful) attempt to style the links:

.rmdcomment a:link {text-decoration: underline; font-weight:bold; color:white;}
.rmdcomment a:visited {text-decoration: underline; font-weight:bold; color:white;}
.rmdcomment a:hover {text-decoration: underline; font-weight:bold; color:white;}
2

There are 2 best solutions below

0
On BEST ANSWER

I believe this is the section you talking about.

enter image description here

Add !important, so basically you overwrite the previous styles.

.rmdcomment a:link {text-decoration: underline !important; font-weight:bold !important; color:white !important;}

0
On

Using !important is not the best practice. You can always be more specific with your CSS. Try targeting like this and you should get the same result without using !Important:

.book .book-body .page-wrapper .page-inner section.normal .rmdcomment a:hover {
    text-decoration: underline;
    font-weight: bold;
    color: white;
}