Making the first paragraph bold with CSS

September 28, 2008 at 10:27 pm · Filed under CSS

With CSS, it’s possible to make the first element after another element look different to the rest. Lets say you have a title, and two paragraphs afterwards e.g.:

<h3>My Paragraph Title</h3>
<p>This is paragraph one.</p>
<p>This is paragraph two.</p>

To make the first paragraph after the title bold, you use what’s called an ‘adjacent sibling selector‘. This allows you to target an element which follows another element. In this case, the first p element follows an h3 element. To use CSS to say that you want the first p tag after an h3 tag to be set in bold, your code would look like this:


h3 + p {font-weight: bold;}


Now each time a p tag follows an h3 tag… it is set to bold. Nice.

Comments

New CSS category

September 28, 2008 at 9:59 pm · Filed under CSS

I’ve decided to add a new category to my blog - CSS. It’s been a topic I’ve wanted to write about for a while now, only if to learn a thing or two along the way. I’m going to cover all things to do with CSS - from Learning CSS, CSS techniques, Browser hacks and CSS best practices.

Comments