I am new to CSS. I have embedded CSS on a Dreamweaver page. I want to start over because there is a good way to do it.
How do I remove the embedded CSS? Any suggestions?
Is it a bad idea to use embedded and external CSS?
Thanks
You should shy away from embedded CSS because it doesn’t get to be cached by the browser which means slower loading times, and also because if you have a lot of pages with embedded CSS, you have to go to each page when you update it to update the CSS :).
Just create a styles.css page (or whatever you want it named) and place hte styles there (without the <style></style> tags) and then save it. Then call it in the HTML page 
<link href="styles.css" rel="stylesheet" type="text/css" />
It’s generally a bad idea to combine embedded and external CSS because they tend to squabble with one another. More pertinently, the embedded CSS overrides the external stylesheet elements, sometimes in ways you don’t want.
I imagine there are times where you need to embed specific CSS elements. It’s never happened to me in my relatively narrow range of design experiences, but that doesn’t mean much.
yeah, well everyone that has posted so far is right… what they mean is “let this be a lesson 2 you” , lol.
I assume what you mean by “embedded” is is inline, css with each tag you styled (BTW, this DEFEATS the purpose of a style). there is no real easy fix for this , but there is an “easier-than manual” alternative. Use the find replace feature in DW.
search for : “style=” , each time it gives you a match, click out of the search window , and highlight/and delete “style=‘whatever you put here’”, then find next untill you have hit every styled tag.
hope that helps
I tried to help a designer work with CSS via the Dw panels, and seriously I think it would have been much easier just to teach him how CSS works.
I use Dw but I create the stylesheet manually and link to it in the head of each page (as Ryan said above). Then I write all of the styles manually as I need them. That way, all of your styles are contained in one place. Learning how to do this through Design view in Dw is more trouble than it’s worth, IMHO.
@Another Designer Do you know much about how to write CSS styles by hand?
That’s only if the external stylesheet comes before the embedded. Don’t forget that embedded stylesheets and external stylesheets specificities are the same (assuming the actual selectors rules are the same)
I think I explained that poorly. If you have an embedded stylesheet before you call an external, and rules conflict, the external will win out because it was called after the embedded
Ok… It’s not my post, but i am lost in te terminology here…
what do you mean by “embedded”: that the styles are in the HEAD of the document, but part of it … as in directly with in the style tag OR that they are written inline in each tag…or what?
BTW,
DW has a CSS palette… it gives you the option to hand code, my favourite because it’s like using a text editor with all sorts of auto complete features, there is a visual pannel… attempts to show you cascades, and it lets you basically fill any value for each attribute. it’s handy, but it weak with writing CSS short cuts. Either way, once you have created rules, DW lets you use the inspector pallet to apply them to whatever element you mey have selected in the layout mode.
My preference, oddly enough, is still to work in the source mode. This is not because DW is not a good WYSIWG editor, but because my visual brain seems to shut down in code and my code barin shuts down in visual mode. 
go figure…
Embedded styles are this
<head>
<style>
embedded{}</style>
</head>
Really, if you think very carefully an “Embedded Stylesheet” is one that is ‘embedded’ within another document, such as in the STYLE element or “style” attribute of the HTML. Rather than using the LINK or similar (i.e. embedded; is a none-externally linked CSS file). That grammar is wonky but I think you’ll understand.
Personally if I were to use DW, I’d either just use the ‘code view’ or create a regular expression and either root out/strip the ‘style’ attributes (if inline) or replace them. Or even better if it was just simple CSS Header style information block; via the STYLE element just cut and paste it into a new CSS file and link it.
Similar in approach to some of the suggestions above.
Thanks for the feedback.
To answer a question, I am learning CSS… I’m not ever experienced with it.
I will try to use external style sheets. Should I have one external style sheets for all my pages or just make one for each page of the website?
Also, what is the best way of removing the embedded style sheet? I should re-read the posts, maybe you suggested it. I guess I should just delete all the styles, right?
dresden_phoenix good suggestion! That’s what I was thinking about doing. I will try that.
Should I have one external style sheets for all my pages or just make one for each page of the website?
You get all the benefits of external CSS files if you have one for all your pages, rather than one for each.
If you use <style> tags in the <head> then you aren’t getting the benefit of user caching, however when you’re starting out and only working with a single page it may be easier (one document to modify both HTML and CSS while learning).
But the most benefit comes from an external sheet linked to the HTML page with <link href=“thecssfile” type=“text/css” rel=“stylesheet”>
An external sheet is for all pages: you only need one sheet for all your pages, not a sheet for each page.
And what do you mean by your embedded style sheet. I sense there’s some confusing from your part:
this is how embedded css looks like on a page:
<html>
<head>
<title>Document Title</title>
<style TYPE="text/css">
<!--
body {
background: black;
color: #80c0c0 }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
a.case1:link { background: green }
p:first-line { margin-left: 25px }
-->
</style>
</head>
This is what’s called inline css:
<html>
<head>
<title>Document Title</title>
</head>
<body LINK="#ff8080" VLINK="#ff0000" ALINK="a05050" STYLE="background: #000000; color: #80c0c0">
<h1 ALIGN="center" STYLE="background: #000080; font: 36pt/40pt courier; font-variant: small-caps; border: thick dashed blue">Welcome to my home page!</h1>
<h6 STYLE="font-size: xx-small ! important; color: red ! important">All standard disclaimers apply. Your life depends on NOT copying this document in any way. This tape will
<a HREF="http://www.mysite.com/selfdestruct.html">self destruct</a> in 10 seconds...</h6>
</body>
</html>
See the difference?
If what you have is the first example (embedded) highlight the whole block from: <style TYPE=“text/css”> to –>
</style> and hit delete.
Then in the <head> section call your external css like so:
<link href=“path to your external css sheet” rel=“stylesheet” type=“text/css”>
If you use the second example (inline style) use the search function in DW as proposed by dresden_phoenix
Should I have one external style sheets for all my pages or just make one for each page of the website?
Ideally, you would have one external style sheet that links to all of the pages that you want to have a similar “look,” and this could very well be all of the pages in your site.
As an example (my apologies if this is too basic), let’s say you want all of the <h3> elements in your site to have a consistent size, position, weight, etc., and you want some of them to be dark blue with no background color (except the color of the page) but others to be white against a medium blue background strip extending across the page. In your external sheet you would create an h3 selector with the desired properties for the first case, and another selector (say h3.bg) that has the properties for the background strip version. Then in your html, any plain <h3> tag would take on the first set of properties, and those marked <h3 class=“bg”> would produce the other version. If at some point you decide to make the background strip a different shade of blue, you simply change the properties of that selector in your stylesheet and every <h3 class=“bg”> throughout your entire site takes on that new color.
Also, what is the best way of removing the embedded style sheet?
By “embedded” I assume you mean the style block contained between the <style> </style> tags in the head part of your page. You could simply cut-and-paste the entire style block (minus the <style> </style> tags) into your new stylesheet, give it whatever name you want (with a .css extension), and identify it in the <link href=…> line in your head element (see the response by RyanReese). When you save the modified html document, that effectively deletes the style block. You can leave the <style> </style> tags there in case you ever want to experiment with a new selector before transferring it to the external stylesheet.
Ned
Thanks for the feedback.
I went and deleted the css style on top of the page. Then I did a Find on the word “class”. The brought up all the styles. Then I deleted each CSS class in the code. It worked like a charm.
Thank you all.
Glad you got it working :).