SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Removing embedded CSS?

    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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <link href="styles.css" rel="stylesheet" type="text/css" />
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    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.
    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
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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....

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Embedded styles are this
    Code:
    <head>
    <style>
    embedded{}</style>
    </head>
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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">

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Another Designer View Post
    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.
    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:

    Code HTML4Strict:
    <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:

    Code HTML4Strict:
    <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
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad you got it working .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •