Showing <h1> <h5> text inline using css

Question

Showing <h1> <h5> text inline using css

5.7k views Asked by user3121782 At 26 December 2013 at 12:15

I want to show "Sentiment analysis" such that S should be much larger then h5 text.

What's 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

Original Q&A

There are 6 answers

**Asraful Haque** · Answer 1 · 2013-12-26 14:44:05

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

**Sriram** · Answer 2 · 2013-12-26 12:18:53

Sriram On 26 December 2013 at 12:18

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

**Mr. Alien** · Answer 3 · 2013-12-26 12:19:14

You are trying to align 2 block level elements in the same line, so either you need to make them inline or inline-block by using display: inline; or display: inline-block(recommended) or use <span> element inside your h1 like

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

And than you can target the H using

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

If you are looking to target only the first letter, it is better, if you use :first-letter pseudo, which will save you an element as well.

Demo

Note: I am using general element selectors here, make sure you use a class or an id to target the element uniquely.

**Prasanth K C** · Answer 4 · 2013-12-26 12:19:53

Add display:inline to both h1 & h5, Then remove margin-left from h5

DEMO HERE >>

Try this

 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 little complex, even if you want to go with your code you can use my answer, otherwise select any of the simple method in other answers here.

**Surjith S M** · Answer 5 · 2013-12-26 12:23:18

Surjith S M On 26 December 2013 at 12:23

That's a messy code. If you just want to make the first letter Bigger, You can try the following.

Working Demo

HTML

<div>Sentiment analysis</div>

CSS

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

**Java Curious ღ** · Answer 6 · 2013-12-26 12:34:09

Java Curious ღ On 26 December 2013 at 12:34

<h1>Hello</h1>
<h1>World</h1>

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

demo

TechQA.

Showing <h1> <h5> text inline using css

There are 6 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in ALIGNMENT

Related Questions in HTML-HEADING

Popular Questions

Popular Tags

Trending Questions