Stylize each different line

Asked

Viewed 49 times

2

I have a text in four lines:

<span>Pare de perder
    tempo
    por falta de<br>
    Presença Digital.</span>

I want each of these lines to have a different font size. What would be the most correct way to do?

css
  • 2

    Separates each row into a div and assigns a class to each, or uses Nth-Child of [tag:css3]

  • In fact I think the right one will be each in one <p>

  • @Everson Nth-Child works on the structure I built?

  • With CSS I find it difficult this way, but with JS is possible.

  • Note that this HTML only has 2 lines.

3 answers

3


Using a div and divinternal s (you can also put a specific class in each one):

.mensagem div:nth-child(1) {
  font-weight: bold;
}
.mensagem div:nth-child(2) {
  color: red;
}
.mensagem div:nth-child(3) {
  text-decoration: underline;
}
.mensagem div:nth-child(4) {
  font-size: 18pt;
}
<div class="mensagem">
  <div>
    Pare de perder
  </div>
  <div>
    tempo
  </div>
  <div>
    por falta de
  </div>
  <div>
    Presença Digital.
  </div>
</div>

1

The correct would be using the tag <p> paragraph.

<p> The Paragraph element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

.container {
    margin-left: 4rem;
}
.container > p:first-child {
    position: relative;
    margin-left: -2rem;
}
<div class="container">
    <p>Pare de perder</p>
    <p>tempo</p>
    <p>por falta de</p>
    <p>Presença Digital.</p>
</div>

  • dude, you forgot the css

  • @Leandro edited with CSS to look like he wants

  • In MY view there is no "correct" but the most appropriate. HTML is just structure language and goes a lot of the purpose of what one wants to do. Example: the tag <p> already has a preset margin, so in some situations I don’t need it and I will have to use the CSS to correct this, while in <div> (division) this does not happen. https://jsfiddle.net/p1q3xuod/

  • Remember that your answer is correct for the question in question. D

  • @Everson that’s the beauty of CSS, there’s always another way to do the same haha thing, but each project has its own unique features... The author of the question will choose the one that pleases him the most. Obs: div also has its default values that may or may not serve... ;)

1

A dynamic and random way to do this is by using Javascript, swapping <span> for <pre>. The pre allows pre-formatting displaying text the way it was typed, with spaces and line breaks.

var pre = document.querySelector("pre"),
teste = pre.innerHTML.trim().split("\n"),
final = '';
for(var x=0; x<teste.length; x++){
   final += "<span style='font-size: "+ Math.floor(Math.random()*(24-12)+12) +"."+Math.floor(Math.random()*(9-1)+1)+"px;'>"+teste[x]+"</span>\n";
}

pre.innerHTML = final;
pre{
   font-family: Tahoma, Arial, Helvetica;
}
<pre>Pare de perder
    tempo
    por falta de
    Presença Digital.</pre>

The value 24 is the maximum font size and 12 minimum. For example, if you want a maximum source of 28 and a minimum of 9:

Math.floor(Math.random()*(28-9)+9)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.