Pseudo-elements for text styling

7.1 Pseudo-element ::first-letter

Pseudo-elements ::first-letter and ::first-line give you some cool tools for styling the first letters and lines of text elements. These pseudo-elements are widely used to create various typographic effects, improve readability, and up the aesthetics of text on web pages.

The ::first-letter pseudo-element lets you style the first letter of a block of text. It's often used to create decorative effects, like making the first letters of paragraphs bigger or more stylized.

    
      selector::first-letter {
        /* styles */
      }
    
  

Example of using ::first-letter

In this example, the first letter of a paragraph is bigger, bold, and colored blue. The float: left and margin-right properties create a "drop cap" effect, nudging the rest of the text away:

    
      /* Styling the first letter of a paragraph */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }
    
  

Supported properties for ::first-letter

The ::first-letter pseudo-element supports many properties, including:

• font
• color
• background
• margin
• padding
• border
• float
• text-transform
• text-decoration

With these properties, you can flexibly control the appearance of the first letter.

Example of advanced styling with ::first-letter

This example adds some extra effects to the first letter — like a text shadow and a bigger size:

    
      /* Styling the first letter of a paragraph with additional effects */

      p::first-letter {
        font-size: 3em;
        font-weight: bold;
        color: #e74c3c;
        float: left;
        margin-right: 0.2em;
        line-height: 1;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      }
    
  

7.2 Pseudo-element ::first-line

The ::first-line pseudo-element allows you to style the first line of a block of text. It's used to create various typographic effects, like changing the font or color of the first line, enhancing the visual perception of the text.

Syntax:

    
      selector::first-line {
        /* styles */
      }
    
  

Example of using ::first-line

In this example, the first line of a paragraph is bold, colored green, and given a light gray background:

    
      /* Styling the first line of a paragraph */

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

Supported properties for ::first-line

The ::first-line pseudo-element supports many properties, including:

• font
• color
• background
• margin
• padding
• border
• line-height
• text-transform
• text-decoration
• letter-spacing
• word-spacing

They allow you to flexibly control the appearance of the first line of text.

Example of advanced styling with ::first-line

In this example, the first line gets some extra effects, like text-transform to uppercase and changes in letter and word spacing:

    
      /* Styling the first line of a paragraph with additional effects */

      p::first-line {
        font-weight: bold;
        color: #e67e22;
        background-color: #f9f9f9;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        word-spacing: 0.2em;
      }
    
  

7.3 Combined use of ::first-letter and ::first-line

Pseudo-elements ::first-letter and ::first-line can be used together to create complex typographic effects.

Combined usage example

In this example, the first letter of the paragraph and the first line get different stylings, creating a complex and interesting visual effect:

    
      /* Styling the first letter and first line of a paragraph */

      p::first-letter {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

Complete example

In this example, the first letter of the paragraph is enlarged and colored blue, while the first line of the paragraph is bold and green with a gray background:

    
      /* Styling the first letter of a paragraph */

      p::first-letter {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }

      /* Styling the first line of a paragraph */

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Pseudo-elements ::first-letter and ::first-line Example</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
        </body>
      </html>
    
  

1

Task

Frontend SELF EN, level 30, lesson 2

Locked

First Line

First Line

Open

1

Task

Frontend SELF EN, level 30, lesson 2

Locked

Combined Styling

Combined Styling

Open