CSS rules vs. page properties

Hello,
I have taken over a website which is already built. I'm very,
very new to all this, please bear with me.
I am trying to apply styles etc; I have a CSS sheet which I
like and incorporate in pages but it seems that some styles are
conflicting -between the CSS sheet, the page properties and even my
left menu.
As a result, when I load some pages on the website, they 1st
show a certain style (very briefly) then jumps to the "final"
style.
Which style tool supercedes the others and how can I control
them better?
Thank you,
Caroline

The style closest (in the code) to the element being styled
wins (in the
case of conflicts). Thus -
<style type="text/css">
body { color:red; }
</style>
</head>
<body>
<p style="color:blue;"><span
style="color:green;">This text is
green</span></p>
If you are gathering that all this code is important, you are
spot on. I
wouldn't want you working on any website without being fairly
comfortable in
the code. Meantime, these may help -
http://www.w3schools.com
http://www.projectseven.com/tutorials/css/uberlinks/index.htm
http://www.projectseven.com/tutorials/css/qtabs/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Cobejero" <[email protected]> wrote in
message
news:gqtm1k$b2g$[email protected]..
> Hello,
>
> I have taken over a website which is already built. I'm
very, very new to
> all
> this, please bear with me.
>
> I am trying to apply styles etc; I have a CSS sheet
which I like and
> incorporate in pages but it seems that some styles are
> conflicting -between the
> CSS sheet, the page properties and even my left menu.
> As a result, when I load some pages on the website, they
1st show a
> certain
> style (very briefly) then jumps to the "final" style.
>
> Which style tool supercedes the others and how can I
control them better?
> Thank you,
> Caroline
>

Similar Messages

Disabling a CSS rule in the Page Inspector deletes it

I have been using the Firefox Page Inspector lately to see how it compares to Firebug. I noticed that if you disable a CSS rule by unchecking the checkbox next to it, it is still shown in the inspector, so you can check the box again and reenable it. However, if I click some other element, and then come back to the previous one, I found that the CSS rule seems to have been deleted entirely i.e. there is no checkbox for me to check to reenable that rule.
This is a pretty major problem for me, as Firebug and Chrome's inspector both remember rules you have disabled and give you the options of reenabling them again later, even if you click a different element. Is it a problem with my particular installation of firefox, or is it just a bug with the inspector?

I've seen that too.<br />
What is happening that deleting and adding rules rules is the same as editing the style sheet via the style editor and changes that you make are actually edits in the style sheet file.<br />
I agree that it would be better to comment out rules so you could at least enable them by editing the file rather than removing the rule completely.

Page Properties Panel and CSS

In the Property Inspector I open the Page Properties dialog
box and expect to see within the category list : Appearance, Links,
Headings, Title/Encoding, and Tracing Image. All I see is
Appearance. Titel/Encoding and Tracing Image. Under Appearance
again I would expect to be able to select a page font, and it
attributes but it starts right off with background image and its
attrbute. Any ideas why the font info is missing?

Can you try again, please?
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
==================
"Marianne POST" <[email protected]> wrote in
message
news:evh6mb$nam$[email protected]..
> In the Property Inspector I open the Page Properties
dialog box and expect
> to
> see within the category list : Appearance, Links,
Headings,
> Title/Encoding, and
> Tracing Image. All I see is Appearance. Titel/Encoding
and Tracing Image.
> Under
> Appearance again I would expect to be able to select a
page font, and it
> attributes but it starts right off with background image
and its attrbute.
> Any
> ideas why the font info is missing?
>

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 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

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.

Need some help using CSS Rules and Positioning Image Place Holders

