Rename CSS rule

Is there an easy way to rename an existing CSS rule (actually, a compound selector) and retain all the properties that were oringally set for that rule. I'd like to simply change a name of a rule to better fit my layout and naming scheme. Better planning up front would have eliminated this problem, but I goofed on the naming conventions. By renaming some of the rules, I can make my whole layout easier to understand and work with.
I tried the "edit selector," function, but when I did that, it deleted all the properties in that rule. For example, I had a container element that had float, margins, padding and text properties in it. When I changed the name using the "edit selector" function, the element no longer floated, the width had changed, etc.
Any help appreciated.

Grab the original name from your CSS file.
Do a CTRL+F to do a search and change Find In: to be Entire Current Local Site.
Type the original name into the Find: field
Type the new name into the Replace: field
Do a Replace All and let Dreamweaver fix all of those for you.
Rename the rule in your CSS file.
Probably seems a bit basic but it's very thorough (DW won't miss anything) and you can see all the files it did a replace inside of in the Search Results panel so if there is one that looks out of place you can look into.
Of course, be careful what you search on. If the CSS rule you want to change is called RedText, you're planning on changing it to text-red and you have another rule called BigRedText then you might end up with a bunch of Bigtext-red throughout your pages. If you can do it this way, I'd suggest using class="RedText" for your search value so that you don't have any of the forementioned whoopsies.
Hope that helps.

Similar Messages

Applying exiting CSS rules to new HTML item

It is not possible to apply an existing CSS rule to a new HTML item in DW 2014. For example, I created a new H1 element but I can't apply that to an existing CSS rule so I have to duplicate an existing CSS rule, rename it and then apply the H1 element to that new CSS element. A real hassle! This should be a simple process that I was easliy able to achieve in previous versions of Dreamweaver. Does anybody know if the next version of DW will let you to link new HTML elements to existing CSS rules? Or is this a design bug that will be fixed soon?

You don't understand the power of re-usable CSS classes yet.
As an example, let's say I want my heading to be red and centered. By using the multiple classes feature in DW's properties panel (See screenshot below), I can select both classes from the drop-list in my properties panel and use as often as desired in my documents. IDs however are unique and limited to one time usage per page.
CSS
.red {color:red}
.center {text-align:center}
HTML
<h1 class="red center">This is red and centered</h1>
Nancy O.

How Do You Add Multiple CSS Rules to Text?

Hi everyone, I have these css rules in my css styles window they are all assigned to some text in a cell on my page.
.Def14grey4 <body>
.def14grey4 a:link <a>
.def14grey4 a:visited <a>
.def14grey4 a:hover <a>
.def14grey4 a:active <a>
.def14grey4 a:focus <a>
How do you add (all of) these styles to the text in the first place, I know how to add the first one (.Def14grey4), you select the text in the cell and choose the rule from the drop-down menu in the css panel, but how do you add the other ones to some text as well, so that it can have the same link properties.
Basically I have some more text elsewhere on the page and want to assign these rules to that as well.
thanks Gareth

You would want to change your order as shown here -
.Def14grey4 <body>
.def14grey4 a:link <a>
.def14grey4 a:visited <a>
.def14grey4 a:hover, .def14grey4 a:focus <a>
.def14grey4 a:active <a>
That way, the hover and the focus states are equivalent.
How do you add (all of) these styles to the text in the first place, I know how to add the first one
You don't really. The 4 bottom selectors say -
"find an element with a class of 'def14grey4', and style any link inside that element this way"
So, <span class="def14grey4"><a href="whatever.html">Whatever</a></span> would get the pseudo-class styles, as would any of the following -
<span class="def14grey4"><a href="whatever.html">Whatever</a></span>
<td class="def14grey4"><a href="whatever.html">Whatever</a></td>
<p class="def14grey4"><a href="whatever.html">Whatever</a></p>
<body class="def14grey4"><a href="whatever.html">Whatever</a></body>
<div class="def14grey4"><a href="whatever.html">Whatever</a></div>
<strong class="def14grey4"><a href="whatever.html">Whatever</a></strong>
and so on. These examples assume that there isn't some other more specific rule that would apply to the same links. You need to study up on the CSS cascade and specificity....

How do you save css rules created in web inspector?

