Add a heading to your page such as 'Welcome to the Web Page of...'. With the cursor still in this line click on Format in the Properties box (at the bottom of the screen) and choose Heading 1 from the list. This will apply the current style setting of Heading 1 to your text.
To change the appearance of this text choose Modify/Page Properties. The appearance of the most basic elements of the page can be changed under 'Appearance'
The Headings of your page can be changed under 'Headings'.
If you design your own headings you should give them some consistency in the use of fonts, size and colour. More on this later.
The CSS panel can be found on the right of the screen. The CSS panel displays the settings for either the current style, depending on where the cursor is, or all styles in the document. You now have two styles, Heading 1 (h1) and Body (body, th, td). You can change the style properties directly from the CSS panel by clicking in the Properties list or add new properties with the Add Property button.
CSS (Cascading Style Sheets) allows you to apply styles to any number of web pages from a single style sheet or file. A web site may contain hundreds of pages and they should all have the same 'look and feel'. This is best achieved with a style sheet that defines how text and other elements of the page will appear. When a style sheet is used it is easy to change the appearance of every page in a web site by changing only the definitions in the single style sheet file (as with this site).
CSS can also be used to provide different designs for different users, for example one design for normally sighted people and another for those with a visual handicap.
To create a new CSS rule click on the New button in the bottom right corner of the CSS panel. This opens the New CSS Rule dialogue box.
Create a CSS rule for Heading 2 by selecting 'Tag' and 'h2' from the Tag list. Create an external CSS file by choosing '(New Style Sheet File)'. This will open a Save File window so you can enter a name and save the CSS file for future use - be sure to save the CSS file in your web folder. Next you will see the CSS RUle Definition box.
Enter the settings that you want for Heading 2. You should provide visual clues to make it less important than Heading 1 e.g. smaller, weaker colour, left justified. Click OK to define the style in the external CSS file.
Switch to Code view and notice that Dreamweaver has created styles at the top of the document but the one for Heading 2 is not there since you specified that it should be in a separate CSS file. The style for H1, however, is in the file and we would like to move it to the separate CSS file so all the styles are in the same place and any page on our site can refer to them.
Select the styles in the document and cut them to the clipboard (Ctrl-X). Switch to the CSS file you created earlier by clicking on its tab (or open it). Paste the styles into the CSS file so that all your style definitions reside there. Make sure the styles are in logical order.
Dreamweaver has automatically added a link to your CSS file so the text will be correctly styled when you open the document. When you create other documents in the future you will add a link to this CSS file so that all your pages have the same styles. If you want to change a style you will work with the CSS file so that all your pages are changed in one go.
Close the files and open your index.html page. The styles should still be applied and you can change them in the CSS panel - look for the file name in the box and the styles listed underneath. Each time you change a property the CSS file is updated, though you have to save it. If you make any change to the styles in the CSS file it will open and the settings will be changed but not saved, you have to do that yourself.
Create a new file and save it with a suitable name (in a sub-folder if you wish). To attach a style sheet click on the button in the CSS panel and locate the CSS file by clicking on the Browse button in the dialogue box.
Note the sample style sheets option at the bottom of the dialog. Click this link to examine them. To attach a style sheet browse to your web folder and then click OK.
If you another style sheet from the samples many of its settings will override those in your own. To unlink a style sheet select it in the panel and click the unlink button. You could also click on the Code button and delete the <link> line that refers to the Dreamweaver style sheet. The order of the style sheets in the code is critical, placing one above the other gives the first one primacy over the other (this is why they are called cascading style sheets).
Return