|
|
|
|
|
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.
|
|
 |
|
|
|
|
|
|
|
|
|
|
 |
1.
|
|
|
Create a new HTML page in Dreamweaver.
You can do it also in other programs, but you will have to improvise a little bit.
|
|
| |
2.
|
|
|
On a new document just type anything you want.
|
|
| |
3.
|
|
|
Save the document.
Do I have to say click above on File and select Save As... ?
|
|
| |
4.
|
|
|
Click above on File and select New...
In a new window select a CSS Blank Page and click Create.
|
|
| |
5.
|
|
|
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.
|
|
| |
6.
|
|
|
Save this CSS document too.
|
|
| |
7.
|
|
|
You should now have two files.
One for HTML document and other for CSS.
|
|
| |
8.
|
|
|
Now select the HTML document you have created before.
|
|
| |
9.
|
|
|
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.
|
|
| |
10.
|
|
|
Then select the CSS file, you have created and saved before and confirm it.
|
|
| |
11.
|
|
|
Now, select the text on HTML document.
|
|
| |
12.
|
|
|
In properties window press the HTML view and select the created class from a drop down form (check my pic).
|
|
| |
13.
|
|
|
You will see the difference in your text.
Well I hope you will ;)
|
|
| |
14.
|
|
|
Switch to CSS document and change the size attribute.
Save the CSS document.
|
|
| |
15.
|
|
|
Switch back to HTML document and voila!
|
|
|
 |
|
 |
|
 |
|
|
