- Home
- World Wide Web
- Introducing HTML
- Introducing CSS
- Dreamweaver Interface
- Putting it all together!
- Design Principles
- Accessibility
- Useful Links
- Glossary
If you see this symbol in the text it is a Link to Glossary with more detailed information
Using CSS in Dreamweaver (Optional)
Using the CSS Styles Tab
Setting up a page for Cascading Style Sheets (CSS) may seem overwhelming, but you can master this seemingly complicated process by using Dreamweaver's CSS Styles tab to create and modify CSS styles in Dreamweaver. This document describes your first step in creating a Cascading Style Sheet: accessing and using the CSS Styles tab, the tool that you will use to create and define CSS styles.
For more information on the advantages of CSS and types of CSS styles, refer to Introducing Cascading Style Sheets - CSS
Accessing the CSS Styles tab
Before you can begin creating CSS styles, the CSS Styles tab needs to be open within the Design panel. After you have accessed the CSS Styles tab, you can begin creating and applying styles using style sheets.
To access the CSS Styles tab, from the Window menu, select CSS Styles. The CSS Styles tab appears in the Design panel.
Using the CSS Styles Tab
To use CSS effectively, it is important to understand and become comfortable using the CSS Styles tab. The CSS Styles tab lists all of a web page's CSS styles and their characteristics. The style names are listed in the left column, and their corresponding descriptions are listed on the right. You can use this view to edit existing styles. New styles are automatically added to the list.
NOTE: If you have not yet defined any CSS styles, the CSS Styles tab will show (no styles defined).
CSS Styles Toolbar
The CSS Styles tab also features a toolbar for attaching, creating, editing, and deleting the various CSS styles.
- Attach existing external CSS style sheet
- Create new CSS styles
- Edit selected CSS style
- Delete selected CSS style or style sheet
Formatting with CSS Styles
After you have created a style sheet, you can apply the style to text, objects, or elements as you create your web page. You may also wish to modify or even delete an existing style.
Applying Styles
HTML Tag styles are applied to specific elements according to that element's function within the web page. For example, <h1> tags are applied to level one headings within the page. Class styles can be applied to any tag. For example, when applied to an <h1> tag, the .border style will add a border to a specific level one heading. Both types of styles are easily applied.
Applying Styles: HTML Tags (Custom) Styles
Since HTML tag styles are not attached to a specific element of the web page when they are created, you need to apply them to individual design elements.
Once you have customized an HTML tag such as h1, all existing elements are updated. As you add design elements to your web page, they take the defined style.
When you worked through the activities in Project 2 the font, heading styles etc were already defined for you so you didn't need to alter them.
EXAMPLE: Applying a custom h1 style
- Select the desired text
- In the Properties inspector, from the Format box, select Heading 1
The custom style is applied.
Applying Styles: Class Styles
Class styles can be applied to any tag. You have a number of options when applying a custom style:
Applying Class Styles: CSS Styles Tab Option
- Select the object or text you want to apply the class style to
- In the CSS Styles tab, locate the desired style
- Right click the desired style > select Apply
The class style is applied to the object or text.
Applying Class Styles: Right Click Option
- Right click the object or text to which you want to apply the class go to style in the menu select Style > select the desired style
The class style is applied to the object or text.
Applying Class Styles: Properties Inspector Option
- Select the object or text to which you want to apply the class style
- In the Properties Inspector, from the Style box, select the appropriate style
The class style is applied to the object or text.
Applying Class Styles: Tag Selector Option
- From the document window Tag Selector, select the HTML tag to which you want to apply the class style
- Right click the selected tag > select Set Class > select the desired style
The class style is applied to the individual tag.
Editing Styles
During the web design process, you may wish to modify a style that you have already defined. You can edit embedded style sheets using these directions.
- Access the CSS Styles tab
- From the CSS Styles tab, right click the style you want to edit > Edit
OR
From the CSS Styles toolbar, click Edit Style Sheet
The CSS Style Definition dialogue box appears.
- From the Category section, select the style element you would like to modify
- Change the appropriate options in the corresponding style elements
- Click OK which changes to the style automatically apply to all applicable tags on the web page(s).
Deleting Styles
As your web page progresses, you may wish to delete a style or style sheet. You can delete styles from embedded style sheets using these directions.
- Access the CSS Styles tab
- From the CSS Styles tab, right click the desired style or style sheet to be deleted select Delete
OR
From the CSS Styles toolbar, click Delete CSS style
The style is removed from the CSS Styles tab, and the style definition is removed from all applicable tags on the web page(s).
Creating Style Sheets
Dreamweaver allows you to create inline, document level , which define styles within the individual web page's HTML code, or external style sheets, which define styles by linking a web page to a style sheet file (.css). This document explains the three different types of CSS styles and shows you how to create and attach, or reference, both types of style sheets.
Types of Styles
Dreamweaver allows you to define three different types of CSS styles: tag, class, and selectors (advanced).
Types of Styles: Tag
HTML code consists of tags that indicate how web pages should be displayed. Each tag has a default style applied each time the tag is used (e.g., Heading 1). When you use CSS to redefine the style of HTML tags, all text or elements within those tags are updated to reflect changes.
Types of Styles: Class
Class, or custom, styles are applied to individual elements of a web page. They are very useful because they allow designers to create style variations and apply them to existing HTML tags, text, or objects at any time. Class styles give designers the maximum flexibility that tag and advanced (which both define the style of tags at each occurrence) do not offer.
As class styles are defined, style definitions are stored in the CSS portion of a document. However, when you apply a class style to a pre-existing HTML tag, a special class property is added to the HTML code (e.g., <h1 class="title">). When you apply a class style to a section of text or object that is not an HTML tag, the selection of text cannot be identified by an individual tag. Thus, instead of a simple class property, a <span> tag is also added to the HTML as a text wrap (e.g., <span class="title">Review for Test 1</span>).
Since applying a class style removes formatting properties from the HTML, using class styles can greatly reduce the length of the HTML code. For additional information on the HTML considerations of custom styles, refer to Formatting with CSS Styles.
Types of Styles: Selectors (Advanced)
Advanced CSS selector styles are defined much like HTML tags. However, unlike HTML tags, which can be defined through the Properties Inspector or in the HTML code itself, CSS selectors can be defined only in style sheets. Dreamweaver allows you to define styles for four different types of CSS selectors: link, visited, hover, and active link.
- a: link - Defines the style of an idle link
- a: visited - Defines the style of a previously visited link
- a: hover - Defines the style of a link when the mouse travels over it
- a: active - Defines the style of an active link
Attaching Style Sheets
After you have created an external style sheet, you need to attach the style sheet to the files that will reference it. If you have created an embedded style sheet, this step is unnecessary, because the style sheet is already attached to the file you are working on.
- Open the web page that will link to the style sheet
- Select the CSS Styles tab
- From the CSS Styles tab, click Attach style sheet , the Attach External Style Sheet dialogue box appears.
To select a style sheet file
- Click Browse, the Select Style Sheet File dialogue box appears.
- Using the Look in box, locate and select the style sheet
- Click OK
- For Add as, select Link or Import
NOTE: Most web designers choose to attach style sheets using Link, which uses a <link> tag in the <head> section of the HTML. However, web pages using both embedded and external style sheets should reference the style sheet using Import, which uses the <@import> tag in the <head> section of the HTML.
- Click OK
The external style sheet is now attached to the file, and all style definitions automatically apply to the web page.
