<div class="news">
        <h1 class="title">The First letter pseudo element</h1>

        <p class="first-paragraph">
            The ::first-letter pseudo-element is used to add a special style to the first letter of a text if it is not preceded by any other content (such as images or inline tables) on its line. 
        </p>
  
  <p> 
    This is a very common styling used by blog authors. It can only be
            applied to block-level elements.
  </p>
  
        <p>
            Suppose you want to style the first letter of an article so it has a different color and size from other letters, this would be easier done with the ::first-letter pseudo-element.
        </p>
  
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae velit, autem cumque expedita libero ducimus quas? Mollitia,
  </p>
    </div>

* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            width: 100%;
            min-height: 100vh;
            margin: auto;
            padding: 20px;
            border: 10px solid pink;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        .title {
            padding: 20px 0;
        }
        
        p {
            padding: 10px 0;
        }
        
        @media (min-width:700px) {
            body {
                width: 500px;
            }
        }
        /* Appling the first-letter pseudo element to the paragraphs */
        
        p::first-letter {
            font-size: 300%;
            color: rgb(218, 22, 185);
            float: left;
            padding: 0 5px;
            font-weight: bold;
        }