web interactivity

Creating a <p> style in the head of a page

Sometimes the best place to put our style definitions is in the head of an HTML document. As mentioned elsewhere, putting the styles here means they only affect the HTML page where they are located. On the other hand, we don't need to keep track of an eternal CSS file; everything is in one place. Here's how to style the <p> tag from the <head>.

1. Create a new basic page in Dreamweaver or open an HTML file that you have already created. If it's a new page select the menu item File > Save, type in a name for the page, select Desktop, and then click ‘Save’.

2. Insert some text and make sure it's in a <p> tag by hitting the 'return' key. The new style we are creating will have no affect on any text that's not in a paragraph!

3. Open the CSS Styles panel (select the menu item Window > CSS styles).

4. At the very bottom of the CSS Styles window, click on the icon to create a new style.

5. In the dialog box that follows, choose ‘Tag (redefines an HTML element)’ from the dropdown menu in 'Selector Type'.

6. In the 'Selector Name' section, either type in the tag name of 'p' or select it from the pulldown menu.

7. Under 'Rule Definition' at the bottom choose ‘This Document Only’ from the dropdown menu.

8. Click OK to exit the first part of this dialog.

9. Now a second dialog box appears, the ‘CSS Rule definition for p’ . Use it to pick a font-family, font-size, or color for the text. Many other changes can be made to the look of the text at this time. In the 'Background' catagory from the list at the left, try 'background-color', for instance.

10. Click ‘OK”

11. Select the menu item File > Preview in Browser > Safari. When asked to save, click ‘OK’.