How to I apply a custom style to the header of a paragraph?

[kangning0125]

Description

I would like to replicate a style like this in a book project.

When I add a html class to the header {.unnumbered .blue_header}. The style applies to the whole block including the paragraph underneath it.
How can I only format the specific line of header without messing the rest of contents?

[mcanouil]

Use spans, see https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans.

## [somethings]{.blue_header}

Or actually use CSS which in this case is controlled at least by h2 elements.

[kangning0125]

Use spans, see https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans.

## [somethings]{.blue_header}

Or actually use CSS which in this case is controlled at least by h2 elements.

I would like to use the 2nd option by assigning a css style to the class blue_header. However, when I use ## [somethings]{.blue_header}, the whole paragraph beneath it is changed to the same style. How do I avoid that?

## Scope {.unnumbered .blue_header_line}

A model refers to a quantitative method, system, or approach that applies statistical, economic, financial,
or mathematical theories (that imply an abstraction of real-life phenomena), techniques, and assumptions
to process input data into quantitative outputs (estimates or predictions).

css

.blue_header {
    background-color: #023a6f;
    font-weight: bold;
    color: white;
    }

[mcanouil]

Please watch carefully the syntax of spans, it's not the one you used in your original post.
Note the square brackets.

[baptiste]

it's useful in such cases to take a look at the browser's Dev tools and check what is being selected. You want to select the h2 element from that section, not the whole section:

h2.blue_header {
           background-color: #023a6f;
           font-weight: bold;
           color: white;
           }