Being a web developer, I usually use Firebug on Firefox to test CSS when I'm developing a website. Ever since I got my new iMac, I've really grown to love Safari. I like the Web Inspector but I cannot seem to find a way to copy any of the CSS rules I create for testing. Is there an effective way to create CSS rules and copy the whole CSS rule (property + declarations) so I can paste them somewhere else?

You can import and replace any styles you want from other documents, but templates are templates. That is what they are for.
Styles are document specific for a reason. Imagine the fun and games if the styles in one document changed the behavior of same name style in other unopened documents. You would be chasing your tail forever.
Someone would send you a file and it would inexplicably change layout and appearance just because your styles didn't match.
Peter

Can't figure out how to rename css style in mx

Hello,
I can't figure out how to rename css style in mx. I have the
style selected in the proprety inspector. Is there supposed to be a
rename option at the bottom of the same dropdown box? There is
option to edit style and a few others in same dropdown box... but
no rename option. Please be specific... I have looked it up on the
internet... but still cant find the option.
Thanks,
PoJ

Do a Find and Replace to find name1 and replace with name2.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"computerpain" <[email protected]> wrote in
message
news:ed43p3$m9h$[email protected]..
> Hello,
> I can't figure out how to rename css style in mx. I have
the style
> selected
> in the proprety inspector. Is there supposed to be a
rename option at the
> bottom of the same dropdown box? There is option to edit
style and a few
> others in same dropdown box... but no rename option.
Please be
> specific... I
> have looked it up on the internet... but still cant find
the option.
>
> Thanks,
> PoJ
>

How can I view/edit the CSS rules that apply to an Order Registration Layout ?

