Geek Answers Handbook

Display text <h1> <h5> using css

I want to show Mood Analysis in such a way that S will be much larger than the text h5.

What is wrong with follwing code:

HTML:

<h1>S</h1> <h5>entiment Analysis</h5>

CSS

h1 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

h5 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

Live Code in CodePan

+4
source share
6 answers

This is dirty code. If you just want to make the first letter of Bigger, you can try the following.

Working demo

HTML

<div>Sentiment analysis</div>

CSS

div:first-letter {
  font-size:30px;
  font-weight:bold;
}
+5
source

, inline inline-block display: inline; display: inline-block () <span> h1

<h1><span>H</span>ello</h1>

H

h1 > span {
   font-size: 54px;
}

, :first-letter pseudo, .

. , , class id .

+3
Use this css rules for proper follow the css rules to render the requirement!


  <style>
  h1:first-line {
            margin-left: 36%;
            color:#C0C0C0;
            font-family: "calibri";
            font-size:1em;
            text-decoration:underline;
            white-space: pre;
            display:inline;
                }
   h1:first-letter{
            margin-left: 36%;
            color:#C0C0C0;
            font-family: "calibri";
            font-size:2em;
            text-decoration:underline;
            white-space: pre;
            display:inline;
                }
  </style>

enter image description here

+2
<h1>Hello</h1>
<h1>World</h1>

h1:first-letter {
    font-size: 60px;
}

+1
<style type="text/css">
      .style1
    {
        font-size: 36px;
    }
</style>
</head>
<body>
<p>
   <span class="style1">S</span>entiment</p>
</body>
0

display:inline h1 h5, margin-left h5

" >

 h1
   {
         margin-left: 36%;
         color:#C0C0C0;
         font-family: "calibri";
         text-decoration:underline;
         white-space: pre;
         display:inline;
  }


h5
   {
        color:#C0C0C0;
        font-family: "calibri";
        text-decoration:underline;
        white-space: pre;
        display:inline;
   }

Your way to implement this seems a bit complicated, even if you want to go with the code, you can use my answer, otherwise select any of the simple methods in the other answers here.

0
source

More articles:


All Articles