Evening all,
I need to get this done by tomorrow so some speedy help would be very much appreicated!
I'm doing a website for an IT company, and as you may/may not know, support for XP and Office 2003 is dropped tomorrow - they want a button in the header of their site which basically says 'click here for upgrade advice' and when you click on it you're taken to a page telling you the benefits of upgrading. They want it to look like the mock up below:
I've had a right old job even getting the button (it's in PNG format) to go above the BrownTech logo. I inserted a placeholder, linked it to the PNG file, and then I made a custom CSS rule/class called '.header_fltrt' to put the image in and position it in that place, directly above the BrownTech logo.
To get the upgrade button in the desired position, here are the 'Box' CSS properties I used for the .header_fltrt CSS rule.
It's worth noting that the dimensions for the header itself are 960x235px, and the BrownTech logo is the background image for the header class (and is 960x235 in dimensions).
The problem I am having is that when I view the page in Design Mode in Dreamweaver, it looks fine, but when I view it in Live View or in a web browser, it looks like this:
As you can see, the upgrade button is not even visible!
Furthermore, when I go back into design mode on Dw, when I click on the upgrade button, I don't get any placeholder properties like I do when I click on green logo in the top left (which by the way is just a link back to the index page).
I'm not sure why this is but I cannot find any way to resolve it. I've even tried putting the BrownTech logo on a transparent background thinking that the block white background may be covering the upgrade button, but that's not the case.
Sorry if I haven't explained it very clearly. Hopefully you can see my problem.
Any help in etting the upgrade button to preview in the correct place would be very much appreciated!

Try this in place of what you have now.
.header {
    background-color: #FFFFFF;
    min-height: 335px; /**adjust as needed**/
    width: 960px;
    background: url(../assets/banner2.png) no-repeat;
.header_fltrt {
/**no floats or positioning required**/
    width: 552px;
Nancy O.

Finding where css rules are used

I often find myself wanting to know where a particular css rule has been used across a site so that I can be confident that when I change the rule it won't mess up a page that I had forgotten I used it on. Is there anyway to do this?

I use comments in my css to tell me the structure of where all my properties are. So at a later date when I go back to change somethig I can scroll down and look to see what I have done before I make any changes.

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.

Css rule precedence?

I am looking at a website design which has already implemented some rules.
It has css rule
body #wrapper
which uses width 100%
and another
#wrapper
which uses width 960px
Now the body tag has already been called at the top....
Then we get the #wrapper tag.
The question is... which css rule does it call up or does it combine the two?

To expand on Murray's answer, learn the following specificity rules by heart:
tag selectors value: 1 point
class selectors value: 10 points (these include pseudo classes)
ID selectors value: 100 points
pseudo elements are ignored: 0 points
with descendant selectors, sibling selectors, etc. the values are added up based on the selectors components. Example: #logo a:hover adds up to 111 points.
source code order only matters when two conflicting selectors share the same specificity value.
with two conflicting styles that share equal specificity, the last one defined wins out. An inline style html attribute (style="") will overwrite properties you define for that tag in an external stylesheet when both are equal in specificity value.
the !important statement in css overwrites just about EVERYTHING. That is why inline css statements with !important suffixed should be avoided at all costs. Actually, the use of !important is generally a symptom of messy css code.
Official Star Wars Specificity Chart
As for the !important statement, regard it like a
Other generic CSS specifity related tips:
Since ID # selectors have such high specificity, a commonly recognized css coding workflow is to avoid them if you can. They are just too powerful for their own good! ;-)
The tend to lead to writing overqualified selectors in your code, and since only one ID # selector is allowed on the page, they also have a tendency to force the CSS coder into writing repetitive CSS code. DryCSS is a good thing (Don't Repeat Yourself).
Exceptions are, for example, targeting very specific elements through Javascript, forms, defining fragment identifiers (in-page bookmark links).
Ideally avoid having source code order dependent CSS rules. The page layout should not change when the CSS code order changes
Avoid over-qualified CSS selectors "just because you can". Instead of writing p.intro-text, just write .intro-text
Avoid inline css like the plague in general. There are exceptions to this rule, i.e., javascript is often used to add inline styles to control behaviour in the layout.
And never, ever write an inline !important statement such as
<p style="color:pink !important">I am pink and invincible</p>.
Which is akin to

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.

How do you make the font of a link different to the link font in Page Properties?

In my case, I've designated links as Century Gothic, 16, black in Page Properties. I want most of the links on my page to be like that. However, there is one link that I'd like to look different (I want it to be size 12). How would I change that without changing the other links?

Hi Bob,
If the link change is only going to be happening on a single page, you might
want to take a look at using an internal style sheet or using a inline style to
achieve the look you seek.
Below is a link to perhaps help you to understand the use of css.
http://www.w3schools.com/css/css_howto.asp
Leonard B

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.

CSS rules vs. page properties

Similar Messages

Maybe you are looking for