Showing <h1> <h5> text inline using css

T

6

5

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

Taurus answered 26/12, 2013 at 12:15 Comment(3)

An each H element starts with a new line. Try it by using span or other element. – Overflow 26/12, 2013 at 12:27

You received 6 answers and commented / accepted none. Why? – Bastard 26/12, 2013 at 21:1

Did you solved your issue? – Succussion 24/1, 2014 at 7:51

S

6

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;
}

Succussion answered 26/12, 2013 at 12:23 Comment(5)

Fine answer but for the font-size px is not recommended!Use em instead of px! – Peseta 26/12, 2013 at 15:1

@AsrafulHaque posted after my answer:) – Polythene 26/12, 2013 at 15:46

stackoverflow.com/users/1542290/mr-alien Do you know where to apply px and em? – Peseta 26/12, 2013 at 16:0

@AsrafulHaque em is not compulsory. Its fine if you need relative sizing and responsive support. – Succussion 27/12, 2013 at 4:9

stackoverflow.com/users/890082/surjith-sm You can follow the website where to use em and where to use px and others developer.mozilla.org/en-US/docs/Web/CSS/font-size Hope the answer – Peseta 27/12, 2013 at 8:38

P

3

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.

Polythene answered 26/12, 2013 at 12:19 Comment(2)

The font-size px is not recommended!Use em instead of px! – Peseta 26/12, 2013 at 15:2

@AsrafulHaque not a compulsion, also nothing to do with the question :) – Polythene 26/12, 2013 at 15:45

P

2

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

Peseta answered 26/12, 2013 at 14:44 Comment(0)

P

1

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

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

demo

Piggyback answered 26/12, 2013 at 12:34 Comment(1)

The font-size px is not recommended!Use em instead of px! – Peseta 26/12, 2013 at 15:3

S

0

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

Severally answered 26/12, 2013 at 12:18 Comment(0)

C

0

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.

Capers answered 26/12, 2013 at 12:19 Comment(0)

Recommended topics

Hot tags