text Indent

by magizter

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget vehicula mauris, a ullamcorper enim. In quis nisl finibus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget vehicula mauris, a ullamcorper enim. In quis nisl finibus, dignissim est quis, ornare dolor. Sed aliquam fringilla faucibus. Curabitur massa metus, pulvinar ac vestibulum vel, consequat a orci. Ut eget tincidunt ex. Donec imperdiet finibus placerat.</p>

<h3>Headline</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget vehicula mauris, a ullamcorper enim. In quis nisl finibus, dignissim est quis, ornare dolor. Sed aliquam fringilla faucibus. Curabitur massa metus, pulvinar ac vestibulum vel, consequat a orci. Ut eget tincidunt ex. Donec imperdiet finibus placerat.</p>

<p>Nunc fringilla rhoncus sem in blandit. Nunc ipsum lectus, porttitor quis ligula at, faucibus condimentum orci. Ut commodo lectus vitae metus cursus elementum. Donec rutrum gravida consectetur. Duis mollis nisl id velit aliquet, sit amet eleifend sapien vehicula. Vivamus dui libero, suscipit eget vehicula eu, sollicitudin lacinia est. Maecenas at urna augue.</p>

<p>In mattis nulla nibh, sit amet porttitor orci viverra et. Ut finibus mi in lorem lacinia imperdiet. Nam sagittis pellentesque metus ut hendrerit. Aenean laoreet sem vel enim dictum, ac consequat lacus rutrum. Fusce molestie, magna semper auctor dignissim, leo eros tincidunt eros, vitae rhoncus dui purus suscipit arcu.</p>


<h3>Headline</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget vehicula mauris, a ullamcorper enim. In quis nisl finibus, dignissim est quis, ornare dolor. Sed aliquam fringilla faucibus. Curabitur massa metus, pulvinar ac vestibulum vel, consequat a orci. Ut eget tincidunt ex. Donec imperdiet finibus placerat.</p>

<p>Nunc fringilla rhoncus sem in blandit. Nunc ipsum lectus, porttitor quis ligula at, faucibus condimentum orci. Ut commodo lectus vitae metus...

CSS

p:first-of-type {
  font-weight: bold;
}

h3 ~ p {
    text-indent: 25px;
    margin-top: 0;
    margin-bottom: 0;
}

h3 + p:nth-of-type(1n) {
    text-indent: 0;
}

h3 {margin-bottom: 0}