このHTMLとCSSをひとつにするのはどうすれば？

質問

WordpressのAddQuickTagを使うために別れたままでは使うことができません＞＜
https://saruwakakun.com/html-css/reference/box
ちなみに１９番のカギカッコを使いたいと思っています。

何卒よろしくお願いいたします！！

HTMLが・・・

<div class="box19">
<p>ここに文章</p>
</div>

CSSが・・・

.box19 {
position: relative;
padding:0.25em 1em;
}
.box19:before,.box19:after{
content:'';
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}
.box19:before{
border-left: solid 1px #5767bf;
border-top: solid 1px #5767bf;
top:0;
left: 0;
}
.box19:after{
border-right: solid 1px #5767bf;
border-bottom: solid 1px #5767bf;
bottom:0;
right: 0;
}
.box19 p {
margin: 0;
padding: 0;
}

回答No.2

design_labo

あまりおすすめはしませんが、
最初の回答の開始タグを、

<div class="box19"><p><style>ここに書かれているCSSを入れる</style>

のようにすればいけると思います。

回答No.1

design_labo

＞別れたままでは使うことができません

この意味がわかりませんが、
AddQuicktagを設定して使いたいということであれば、

AddQuicktagの設定で、ボタン名（例えばbox19）を入れて
開始タグの欄に、<div class="box19"><p>
終了タグの欄に、</p></div>
あとは使いたい場所をチェックしてください。

そして、ワードプレスのダッシュボードで
「外観」->「テーマの編集」のstyle.cssに
書かれているCSSを追記してあげれば利用できると思います。

補足

ありがとうございます！
CSSと別々に作業とのことですが、できたらその2つをまとめてaddquickに設定したいと思ってます。そういった要素を全てdivでくくるにはどうすればいいのかを知りたいです<(_ _)>