<p class="onlyone"> To arms, To Arms - the Red Coats are Coming
<div class="inil">Note the border is on the inside</div>

<div class="dropper">what will happen here? Must allow for Outline overlap into next text. So we use br skip line to avoid the overlap nd have the paragraph ideas flow naturally</div>
p {
  border: 2px solid black;
  outline: #4caf50 solid 10px;
  margin-top: 5px;
  width: 600px;
  padding: 5px;
  text-align: center;
p.onlyone::first-letter {
  font-size: 200%;
  color: #8a2be2;
div {
  width: 300px;
  margin-bottom: 12px;
div.inil::first-letter {
  color: #903;
  font-family: Georgia;
  initial-letter: 2;
div.dropper::first-letter {
  color: #903;
  float: left;
  font-family: Tahoma;
  font-size: 80px;
  line-height: 70%;
  margin-top: -12px;
  padding-top: 0px;
  padding-bottom: 8px;
  padding-right: 8px;
  padding-left: 3px;
  background-color: yellow;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.