Introduction to CSS text styles for beginners

The very first steps in the world of CSS. We will create a HTML page with text and a CSS style file, then connect the both and play with font settings, all this in Adobe Dreamweaver.

Create a new HTML page in Dreamweaver.

You can do it also in other programs, but you will have to improvise a little bit.

On a new document just type anything you want.

Save the document.

Do I have to say click above on File and select Save As... ?

Click above on File and select New...

In a new window select a CSS Blank Page and click Create.

On a new CSS document add a next css style:

.text {font-family: Tahoma; font-size: 22px;}

text is a name of CSS style and everything between { and } is its attributes like font, size, color and much much more. If you have question, just click on forum and don't hesitate to ask.

Save this CSS document too.

You should now have two files.

One for HTML document and other for CSS.

Now select the HTML document you have created before.

On a CSS window click on Attach Style Sheet icon.

If you don't see the CSS window, then click Window in menu above and enable it.

Then select the CSS file, you have created and saved before and confirm it.

Now, select the text on HTML document.

In properties window press the HTML view and select the created class from a drop down form (check my pic).

You will see the difference in your text.

Well I hope you will ;)

Switch to CSS document and change the size attribute.

Save the CSS document.

Switch back to HTML document and voila!