I'm trying to figure out a way to clean up our stylesheet and simplify some of the div tag styles that we use for notes. A lot of the notes are for our print manuals, but they are sometimes used in our online help. The notes got a little bit out of control and have multiplied since originally set up.
For an example, we have a few different categories of notes, one being "warning". Within our warning notes, we have a general warning and then we have more specific warnings, such as heavy, electric shock, pressure, etc. All of the divs within the warning category are the same except for the iso pictogram. I would like to figure out a way to consolidate the categories, so that the background color, border, padding, etc., cascades down into the more specific warnings, so that I don't have to repeat all of the attributes.
I'm fairly familiar with CSS and typically work within the text editor to make changes. I'm just a bit rusty and having a block on this one!
Code: Select all
div.NoteWarningGeneral
{
background-color: #FDEEDE;
background-image: url(Warning-General.png);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 45px;
border-left: solid 4px #EF8B22;
padding: 15px 12px 15px 65px;
margin-bottom: 6px;
page-break-inside: avoid;
}
Code: Select all
div.NoteWarningHeavy
{
background-color: #FDEEDE;
background-image: url(Warning-Heavy.png);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 45px;
border-left: solid 4px #EF8B22;
padding: 15px 12px 15px 65px;
margin-bottom: 6px;
page-break-inside: avoid;
}