Target first letter of an element – CSS3

The ::first-letter selector is used to add a style to the first letter of an element.
You guys may have seen something like this on few sites, where the first letter of a main paragraph is larger than the rest of the content.


p::first-letter {
  font-size: 25px;
  color: #8A2BE2;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus justo erat. Vestibulum neque nulla, hendrerit vitae ipsum aliquam, dignissim ullamcorper tortor. Suspendisse ultricies tortor sed dolor tincidunt euismod. Sed nibh turpis, tincidunt ac massa non, ornare dictum est.

Text Stroke

If you want to create text stroke. There is a CSS property available.
But this will work for the WebKit browsers only, Not for Firefox and Opera. You can use fallback text-shadow property instead.

See the below examples.


h6{
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: 1px red;
  -webkit-text-fill-color: white;
}

Example:

This is my text


h6{
    /* Fall back CSS for Firefox and Opera */
    text-shadow:
    1px 1px 0 red,    
   -1px -1px 0 red,  
    1px -1px 0 red,
   -1px  1px 0 red,
    1px  1px 0 red;
}

Example:

This is my text

Tap to WhatsApp feature on website

Hey Friends,
If you want to add WhatsApp feature on your website where people click it, it opens a WhatsApp conversation with you then use the below code to make it happen.


<a href="https://wa.me/yourwhatsappphonenumber/?text=Hey there!"a></a>