CODEWITHSUNDEEP
htmlcss
Augusto
Augusto

Reputation: 4243

How make a single CSS class to make two text lines, like Title and Subtitle?

My code currently looks like this:

.data-title {
  font-weight: bold;
}

.data-content {
  color: gray;
}
<p class="data-title">
  Title
</p>
<p class="data-content">
  Content
</p>

The result is how I intended it to look:

enter image description here

However, I would like to make the following two changes:

  1. Decrease the margin between the elements.
  2. Have a single class on a parent element instead of the two classes on the paragraphs that automatically identifies the first line and second line and applies the current styles.
<div class="my-class">
  <p>Title</p>
  <p>Content</p>
</div>

Upvotes: 0

Views: 1358

Answers (3)

Giltix
Giltix

Reputation: 3

Make sure the p-element in the title block loses its margin. After that: style all elements by their own html class. 

<div class="title_block">
  <p>Title</p>
  <span>Subtitle</span>
</div>

<style>
  .title_block p {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
  }

  .title_block span {
    font-size: 20px;
  }

</style>

Upvotes: 0

Anmol Juneja
Anmol Juneja

Reputation: 325

If i am right then you are asking for this may be:-

1st method:- You can use span tag

p {
  color: blue;
  font-size: 40px;
  margin-bottom: 10px
}

p span {
  color: red;
  display: block;
  font-size: 15px;
}
<p>Title<span>Content</span></p>

2nd Method :-

div.main p {
  color: blue;
  font-size: 40px;
  margin-bottom: 0px
}

div.main p+p {
  color: red;
  font-size: 20px;
  margin-top: 0px
}
<div class="main">
  <p>Title</p>
  <p>Content</p>
</div>

3rd Method:-

div.main p {
  color: blue;
  font-size: 40px;
  margin-bottom: 0px
}

div.main p:nth-child(2) {
  color: red;
  font-size: 20px;
  margin-top: 0px
}
<div class="main">
  <p>Title</p>
  <p>Content</p>
</div>

Upvotes: 1

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

You can use the :first-child selector to select the first element, and then combine this with the + * selecter to get the element following it. To decrease the margin, simply set margin: 0 (or whatever value you see fit) to all paragraph elements in your div (or you could add them to only the ones you already selected, depending on whether there are any other paragraphs that should retain their margin).

.my-class span {
  display: block;
}

.my-class :first-child {
  font-weight: bold;
}

.my-class :first-child + * {
  color: gray;
}
<div class="my-class">
  <span>
    Title
  </span>
  <span>
    Content
  </span>
</div>

Upvotes: 1

Related Questions