The CSS Styles panel lets you track the CSS rules and properties that affect a currently selected page element, or the rules and properties that affect an entire document. It also lets you modify CSS properties without opening an external style sheet.
Make sure the index.html page is open in the Document window.
In the CSS Styles panel (Window > CSS Styles), click All at the top of the panel and examine your CSS rules.
In All mode, the CSS panel shows you all of the CSS rules that apply to the current document, whether those rules are in an external style sheet, or in the document itself. You should see two main categories in the All Rules pane: a <style> tag category and a cafe_townsend.css category.
Click plus (+) to expand the <style> tag category if it isn't already expanded.
Click the body rule.
The background-color property with a value of #000000 appears in the Properties pane below.
NOTE
You may need to collapse another panel, such as the Files panel, to see the full length of the CSS Styles panel. You can also alter the length of the CSS Styles panel by dragging the borders between the panes.
You set the background color for the page in Tutorial: Creating a Table-based Page Layout by using the Modify Page Properties dialog box. When you set page properties in this manner, Dreamweaver writes a CSS style that is internal to the document.
Click plus (+) to expand the cafe_townsend.css category.
Click the p rule.
All of the properties and values that you defined in the external style sheet for the p rule appear in the Properties pane below.
In the Document window, click once anywhere in either of the two paragraphs that you just formatted.
In the CSS Styles panel, click Current at the top of the panel and examine your CSS styles. In Current mode, the CSS panel shows you a summary of properties for the current selection. The properties shown correspond to the properties for the p rule in the external style sheet.
In the next section, you'll use the CSS Styles panel to create a new rule. Using the CSS Styles panel to create a new rule is much easier than typing the rule out by hand, as you did when you initially created the external style sheet.
Comments
lseband
said on
Nov 1, 2005
at
1:37 PM :
I working thorugh LiveDoc Tutorial with CSS and the cafe_townsend.css file. I can't seem to get so that it will open in CSS file box. There is no + sign. How do you delete a page like the cafe_townsend.css and start again?
No screen name
said on
Dec 28, 2005
at
9:54 AM :
On Macs, there is a small arrow instead of a plus sign. Did you try clicking on that?
No screen name
said on
Dec 28, 2005
at
10:19 AM :
I had this but discovered that I had used () instead of {} which corrected the problem
No screen name
said on
Nov 17, 2006
at
3:40 PM :
While working through the tutorial on this page, when I click on the CSS Styles/all page then click on the "p" file, I don't get a complete list of properties, only the font-family and the padding & value. Is this something new for Dreamweaver 8?
AZ-Debbie
said on
Feb 18, 2007
at
2:36 PM :
When I look at the properties, it shows padding with a strikethrough. The info in the pop-up says padding does not apply because it's not inherited, and it is applied to an enclosing tag. How do I resolve this so that the padding is inherited? Where do I find the conflicting style?
Comments
lseband said on Nov 1, 2005 at 1:37 PM : No screen name said on Dec 28, 2005 at 9:54 AM : No screen name said on Dec 28, 2005 at 10:19 AM : No screen name said on Nov 17, 2006 at 3:40 PM : AZ-Debbie said on Feb 18, 2007 at 2:36 PM :