|
|
|
|
CSS basics in Adobe Dreamweaver
It is more practical for your web page to use the CSS file, which defines all of the fonts that you want to use.
|
|
 |
|
|
|
|
|
 |
|
 |
|
 |
 |
1.
|
|
|
Open new HTML document and write something.
|
|
|
2.
|
|
|
Click Window and select CSS Style to open CSS styles window on the right side.
|
|
|
4.
|
|
|
In new window set: Selector Type: Class (can apply to any HTML element), at Selector Name write any name, at Rule Definition select (New Style Sheet File).
Click OK.
|
|
|
5.
|
|
|
New window opens. Here you have to name CSS file, where all your fonts will be stored.
Name the file and click Save.
|
|
|
6.
|
|
|
In new window we have to define font style for style Title.
Select any Font style and any size and click OK.
|
|
|
7.
|
|
|
We have created style font Title.
Now we will create another one. Click New CSS Rule.
|
|
|
8.
|
|
|
Write a name for new style and at Rule Definition select style you have created before.
Click OK.
|
|
|
9.
|
|
|
In settings window define characteristics for style Text. Select font style, size, and color.
Click OK.
|
|
|
10.
|
|
|
We have created CSS styles. Now we will use it.
Select first sentence.
|
|
|
11.
|
|
|
Below under Propertiese at Class field select style Title.
|
|
|
12.
|
|
|
Font style for the first sentence has changed.
|
|
|
13.
|
|
|
Now do the same for the second sentence, only this time use the other style.
|
|
|
14.
|
|
|
I will show you how to use this styles also for any other page.
Open new or existing page and you will notice, you don't have any options in dropdown menu for styles.
|
|
|
15.
|
|
|
Select Attach Style Sheet...
|
|
|
16.
|
|
|
In new window at File/URL browse for font you have created befor, at Add as select Import and click OK.
|
|
|
17.
|
|
|
Now use CSS styles you have created. If you make any changes in your CSS file you have created, the changes will take affect on all pages.
|
|
|
 |
 |
 |
|
 |
|
|