CSS 101 | Part Seven - CSS and Paragraphs

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

Introducing the p tag

A paragraph is represented using the p tag.

Example of how to use the p tag

(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.

The paragraph tag must always be used with its associated closing tag (as seen above). Failure to do so may result in formatting issues.

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 tag specifically, or you want to target all instances of the paragraph tag 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 tag at the beginning of the CSS declaration, 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 background colour of pale green.

This declaration targets all instances of the paragraph tag across your website.

(The properties above may be new to you, but we will cover them fully in a later lesson.)

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, which has a background colour of pink, which we are applying to our paragraph, using the class selector.

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

Using the class selector with the paragraph type selector

CSS Code:

            p.myGreatClass {
            	border:1px solid #303;
                padding:4px;
            }
        

(X)HTML Code:

			< 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 border to our paragraph.</p>
        

Result:

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

Naming Conventions

When writing CSS, there are strict rules for how you must start your declaration: declarations cannot begin with numbers or symbols: they must begin with a lowercase letter. Therefore $myclass is incorrect, as is 22myclass, and _myclass; @myid is incorrect, *myid is incorrect...and you get the picture.

The naming convention you use may vary, however. In these examples, I have used camel case - myGreatClass, instead of my_great_class. Both the camel case method and the underscore method are valid. It is down to personal preference which you chose to employ.

Conclusion

Now you know how to style the paragraph tag and the 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!