*Note: I am new to web design and I did not create the site that I am working on. I am also very VERY clumsy with CSS at the moment *
I have just begun using Dreamweaver to work on a Business Catalyst site. I am attempting to edit the CSS of the layout for the Order Registration Form. The CSS is applied from the site-wide template that is assigned to the Order Registration Layout. When viewing the layout in Dreamweaver, it does not display any CSS info for the page. However, when viewing the live page for the Order Registration, it is clear that CSS is adversely affecting the layout.
Is there a way to link the css rules from the site-wide template to the Order Registration Layout? Or should I just add a new CSS rule directly to the Order Registration Layout (possibly overriding the site-wide template's CSS)?
Thanks!
Nate

I've used Firebug as well as the Webkit developer tools in Chrome and Safari which have surpassed Firebug in my opinion. But they all suffer from the fact that the changes you make in them have to later be applied to your code which means you have to take the extra steps of trying to remember what all changes you made in Firebug and copying and pasting them back into your files. Whereas in Dreamweaver you can Inspect, make changes directly to the code in your file, and you're done. Not happy with the last few changes? Undo. Want to start completely over? File > Revert.
Dreamweaver has excellent tools for determining what css is being applied to an element and by what means. And it's a more streamlined and direct workflow where you work directly in your code. I still use Firebug and the others from time to time though. But only for very basic "spur of the moment" testing. And usually only when I don't have immediate access to the raw files.

Developer: web inspector how do I add new css rules

I have been using web inspector for quite some time. It was a regular part of my development workflow, however, I was surprised when the safari team totally re-vamped the tool in safari 6.
You use to be able to click on the menu in the styling section of the tool bar and click "Add new rule". Now it appears you can no longer add css rules in this way. Which is a bummer because I used this feature all the time.
You also, use to be able to double click for a new rule when in the actual stylesheet under the Resources tab. I can no longer do this either. For the life of me, I can't figure out why the safari team would get rid of these valuable options.
Someone please help.
These options must still exist, as they are invaluable when working with css in the browser. Does anyone know how to add a new style rule. I read the documentation and I don't see anything about removing this functionality.
The only way I can find to add a new rule, is through the snippet bar, which is kind of a pain as you have to add the <style> tags every time you add a new rule.
Also, I can't figure out how to view and elements pseudo classes (i.e. :hover , :checked, etc).
I have to say, it is a little frustrating as I don't clearly see the benefits of their redesign and it just seems harder to use. It kind of feels like they reskinned and rearranged things just to make it look new and didn't really think through how developers use this tool.
Does anyone else feel this way with the new safari?
Maybe I will see the light after a couple of days. I hope so because I am partial to using safari.

Build your FGLayout prototype page so it works well in all screen sizes (mobile first, then tablet, finally desktop). To create your home page, SaveAs index.html. Then SaveAs page2.html, replace content. Repeat for other site pages.
Nancy O.

Is there a better way to do this? CSS rules/Background image/tables

Hi,
I am designing a site and I have used a table for the banner. Everytime a different page is displayed, the banner image changes. I have created .html pages, and I have created a lot of css rules to change the background image. I think there must be a more efficiant way to do this?
http://www.taffyproductions.com/test/
ALSO... I need to figure out how to make the links (hover/active states) work on all the pages... I figured it out on the index page, but I'm sure there is a better css rule?

Put a div in the head section? Surely you jest!
But you do hint at the easy solution - just have an embedded stylesheet in the head of each page that changed the background image only on that page. No need for any other complexities.
In other words on page1, change this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
</head>
to this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table#banner { background-image:url(images/banner1.jpg); }
</style>
</head>
and on page2 change it to this -
<link href="outpost.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table#banner { background-image:url(images/banner2.jpg); }
</style>
</head>
etc.

On Dreamweaver CC how do I get to the css rule definition box?

On the other Dreamweavers when I wanted to edit a css, I selected the css and clicked on the pencil icon to open the css rule definition box.
The only way I find to get acess to the css rule definition box on the new CC is when I am creating a new div and then there is a option for a new style and it opens the box.
My question is how do I get to the box once the rule is created? the pencil icon is not there anymore.
Not good breaking workflows Adobe, some folks have work in progress...
Please help, thanks.

Nancy O. wrote:
I can't remember the last time I used DW's CSS panels. If you know CSS, why not use code view? DW's Code Hinting is very good & it's much quicker to edit code directly in the style sheet than it is in CSS panels.
Nancy O.
That depends a bit on the situation. For example, in Netbeans I use the live connection with Chrome (embedded view or not) and I can then select an item in the live view in Chrome, which opens the css properties panes. These are quite similar to DW.
By changing the values in the css properties pane the changes in values are automatically saved in the css file, and visually updated in realtime in Chrome.
It can be very handy to quickly change the position or margin/padding/size of an element this way without having to switch back and forth to your css. Bit similar to the inspect element pane in FF and Chrome, and the changes are immediately saved.
When I still used DW I used it in the same manner for quick visual changes - and no reason to rummage through my css code.
In short, those css inspector panes can work quite efficiently when you need to polish the css code.
Granted, I would never use it while working on the main css code - but for slight and quick changes it can be a very handy feature.

DW CS3: Template & CSS Rules problems

Dreamweaver CS3 Templates and CSS Rules.
I've built a basic html page with a header, navigation links and main content area, then saved this as a template with the content area as the edit region.
When I create new html pages from this template I want to insert Divs in the edit region for each new page, which I can successfully do, but for some reason Dreamweaver is not allowing me to create new CSS Rules for each new Div? So I'm not able to control position, text layout, colours etc for the new content. So my question is how do I do this?
I got around this with the current website by creating the template with virtually all of the content for the entire website firstly, then deleting as necessary for each page, which I know is the wrong way to build html site pages from a template!
I wonder if someone could please point me in the right direction to get me back on track? Any pointers would be very much appreciated.
Thanks in advance.

Yes, there is a meta tag at the start of the CSS rules. Here's a copy and paste of the code generated in DW CS3. Template was created from a html doc...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

Dw does not recognize css rules.

As all know when a CSS file opens in Dw in the left side of the window(in the CODER view) we can find the CSS styles pane where the CSS properties are listed.
When i click to css rule code segment to the open document, automatically, the pane in the left, demonstrates the relevant properties.
Lately, this does not happen in a specific CSS document i am working on. It works fine in other documents but in a specific one, this feature does not work-except in very few rules, rules relative to the body tag for instance.
Why that?
What might be wrong with other rules and their properties are not demonstrated in the CSS pane?
Any ides?
Another strange thing is the fact that when i click the all button in the CSS pane, only 6 rules appear(in the tree structure) despite the fact that the document is full of rules.
As a result it is only these 6 rules that their properties are listed in the CSS pane when I click the corresponding code segment in the main editor window.

<Lately, this does not happen in a specific CSS document i am working on...>
Validate your code and fix reported errors (excluding Spry hacks for legacy browsers).
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Export css rules to an external style sheet

Hi
For some reason, when i try and right click on my selected styles to move them into a new external style sheet the option to move css rules isn't in bold so i can't perform the task. Its the same when i try and select move css rules from the format tab in my toolbar. Has anyone come across this before or know another way around it. I also seem to get different options appear on my right click depending on what view I am in, is this normal?
Thanks
Ellen

Why don't you manually move your embedded CSS code into a new CSS file (in code view)?
Then link your HTML pages to your external style sheet.
Dreamweaver, Linking HTML to External Style Sheets
Nancy O.

How do I turn-off the CSS rule dialog?

I would like to know how to turn-off the CSS rule dialog.
I support a user who has been using DreamWeaver for years and was recently forced to upgrade to the new version. None of the hundreds of files in the site he maintains use CSS. While I recognize it is a "better" and "more efficient" way to do things --- IF you're a sofware engineer -- it is not even close to being worth the cost to revise the entire site and retrain this user.
So, how can i turn off, not just the pop-up, but how I can tell DW to just go ahead and do it the old-fashioned, embedded in the HTML way of doing things?
All the user wants to do is change the color of some keywords, css is overkill when that's all he's doing.
We'd go back to the previous version except the office was forced onto Vista and the older version won't run.

ADDING FONT TAGS:
By David Powers from the help doc:
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7ce ba.html
You won't see anywhere to enter such information in the HTML Property inspector. Dreamweaver CS4 does not support <font> tags, except in Code view. The W3C deprecated <font> tags ten years ago, so CS4 decided to get rid of them from the main user interface.
If you want to add styles to a short selection of text, you have two options:
1. Create embedded styles in the <head> of the page.
2. Create inline styles.
Both are done using the Property inspector in CSS mode (click the CSS button on the left). Select the text you want to style. How and where the style is created depends on what you select in the Targeted Rule field.
If you select <New CSS Rule>, you can then select the font, size, or colour in the Property inspector. As soon as you choose one of these, you will be prompted to choose a class name, and the location of the new style. To embed the style in the <head> of the page, select "This document only".
The name of the class will appear in the Targeted Rule field, and you can add other values to it.
If you select <New Inline Style> in the Targeted Rule field, you can apply any of the properties in the Property inspector. This wraps your text selection with a <span> tag that contains the CSS properties as an inline style, e.g., <span style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 24px;">Styled text</span>.
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7ce ba.html
Note: If you select text in Code view, you can apply font tags by selecting Format > Font from the main menu. This works only in Code view; selecting Format > Font in Design view launches the New CSS Rule dialog box.
http://www.adobe.com/devnet/dreamweaver/articles/css_best_practices_03.html

Is there a way to find out which CSS rules are being used by the different html files?

Is there a way in Dreamweaver CS3 to find out which CSS rules are being used by the different html files, sitewide?
Thanks - Dave

Firefox add-on "Web Developer Toolbar" is a must have. Information > Display Div & Class details.
https://addons.mozilla.org/en-US/firefox/addon/60
Another handy Firefox Add-on to add to your tool chest is called "Dust-Me Selectors."
http://www.sitepoint.com/dustmeselectors/
"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.
You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere."
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Is there a way to remove unused CSS rules

Can I scan my style sheets to remove unwanted rules? As I
develop a site and fiddle with my CSS I realise there are a few
bits and pieces that become redundant. Can DW find them for me and
remove them? In my defence, I try hard not to write sloppy code but
it's a consequence of riding the learning curve!
Thanks
Martin

>In my defence, I try hard
> not to write sloppy code but it's a consequence of
riding the learning
> curve!
I doubt you need a defense (I'm American :-)). I suspect most
if not all
here have a few unused CSS rules floating around.
Walt
"martcol" <[email protected]> wrote in
message
news:gmsh0v$guk$[email protected]..
> Can I scan my style sheets to remove unwanted rules? As
I develop a site
> and
> fiddle with my CSS I realise there are a few bits and
pieces that become
> redundant. Can DW find them for me and remove them? In
my defence, I try
> hard
> not to write sloppy code but it's a consequence of
riding the learning
> curve!
>
> Thanks
>
> Martin
>

Rename CSS rule

Similar Messages

Maybe you are looking for