CODEWITHSUNDEEP
htmlcsswebpseudo-element
Hasan Fathi
Hasan Fathi

Reputation: 6106

How to Create paragraph first letter uppercase in html & css (in special format)

Please help me to create this format of paragraph in html & css

CSS and HTML:

.home-p-main {
  font-family: Times New Roman;
  font-size: 10pt;
  text-align: left;
  position: relative;
  margin-left: 10pt;
  margin-right: 10pt;
  position: absolute;
  margin-top: 1pt;
  color: black;
  background-color: aliceblue;
  text-indent: 10pt;
}
.home-p-main::first-letter {
  text-transform: capitalize;
  color: red;
  font-size: 300%;
  font-weight: bold;
  padding-left: 25px;
  position: relative;
  margin-left: -26px;
}
<p class="home-p-main">The Linux open source operating system, or Linux OS</p>

Just with html and css

Upvotes: 1

Views: 2371

Answers (3)

Kawinesh S K
Kawinesh S K

Reputation: 3220

CSS 

   .home-p-main{
        font-family: Times New Roman;
        font-size: 10pt;
        text-align: left;
        position: relative;
        margin-left: 10pt;
        margin-right: 10pt;
        position: absolute;
        margin-top: 1pt;
        color: black;
        background-color: aliceblue;
        width:100px;   
    }
    .home-p-main::first-letter{
        font-size: 300%;
      float: left;
      height: 64px;
      margin-right: 10px;
      color: rgb(245, 10, 10);
      border-radius: 5px;

    }

For this to work as you wished you have to remove text-indent from .home-p-main class and if you wish the words to be aligned perfectly in-spite of break letters use word-break: break-all; in the .home-p-main class

DEMO

Upvotes: 4

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18133

I am guessing that the problem is that the first letter stays on the first line, and the second line underneath it. And you would like the second (and so on) to be on the right of the first letter.

You could do so, by displaying that first letter as a block, and float it to the left.

The CSS then looks like this (removed unnecessary lines)

.home-p-main{
    font-family: Times New Roman;
    font-size: 10pt;
    margin-left: 10pt;
    margin-right: 10pt;
    margin-top: 1pt;
    background-color: aliceblue;
}
.home-p-main:first-letter{
    text-transform:capitalize;
    color: red;
    font-size: 500%;
    font-weight: bold;
    display: block;
    float: left;
    margin-right: 5pt;
}

DEMO

Upvotes: 7

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

There's a property for that:

.home-p-main {
    text-transform: capitalize;
}

If you want the first letter of the first word to be uppercase, use :first-letter with a different transform instead (although it doesn't really matter). Note that in order for :first-letter to work your a elements need to display as blocks:

.home-p-main {
    display: block;
}

.home-p-main:first-letter {
    text-transform: uppercase;
}

Upvotes: 1

Related Questions