Skip to main content

A Beginner's Guide to CSS | Part Seven - CSS and Paragraphs

Submitted by helen on Wednesday, April 21, 2010 - 22:07; Modified on Thursday, August 18, 2016 - 11:12

You've made it through the chapters detailing some heavy background information on CSS. Now we're on to some practical examples. In this instalment, CSS and Paragraphs, I will show you how to style paragraphs with CSS.

Introducing the p element

A paragraph is represented by the p element, which, as you can probably guess, stands for paragraph. Anytime you want to represent a paragraph, you should use the p element. Some people will use other elements, such as placing all of their supposed paragraphs in a div, and separating each paragraph with a line-break. This is not advisable. In an age where the elements you use affect how crawlers access your site, and how your site is interpreted by people with disabilities, it is best to use elements that directly describe your content. Your HTML doesn't just sit behind the scenes; it plays a vital role in your users' experience.

Example of how to use the p element

(X)HTML Code:


<p>There are only three S.T.A.R.S. members left now. Captain Wesker, Jill and myself. We don't know where Barry is.</p>

Result:

There are only three S.T.A.R.S. members left now. Captain Wesker, Jill and myself. We don't know where Barry is.

This is how our paragraph looks. I've added a background colour so it stands out.

Closing elements

In HTML 5 and XHTML, elements must always be closed, in other words, terminated by the appropriate closing tag, <a></a>. Some elements self-close and how they do so varies between XHTML and HTML 5, but we won't worry about that just yet, so as not to overcomplicate matters.

Element not closed properly/left open

This is an example of a paragraph that wasn't closed properly and has been left open.


<p>This paragraph is open.

Element closed properly/not left open

This is an example of a paragraph that is closed properly and has not been left open.


<p>This paragraph is closed.</p>

How to style paragraphs

When styling paragraphs, as with all other elements, you can use whichever selectors you like. If you want to target the paragraph element specifically, or you want to target all instances of the paragraph element across your website, you would use the paragraph type selector.

How to use the paragraph type selector

To use the paragraph type selector — as with any type selector — you provide the name of the element, in this case p, at the beginning of the CSS rule, before the open curly brace.

CSS Code:


p {
  padding:6px;
  background-color:#6C9;
}

Result:

In this example, we are applying a padding around our paragraph of 6px and giving it a green background colour.

This rule targets all instances of the paragraph element.

The properties above may be new to you, but we will cover them fully in A Beginner's Guide to CSS | Part Ten - Backgrounds with CSS and A Beginner's Guide to CSS | Part Fifteen | Padding and Margins.

Applying a class to a paragraph

To apply a class to a paragraph, you apply a class to your element using the HTML class attribute, and target that class using the CSS class selector.

CSS Code:


.myGreatClass {
  background-color:#F66;
}

(X)HTML Code:



<p class="myGreatClass">In this example, we are applying a pink background colour to our paragraph.<p>

Result:

In this example, we are applying a pink background colour to our paragraph.

In the above example, we are creating a class called myGreatClass, with a pink background, which we are applying to our paragraph, using the class selector.

If you plan to use myGreatClass on several different types of elements, but want certain styles to change depending on the element, you can apply the class to the paragraph element only. Here's how it's done.

Using the class selector with the paragraph type selector

CSS Code:


p.myGreatClass {
  border:6px solid #9645c5;
  padding:4px;
}

(X)HTML Code:


<p class="myGreatClass">This purple border will only be applied to paragraphs using the class myGreatClass — not to any other elements.</p>

Result:

This purple border will only be applied to paragraphs using the class myGreatClass - not to any other elements.

This will only target paragraphs with the class myGreatClass applied to them.

Applying styles to paragraphs via the ID selector

If an element has an ID, it may be preferential to style that element up using the ID selector. The ID selector takes the form of a hash, followed by the ID of the element.

CSS Code:


#someParagraph {
  border:1px dashed #900;
  padding:4px;
}

(X)HTML Code:


<p id="someParagraph">In this example, we are applying a dashed border to our paragraph.</p>

Result:

In this example, we are applying a dashed border to our paragraph.

Conclusion

Now you know how to style the paragraph element, as well as the relevant type selector used to accomplish this task. In the next chapter, I'll show you the CSS properties used to style text, so you can start applying some interesting styles to your paragraphs!