Working with Cascading Style Sheets
When creating websites, its important to understand the basics of CSS (which is short for “Cascading Style Sheets.”) You can use CSS in Dreamweaver to create complex and appealing web pages. Please note that it is not necessary to understand the theory behind CSS in order to use Dreamweaver effectively. CSS provide a versatile, precise and efficient means of controlling the appearance of content on your web page. With CSS, you can create web page designs that will appear as you intend on both large and small computer screens. CSS is also helpful when creating styles to align and position elements on your web page.
CSS works by applying instructions to the content of the web page. You can select either default CSS instructions provided by Dreamweaver or you can create custom instructions. These instructions can apply to just the content of one element on a page or to all of the pages on your website. When using traditional web page design, it is necessary to repeat the instructions for each page over and over again. CSS, however, is versatile enough to permit site-wide changes to a page element, like a heading, for example. These changes will apply to multiple pages and not just the one on which you are currently working.
In Dreamweaver there are four different style selector types: (1) the tag selector, which redefines existing HTML tags; (2) the class selector, which creates new styles that will apply to any chosen element on a web page, (3) the ID selector, which creates styles that are used to change an element once per page, and (4) the Compound selector, which combines two or more style definitions for maximum control of your page’s content and appearance.
Editing CSS Styles
It is easy to edit CSS styles in Dreamweaver using the CSS button in the Properties Inspector. First, click an element on the page that you want to format. Now click on the “CSS” button below the “HTML” button on the left side of the Properties Inspector. You will see that the CSS options now appear in the Properties Inspector.
Click the “Edit Rule” button in the Properties Inspector and the “CSS Rule Definition” dialog box will open. Click on “Type” from the “Category” menu and then click the downward-pointing triangle next to the “Font-family” text field. Choose a different font collection.
Next, click on the “Color” square to open the color cubes menu and choose a new font color with the dropper. When you have made your selections click “OK.”
Now, click in the “CSS styles” panel on the “Rule” you have just modified. You will see that the Style Rule appears as recently modified and its properties are displayed in the “Properties” tab below.
In this example, the font type and color for the “paragraph” text have been changed to Arial and green.
Creating Class Styles
“Class Styles” are used to format text and other elements on your web page without affecting HTML tags. You can then apply those styles to elements of your page just like you could with HTML tags.
To create a Class Style first click on “CSS Styles” from the “Format” drop-down menu found in the Menu Bar. Next, choose “New” from the menu bar which appears. This will open the “New CSS Rule” dialog box.
Click on the small black triangle in the first drop-down menu and select “Class”. Type a name for your new heading class style without spaces, special characters or any additional punctuation. We will call this Class Style “specialheading.” All class style names must begin with a period and Dreamweaver will add one for you automatically.
Choose “This Document Only” from the “Rule Definition” drop-down menu. Click “OK.” This will open the “CSS Rule Definition” dialog box. Select a Style category from the left side and change the style settings you desire. Let’s modify the font type, size and color. Click “OK.”
Next, click on the CSS Styles panel. The CSS Styles panel will display the new “specialheading” class style you have created. You can now apply the class style to the appropriate headings on your web page using the Properties Inspector. We will see how to do this in the next lesson.
Class styles are ideally used to quickly format content, such as headings and captions that may appear multiple times throughout the same web page.
For more help on Dreamweaver, check out our tutorial.
