Should I convert my inline css to external?

I was told my site would be cleaner and easier for google to find if I changed my css styles to external.  All my pages are a little different, so I was also told I would have to do it for every page.  What is the best way to do this?  I knew very little about css when I created the site, sorry.
Do I select everything from <style to style> right click and select  Convert inline CSS to rule.  That option is greyed out.  Do I select new rule?
The site is www.macrophotographer.net  I am a not a professional web designer so go easy on me.

I have had a look at source code for your home page, your styles are embedded in two groups between your pages head tags, so it will be easy to externalise the css.  In code view if you put your cursor in one of the styles you wish to move and then click on the 'Move or convert css' button or go to format > css styles > move css rules ... you can move the styles one by one into an external stylesheet.
The other and what I think will be the quicker way for you will be to open your webpage then go to File > New > Blank Page > CSS > Create, this will create a new empty stylesheet already with the encoding set.  With this still open switch tabs back to your webpage and select all the code between the <style type="text/css"> and </style> cut it and then switch tabs back to the stylesheet and paste. Save the stylesheet, then switch tabs back to your webpage, in code view you need to enter the following line before the  </head> tag
<link href="/nameofstylesheet.css" rel="stylesheet" type="text/css" />
Richard

Similar Messages

  • Convert header CSS TO inline CSS

    I know this seems backward but from what I understand html
    emails often do not correctly read CSS that is in the header, and
    will only read inline CSS. As the html page I have already has the
    CSS in the header, is there an extension or ANY OTHER WAY to easily
    parse it out and insert that CSS inline??
    thanks in advance!
    -ML

    You don't need to do this. Just move your stylesheet below
    the <body> tag
    before sending the email.
    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
    ==================
    "Mat Lebowitz" <[email protected]> wrote in
    message
    news:ebibid$9s8$[email protected]..
    > still no responses? come on you pundits, i know there's
    an extension or a
    > technique to do this, isnt' there??

  • Should i put my table in my external style sheet?

    Should i put my table in my external style sheet? if so how do i do this?
    i'm having serious problems trying to stop my menu bar and header to stop jumping around when a switch pages. I realised i needed to create an external style sheet. however, when i extracted the ccs styles from my one of my pages (my homepage), there is only styles for my spry menu bar, nothing else. - however this doesnt stop my menu bar from moving around. all of my pages are use tables. so my menu bar and header are both 'td' rather than in a div or wrapper.
    it seems as though nothing i try will stop my items from moving around. they are all exactly the same width and height in html and the same in css. I know about attaching style sheets, but i just cant seem to understand how to get everything aligned properly. I want my external style sheet to have my header at the top and centre, and my menu bar underneath and centre. How do i do this using a table? do i put the table into the external style sheet so that my table measurements etc are the same for each page? + how do i do this? Does anything else other than positions, colours, fonts etc go into my external style sheet? cos im aware that i use the html for the things i want to look different and every page, and the css for the things that i want to look the same. so which stuff goes in which? im getting really confused now, does my header and menu bar need to go in my external style as well as my html? :S
    everything just seems to have gone horribly wrong, ive tried so many things, but everything i try simply has no effect. blahhh :/

    and this is the external style sheet, which i extracted from my home page (the top code). what do i need to add to this?
    @charset "utf-8";
    body {
                        margin: 0px;
              border-left-style: none;
              border-left-color: #CCC;
              border-bottom-color: #FFF;
              border-bottom-width: 25px;
              border-bottom-style: solid;
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              cursor: default;
              width: 640px;
              margin-bottom: 0;
              margin-left: auto;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
              border-top-color: #000;
              border-right-color: #000;
              border-bottom-color: #000;
              border-left-color: #000;
              margin-right: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
              z-index: 1000;
    #header {
              clip: rect(auto,auto,auto,auto);
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              position: relative;
              text-align: left;
              cursor: pointer;
              width: 8em;
              float: left;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              z-index: 1020;
              cursor: default;
              width: 278px;
              position: absolute;
              left: -1000em;
              height: 48px;
              top: 55px;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
              border: 1px solid #CCC;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
              left: 1px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
              width: 8.7em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
              position: absolute;
              margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
              left: -269px;
              top: 5px;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
              display: block;
              cursor: pointer;
              background-color: #FFF;
              padding: 0.5em 0.75em;
              color: #000;
              text-decoration: none;
              font-family: Pristina;
              font-size: 21px;
              text-align: center;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
              background-color: #FFF;
              color: #999;
              font-family: Pristina;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
              background-color: #FFF;
              color: #999;
              font-family: Pristina;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
              background-image: url(SpryAssets/SpryMenuBarDown.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
              background-image: url(SpryAssets/SpryMenuBarRight.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
              font-size: 21px;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
              background-image: url(SpryAssets/SpryMenuBarDownHover.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
              font-size: 21px;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
              background-image: url(SpryAssets/SpryMenuBarRightHover.gif);
              background-repeat: no-repeat;
              background-position: 95% 50%;
              font-size: 21px;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
              position: absolute;
              z-index: 1010;
              filter:alpha(opacity:0.1);
              font-size: 21px;
              ul.MenuBarHorizontal li.MenuBarItemIE
              display: inline;
              f\loat: left;
              background: #FFF;
              font-size: 21px;
    body {
              margin: 0px;
              border-left-style: none;
              border-left-color: #CCC;
              border-bottom-color: #FFF;
              border-bottom-width: 25px;
              border-bottom-style: solid;

  • When inserting image how do I force inline CSS not image tags?

    When I insert an image to my page layout it always uses html width= and height= tags
    e.g. <img src="images/wordpress.jpg" width="125" height="112">
    This is driving me nuts
    (I thought these tags were pretty old fashioned for current doctypes. Why does dreamweaver continue to use them?)
    I want inserted images to be shown with inline CSS
    e.g.  <img src="images/wordpress.jpg" style="width:125px; height:112px;">
    I can then more easily add more CSS like padding, floats etc as needed.
    Any ideas how I set this up as a default or quickly convert?
    (I dont really want to add lots of unique image classes to a style sheet)
    many thanks!
    Dreamweaver CS6

    Image height & width values are not deprecated.  Unless you're building a responsive web site, it is usually better to have these attributes stated in the HTML.
    But when I don't want them, I do the following:
    Insert > Image > browse to file...
    On the properties panel, I delete the width and height values, hit Enter.
    Nancy O.

  • Function Module required to convert the date coming from external system

    Hi Friends,
       I need a Function Module that would convert the incoming date from external sytem in format YYYYMMDD to the SAP system in DDMMYYYY. The External system data type for the date is Numberic. Please suggest any FM if you know.I found out many in SAP but didn't find for this requirement

    Wait a minute.  I am definetely missing something here.  You want to convert from an external format YYYYMMDD to SAP's internal format?  SAP's internal format is YYYYMMDD.
    All you should have to do is move you external date directly to your internal date.
    data: date1(8) type c value '20051225'. "Format YYYYMMDD
    data: date2 type sy-datum. "Format (YYYYMMDD)
    write: / date2.
    When you write out date2 it will be in whatever format your user profile has. 
    If you want to force the date format independent of your user profile settings during the write statement:
    write: / date2 DDMMYY.
    Message was edited by: Thomas Jung

  • HTML Email - Inline CSS

    Hello,
    My inline CSS doesnt seem to be working in all eamil clients.  Can you tell me what I have wrong with this:
    <td height="50" style="font-family:Arial, Helvetica, sans-serif, 'Century Gothic'; font-size: 30px; color:#FFFFFF; line-height:80%; text-align:left; font-weight:bold; font-style:italic;">SAMPLE TEXT</td>

    Do as Murray says and remove that part of the style, you don't need it. Sometimes the extra ' will make it quirky. I hope the body of the email is a dark color since your using white text color (#FFFFFF). It should render in most if not all emails.
    <td height="50" style="font-family:Arial, Helvetica, sans-serif; font-size: 30px; color:#FFFFFF; line-height:80%; text-align:left; font-weight:bold; font-style:italic;">SAMPLE TEXT</td>
    You could try something like this:
    <td height="50"><p style="font-family:Arial, Helvetica, sans-serif, 'Century Gothic'; font-size: 30px; color:#FFFFFF; line-height:80%; text-align:left; font-weight:bold; font-style:italic;">SAMPLE TEXT</p></td>
    Jim

  • Email campaign - inline css - a:link, a:hover

    What do people do about setting the color of the a:link and a:hover when setting up a page for email distribution using inline css?
    From what I've read you can't declare inline styles for the above mentioned styles?
    Is it ok to put those in css <style></style> tags in the head section of the page and just let those email clients that can deal with it do so and forget those that can't, or is there a better alternative?
    Cheers
    Os

    pziecina wrote:
    Hi Os
    Don't know if this is related to your post regarding xara, but if the other person was using xara for emails then yes it is easier doing emails in xara than dreamweaver, (for the none html/css literate).
    Sort of, I'm just doing some experimenting before I commit myself. Don't won't to look like a dumb *** if I say I can and then I can't, lol.
    As to your question most emails use the default but I can see no problem in placing the alternative in a css style sheet.
    This article may be helpful, (check the external links at the end also) - http://groundwire.org/support/articles/css-and-email-newsletters.
    Ok, that's what I thought. I'll use inline css styling for pretty much everything I can to be on the safe side and just put css that can't be inserted inline in an embedded style sheet. I guess its no big deal if a few email client don't like it.
    I'll have  a read of the link you provided. Thanks for your respnse

  • Why are my inline css styles for BC tags being ignored and just default to blue underlines?

    I am familiar with inline css styling for email campaigns and have always customised links in emails with the code I sent:
    however Im puzzled why this code doesn't work with BC tags {tag_viewinbrowser} and {tag_unsubscribe}, any help would
    be great as I think the default blue links look ugly.
    This is my code: <a href="" style="color:#78787c; text-decoration:underline;">{tag_viewinbrowser}</a>
    All other links I have styled appear as they should, its just BC tags where the style seems to be ignored?

    You can put <style>span#unsubscribe a{color:red;}</style> code in your newsletter html that can address the DOM that is specific to those links.  BC is adding it's own anchor tags for those links so your style isn't touching it.  Rewrite your tag to look like this.  <span id="unsubscribe">{tag_unsubscribe}</span>   .  That with the style code will solve your problem.

  • Inline Text Boxes getting converted to inline tags on text reflow in parent

    Hi,
    We extract text from a text box in a Indesign CS3 document. The text box can have inline text boxes. The text of the inline boxes is extracted as well.
    The text extracted from all the text frames is processed in an xml and processed. After processing, it is reflown into the boxes.
    When we try to import the text in the parent text frame having inline boxes, the inline text boxes are converted to inline tags.
    Can we keep the inline text boxes as it is rather than they getting converted to the inline tags.
    Thanks.

    Hello Harbs,
    Thanks for the reply. By recreating the boxes, do you mean to say that we draw the boxes again and place them in the main text frame as an inline box.
    But the problem again is that if we attach the xml element of the parent element to the text frame, it will flow all the contents including the inline boxes which will be again convert them to inline tags.
    Or is it that we flow the parent text and then look for all the inline tags and draw boxes in place of these tags. But the question here is how do we differentiate between an genuine inline tag and the one which is converted from an inline box.
    Can you help in describing the solution in your mind.
    Thanks

  • I'm a bit confused. Since my original camera format was 720/60p, and I converted the footage to Pro Res422 in order to edit in Final Cut Pro 7, should I convert back to a higher quality format before sending the file to DVD Studio Pro?

    I'm a bit confused. Since my original camera format was 720/60p, and I converted the footage to Pro Res422 in order to edit in Final Cut Pro 7, should I convert back to a higher quality format before sending the file to DVD Studio Pro? If so, which Compressor codec is best to use in order to preserve the original 720/60p?   How do I maintain the highest quality?

    No...ProRes is a high quality format. Finishing format.  Many TV networks take that as a final deliverable. 
    BUT...DVDs aren't high definition...they are SD.  You cannot make a 720p60 DVD with DVD Studio Pro.  Any DVD you make will be SD...720x480.  The only HD DVD format out there is BluRay, and for that you need a BluRay burner.
    As for making a high quality DVD...using the BEST QUALITY settings in Compressor will work:
    #42 - Quick and dirty way to author a DVD
    Shane's Stock Answer #42 - David Roth Weiss' Secret Quick and Dirty Way to Author a DVD:
    The absolute simplest way to make a DVD using FCP and DVDSP is as follows:
    1. Export a QT movie, either a reference file or self contained using current settings.
    2. Open DVDSP, select the "graphical" tab and you will see two little monitors, one blue, one green.
    3. Select the left blue one and hit delete.
    4. Now, select the green one, right click on it and select the top option "first play".
    5. Now drag your QT from the browser and drop it on top of the green monitor.
    6. Now, for a DVD from an HD source, look to the right side and select the "general tab" in the track editor, and see the Display Mode, and select "16:9 pan-scan."
    7. Hit the little black and yellow burn icon at the top of the page and put a a DVD in when prompted. DVDSP will encode and burn your new DVD.
    THATS ALL!!!
    NOW...if you want a GOOD LOOKING DVD, instead of taking your REF movie into DVD SP, instead take it into Compressor and choose the BEST QUALITY ENCODE (2 pass VBR) that matches your show timing.  Then take THAT result into DVD SP and follow the rest of the steps.  Except you can choose "16:9 LETTERBOX" instead of PAN & SCAN if you want to see the entire image.

  • HT5103 I downloaded a trial version of Final Cut Pro X directly from the Apple website but when i try to open the file, a message is displayed saying 'legacy file should be converted' what can I do to fix it?

    I downloaded a trial version of Final Cut Pro X directly from the Apple website but when i try to open the file, a message is displayed saying 'legacy file should be converted' what can I do to fix it?

    Where did you download it from exactly? URL.
    Exactly what computer is this.

  • Should I convert my MTS (AVCHD) file to another file type before editing with elements 10

    I know premiere elements 10 has project settings for working with AVCHD footage but after doing a bit of reading about how AVCHD (MTS) files are a lot harder for your computer to work with I'm thinking it might be better to convert my raw video files to another video file type before editing with premiere elements 10.
    I have a reasonably good computer, but it's only a laptop with 361gb free memory, radeon graphics card, core i5 processor and 8GB ram.
    If I should convert these files first what file type should I convert them to without loosing too much video quality and where can I find a program to convert them.
    Many thanks
    Sally

    I have a reasonably good computer, but it's only a laptop with 361gb free memory, radeon graphics card, core i5 processor and 8GB ram.
    My granddaughters and I have been using one of those to edit videos taken in (two) Sony and (one) Panasonic cameras.  The computer is a mid grade Toshiba laptop that is about three years old.  The cameras were purchased after the computer.  Our computer does not have a graphics card, but the other specs are about the same. 
    I know premiere elements 10 has project settings for working with AVCHD footage but after doing a bit of reading about how AVCHD (MTS) files are a lot harder for your computer to work with I'm thinking it might be better to convert my raw video files to another video file type before editing with premiere elements 10.
    I didn't read that until after we had made videos.  The issue is the project preset that is set when you open a new project. If you guess wrong, PrE10 tells you so when you slide the first clip to the timeline. 
    There is confusion about AVCHD because there is a 1.0 and a 2.0.  The "high" setting for many cameras the last couple of years was 1080p60.  That did not become part of AVCHD until last July.  Now it is and is called 2.0.  PrE10 specs include AVCHD 1.0, so the 1080p60 is "officially" unsupported.   I didn't know that, so I tried a few presets when my files were 1080p60.  A preset of 720p60 worked best. 
    The "work harder" part primarily has to do with the preview window during editing.  If it is not going smoothly there will probably be a red line above the clip.  Pressing "Enter", getting a cup of coffee and patience will make the red line go away and the preview will be smoother.  The relationship between project presets and final output is a mystery.  My experience is that the presets have only to do with real time preview and little to do with output.  Output requires an entire re-encoding for the chosen viewing platform.  PrE10 seems to ignore the project presets, uses all the markers set in editing and builds the final products from scratch. 
    If I should convert these files first what file type should I convert them to without loosing too much video quality and where can I find a program to convert them.
    Steve and Bill invest a lot of time here helping people like you and me.  But, my experience is that they are wrong.  I see no need to convert the files.  Conversion always has the risk of loosing a little picture quality.  PrE10 seems to handle AVCHD fine.  Let it do the final render using the actual source clips.
    Sally, consider upgrading to version 11 where AVCHD 2.0 and 1080p60 is included.  I have.  Processing is a little smother.
    Bill
    PS:  Please, with all due respect to Bill and Steve who work hard here, I disagree based only on experience with 3 cameras and one computer.  User experience varies!

  • HT1352 Open Firmware password can't be opened - "legacy image should be converted"

    Hi,
    I have downloaded Open Firmware Password.dmg at the link provided in the article. Anytime I try to open it, a message comes up: "The following disk images couldn't be opened: Open Firmware Password.dmg, Reason: legacy image should be converted." What does this mean and what am I supposed to do? Can anybody help me please? Thanks!
    Sorry, problem's been solved. Found this discussion https://discussions.apple.com/thread/3158789?start=0&tstart=0.
    Message was edited by: Tony McAre

    I selected Recovery Partition and then  Disk Utility after pressing option at startup. I went to that Mac OS X Boot thing on the list with the hard drives are (like the screen shot in this discussion https://discussions.apple.com/message/18168530#18168530), but I was not able to take any actions. All Buttons were shielded out. It would be very nice if you could describe what to do once more in detail, so that I might understand it better. Thank you!!

  • What Framerate Should I Convert to?

    I shot a feature with the Canon 5D Mark 2. Most of it was shot before the firmware update, so most of the footage is at 30 fps, but some is at 29.97. The film will eventually be converted to 24 fps for the film look. The release will be DVD, and possibly a film transfer. Should I convert to 24 fps now, or should I convert everything to 29.97, or to 30? Should it be 23.976? Should I wait until after I edit to convert to 24? Lost, would appreciate some advice.

    OK, here's why you shouldn't edit at 24 (=23.98).
    You can change the 30fps footage to 29.97 by simply conforming the frame rate of the clip, as others have pointed out--in other words, slowing it down by .1%. Each frame will remain exactly as it was recorded, it will just be played for 1/29.97 of a second instead of 1/30.
    As others have pointed out, this will require you to slow down any synched audio by .1% as well. But there will be no quality hit to your footage. Yes, it will have to be compressed to ProRes, but that's it.
    However, if you use Compressor to change the frame rate to 23.98, it can't simply drop one out of every five frames, and it can't just play each frame for 1/23.98 of a second, because that will be noticeable. It will have to invent frames that don't currently exist, and this will involve a significant quality hit. Things may look soft; the motion may look funky.
    I guess what I'm saying is that, let's be honest, doing a film transfer from 30p is not going to look good. Doing a film transfer from video is already a big quality hit, and changing the frame rate is going to make that worse. If you really wanted to keep 35mm as a viable option, you should have shot film or at least an HD format that allows for 24p.
    That's not to say you don't have lots of distribution options. But you shouldn't compromise the quality of your 30p master, which could be used for TV or DVD distribution, in favor of a potential 35mm transfer that (a) probably won't happen and (b) will not look good if it does.

  • Yahoo! Messenger 3.0.1 - Legacy Image Should Be Converted

    Hello, I am running into issues when trying to install the Yahoo! Messenger client on my Early 2011 MacBook Pro running Lion 10.7.2.
    When I click on the .dmg file it tells me that "Legacy Image Should Be Converted". I tried this method: https://discussions.apple.com/thread/3158789?start=0&tstart=0 but that did not work for me.
    Anyone else have any suggestions?

    I selected Recovery Partition and then  Disk Utility after pressing option at startup. I went to that Mac OS X Boot thing on the list with the hard drives are (like the screen shot in this discussion https://discussions.apple.com/message/18168530#18168530), but I was not able to take any actions. All Buttons were shielded out. It would be very nice if you could describe what to do once more in detail, so that I might understand it better. Thank you!!

Maybe you are looking for