How to make the First Letter of a paragraph Float to the Left in a Webpage

Written by
Float-First-letter

To make the first letter of the very first paragraph in a webpage larger in size and float across wrapped with the rest of the text like in magazines & newspapers and how it is being done in this blog post we need to understand 2-basic CSS style rules – (1) Descendant selectors & (2) Pseudo-class.
The Descendant selector matches all the elements which are descendants of a particular element and is defined using space between the elements. The Pseudo-class is used to define a specific state of an element and is defined using colons (:).

However, one can use inline styles too to accomplish this. Inline style is like applying the CSS style rules immediately around the part of the html body section where we need to apply the desired style rule rather than writing it in the style tags.

There are some websites that use inline styles for performance reasons like google.com because they think it is faster for the browser to display in inline styles than to go through the effort to parse style sheets and then apply the styles to elements.

Google-using-inline-Style

Generally inline style is used while prototyping a webpage when we would like to see quickly how the page would look like. It is also used often while writing html inside more restricted environments like if we are writing an html for an email marketing campaign or for a blog post.

Float-using-CSS-rules-in-Style-tag
Float using CSS rules in Style tag

CSS using style tag example
<!DOCTYPE html> <!-- This is just a signal to the browser that this webpage is written in modern HTML and not a cludgy, old, weird HTML -->
<html>
    <head>
        <meta charset="utf-8">
        <title>Floating first Letter using CSS rules</title>
        <style>
            body {
                font-size: 16px;
                font-family: sans-serif;
                line-height: 1.5;
            }
            h1 {
                font-family: cursive;
            }
           .capital p:first-child:first-letter {
                color: darkslategray;
                float: left;
                font-size: 5.3em; /* or we may use 5.3 X 16px  = 84.8px */
                font-weight: 600;
                line-height: 1;
                margin: -5px 5px -10px -5px; /* Top Right Bottom Left */ 
            }
        </style>
    </head>
    <body>
        <h1>How to float the first letter ?</h1>
            
  <div class="capital">
            
  <p>This is just an example paragraph to test capital letter which floats. Here I will be using the "div" tag with class name "capital". Moreover I will be using the "Descedant selectors" to only make the first letter of the first paragraph as capital which floats on the left, just as in newspapers & magazines. For selecting the first para and first letter we will be using pseudo-classes too so that it will be selecting the 1st para and its 1st letter only. </p>
  
  <p>Inorder to do this we will be using the "first-child" pseudo-class which means the very 1st paragraph and the "first-letter" pseudo-class which means the very 1st letter of the paragraph. Together it would be like "p:first-child:first-letter". And the whole CSS style tag will be like <strong>( .capital p:first-child:first:letter ).</strong></p>
  </div>
        
    </body>
</html>

Float-using-inline-CSS-Style
Float using inline CSS Style

Inline CSS style example
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Floating first Letter using inline CSS style</title>
        <style>
            body {
                font-size: 16px;
                font-family: sans-serif;
                line-height: 1.5;
            }
            h1 {
                font-family: cursive;
            }
        </style>
    </head>
    <body>
        <h1>How to float the first letter ?</h1>
            
  <div class="capital">
       <!-- Inline CSS style -->
  <p><span style="color: darkslategray; float: left; font-size: 5.3em; font-weight: 600; line-height: 1; margin: -5px 5px -10px -5px;">T</span>his is just an example paragraph to test capital letter which floats. Here I will be using the "div" tag with class name "capital". Moreover I will be using the "span" tag enclosing only the required first letter with approprites CSS inline style to only make the first letter of the first paragraph as capital which floats on the left, just as in newspapers & magazines.</p>
  
  <p>Thus inline styles are useful while writhing html inside more restricted environments like if we are writing it for an email marketing campain or for a blog post or to just see the changes quickly while prototyping a webpage.</p>
  
  </div>
    
     </body>
</html>

See the Pen Floating first letter using CSS rules in style tag
See the Pen Floating first letter using inline CSS style

Here in the example above there are 2-ways shown first is using the CSS style rules in the style-tags and second is using inline CSS style rules. So starting with the first way i.e. using style-tags which I think is the best way to style the page, we will be focusing on 2-things (1) How to select the paragraphs in a particular webpage and (2) How to select the first paragraph’s first letter. To select the paragraphs all we can do is to enclose it by <div> tags (which is used for grouping elements) and assign it to a particular class and use the descendant selector but how can we select the first paragraph’s first letter. Here the pseudo-class comes into play, that tells the browser to select only the first letter of the first paragraph. It is after that we can easily apply our desired styles to the selected body of text.

But in case of using the second way i.e. using inline styles one doesn’t require any of this and can directly apply the required CSS style rules just by using <span> tag which is used for grouping texts.

(However in most of the cases we should try to avoid the inline style rules because they often lead to messier html with styles that are harder to reuse.)

.capital p:first-child:first-letter written as CSS selector is a combination of – Descendent selector and Pseudo-class .capital p i.e. the class name “capital” space the <p> tag tells the browser to select the paragraphs present inside or which are assigned to the class called – “capital”. p:first-child:first-letter is using the “first-child” – selector which selects the very first paragraph and the “first-letter” – selector selects the very first letter of the paragraph or text. Together on being used it would be like selecting the 1st – para and its very 1st – letter (which I think is our goal).

Now coming to the CSS style properties that we need to apply, includes the properties like – color, float, font-size, font-weight, line height and margin. All this are required to be set with the proper values considering the rest of the text in the web-page, so that it would look visually correct and aligned properly to the rest of the text in the paragraph. So play around with this style tweaks and have fun using CSS.
🏷

Comments

Post a Comment

☑ Your comment will be accepted after moderation.