Home About Portfolio Contact Fun

CSS how to: How to apply CSS rule to text

And now we going to learn, what kind of things can we do with our text using CSS styles.. Are you ready?

How to

Using CSS for text is very simple thing. There are different block-level elements, such as

  1. <p>your paragraph</p>
  2. <h1>your heading</h1> (from h1 to h6)
  3. <ul>your unordered list</ul> (will speak about it later)

(there are some other block-level elements in use, but I think, that these will be enough for start)

The most common from these is the <p> which means paragraph. To set the paragraph properties in CSS, do the following:

Create the CSS rule

Paste this code between your <head> and </head> tags. (If you have a separate CSS for your web site, you should know, how to put the following code in to it :) )

p {
font-size:12px;
color: #0099FF;
}

Applying the CSS to text

Than copy and paste this text somewhere between your <body> and </body> tags:

<p>This is my first paragraph. This is my first paragraph. This is my first paragraph. This is my first paragraph. </p>

You should get this as result:

This is my first paragraph. This is my first paragraph. This is my first paragraph. This is my first paragraph.


The beauty of the CSS is that if you defined the rules once, you can use them anytime you want. From now on, if you hit enter (create a paragraph) in your WYSIWYG editor, your paragraph will designed as you added in your CSS. Lets play a bit with the text align:

Replace the existing CSS with this

p {
font-size:12px;
color: #0099FF;
text-align:center;
}

This is what you get:

This is my first paragraph. This is my first paragraph. This is my first paragraph. This is my first paragraph.

Try to change the text-align property to right and to justify. Easy, isn't it?

Different CSS for paragraph

In case you need to highlight a paragraph, you should use different CSS classes.

For example: You want to change the design for the following block. You need a paragraph with black backround and white text. How to do it with CSS? Easy:

  1. Create a CSS rule (class)
    Copy and paste this code between your <head> and </head> tags
    The name will be: black-and-white

    .black-and-white {
    background-color:#000000;
    color:#FFFFFF;
    }

  2. Apply the CSS rule.
    Copy and paste this text underneath your first paragraph:

    <p class="black-and-white">This is my second paragraph with high contrast. I am using a different CSS for this paragraph.</p>

And the result:

This is my second paragraph with high contrast. I am using a different CSS for this paragraph.


This is simple as ABC :)
In the following tutorial you will learn about the Headings.

 





This web design tutorial brought you by Attila Hajdu, expert web designer, multimedia specialist in Portsmouth.


back to css tips
Fun