New to CSS! Attach a Style sheet to exsisting website

Hi
Im self taught so I need help in a really basic style please!!
Ive got a website which Ive made my self, learning via youtube etc!! Im trying to figure out the css business! After ALOT of trial and error I think im slowly getting to grips but I could do with a little help!
Basically what I THINK Ive been doing is adding styles to a single page, and Ive found that I can now carry on the styles via copy and pasting the css code from the top of each page and pasting in the next page individually.. BUT I suspect the proper way of doing this would actually be to set up a separate style sheet which applies to the whole website, However, A) im not sure how to do this, and B) My site is working OK at the mo, so will this mess up the site if its added AFTER the site is already working?
Idiot proof answers please! x

Hi Every one,
I just want to say a really really really big thank you! with your help I have now got the basics of css! It seems so simple now, but when I first tried is was REALLY daunting and I couldnt figure it out, I just needed a little point in the right direction,!
I dont know if you get paid for the help for if you just to do it to be nice, but I just wanted to say a great big thanks to every one above! Your help and patience is very much appriciated!
THANK YOU!

Similar Messages

When I try to attach my css style sheet Dreamweaver gives me an error saying that my .css file appears to be an .html file and will not attach. How do I fix this so I can attach my style sheet?

I have built a css style sheet in Dreamweaver. When I try to attach it to my html website, it prompts me that my "css file appears to be an .html file and cannot attach". I've tried removing the /* */ as suggested by other forums, but this has not resolved the issue. I was using css style sheets with no problem 2 days ago. Now I get that error message. How do I fix this so I can attach my style sheet?

What does the code of the CSS file look like?
An external CSS file needs to be written in CSS only (no html tags like <html>, <body>, <head>, etc ).
It also must have a .css file extension, if yours has a .html extension it won't work.

Attaching style sheets to whole website?

My question about attaching CSS style sheets remains unanswered as far as globally having them appear in the panel for the whole site. David Powers did answer me about how to add them to new sheets, but I have a site I imported from GoLive and what it looks like if I'm correct is that I have to attach it to each page individually to have it appear in the panel each time. Of course once I've done that to each page they will 'stick', but what I would like is if I create a style sheet and save it to the root, that it appear for any page that exists in the root level. Am I wrong? Or is there a way to make it appear for all pages without individually attaching?
Thanks
bob

bobfharris wrote:
what I would like is if I create a style sheet and save it to the root, that it appear for any page that exists in the root level. Am I wrong? Or is there a way to make it appear for all pages without individually attaching?
Style sheets must be attached to each page. One simple way of adding the style sheet to existing pages is to to a Find and Replace operation.
Find:
</head>
Replace with:
<link href="styles/mystylesheet.css" rel="stylesheet" type="text/css" />
</head>
This uses a document-relative path to the stylesheet, so you would need to use a site-root relative link or do it separately for each level of the site hierarchy.

Css layout or style sheet not showing table layout

When I was working on my website I noticed that my tables don't show up in the browser of my site, they do however, show up in the dreamweaver design so I am wondering if when I was making changes somehow to the site if something in the css layout or style sheet got deleted. Could someone please take a look at it and please tell me what needs to be fixed, I am not at all familiar with css so I need all the help I can get on this here is the link. Thank you! http://angelcoilbartlett.com/index.html

In your HTML document in Code View, remove the following embedded CSS code. This is competing with external style sheet code and causing your site havoc. In the future, don't create any more new styles. You don't need them. Stick with the established styles set up by the original designer and you will have way fewer problems.
DELETE ALL OF THIS NONSENSE:
<style type="text/CSS>

</style>
If you want to continue working with web pages, you owe it to yourself and your employer to learn basic HTML and CSS so you can get yourself out of jam when things go wrong.
Start learning here: HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Attaching CCS Style sheet

When I go thru the process of attaching a style sheet to a line of text, it doesn't give me the preview option and doesn't attach the style to the text. I browse, select the saved CSS style that I created, but the preview button is grayed out. clicking Ok doesn't change anything. What am I doing wrong?

So if I want to have 3 or 4 different type styles in my web page, I put them all in one CSS file and link the one file to my document?
Yes. In fact, one external CSS file can contain ALL styles for your entire website.
Example CSS:
h1 {font-size: 1.5em; color: #993300; text-transform: uppercase}
h2 {font-size: 1.3em; color: #006633;}
h3 {font-size: 1.1em; color:#666;}
p {font-size: .90em; color: #000;}
.center {text-align:center}
.right {text-align:right}
Example HTML:
<h1>here is a main heading h1</h1>
<h2>here is a sub-heading h2</h2>
<h3>here is a sub-sub-heading h3</h3>
<p>here is normal paragraph text</p>
<p class="center">here is a centered paragraph</p>
This is a scaled down version of how it displays on screen.
Use the DW HTML and CSS properties inspectors to add styles to your text.
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

When I design with Muse and export as HTML Dreamweaver doesn't attach the style sheets. Any answers?

When I design with Muse and export as HTML Dreamweaver doesn't attach the style sheets when I open the files with Dreamweaver. Essentially when I design with Muse the files don't render the same with Dreamweaver. Is this a bug? Any work arounds?

Then you will have to install a local server and use live view. It's not that DW isn't rendering it or isn't attaching it, it's that Muse decided to use server-side processing to include it which is ok for a CMS practice when you are combining stylesheets for better caching, but it really isn't ideal for a single style sheet. This is a shortcoming of Muse and one of the reasons many professionals don't back the product at the moment. That and you can't actually buy Muse, so unless you are on a subscription you don't have it. It's trying to fill a void for those who don't want to invest in the professional design tools like Fireworks or Photoshop or Dreamweaver, but want a cross between them to make designs. If you have invested in the subscription though and want a better way to make layouts I highly recommend coding it yourself and using Fireworks or Photoshop to do the layout for you. There is an excellent tutorial on the devnet (3 parts) to show you how its done ( http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html ). Once you start using Fireworks or Photoshop you will realize just how limited Muse is in design.

How come FireFox won't load linked style sheets for every website?

It started about 4-5 days ago. No matter what website I go to, it isn't linking the style sheets so the websites are displayed incorrectly. Why? I didn't change anything!

Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
<b> To Enable SafeMode </b>
*You can open Firefox 4.0+ in Safe Mode by holding the '''Shift''' key when you open the Firefox desktop or Start menu shortcut.
* Or open the Help menu and click on the '''Restart with Add-ons Disabled...''' menu item while Firefox is running.
*''Once you get the pop-up, just select "'Start in Safe Mode"''
If it works in Safe Mode and in normal mode with all extensions (Tools > Add-ons > Extensions) disabled then try to find which extension is causing it by enabling one extension at a time until the problem reappears.
Close and restart Firefox after each change via "Firefox > Exit" (Windows: Firefox/File > Exit; Mac: "Firefox > Quit Firefox"; Linux: "Firefox/File > Quit")
* https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Banner image disappears when I move css to external style sheet

If I have the following code in the head of the document, the banner image is displayed:
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/copyNote.js"></script>
<style type="text/css">

</style>
But if I move the above code to the linked external style sheet (css/styles.css) everything shows up except the banner image.
Anyone know what I'm doing wrong?

BcSurvivor08 wrote:
the image path shouldn't change since the image is still in the image folder, right?
Yes, but the path to the image in the CSS must be relative to the location of the external CSS file.
In other words, the following rule in the home page
#banner
margin: 0 auto;
width: 980px;
height: 198px;
background-image:url(images/banner.gif);
would be written in the external CSS file as
#banner
margin: 0 auto;
width: 980px;
height: 198px;
background-image:url(../images/banner.gif);
because the CSS file is inside the css folder (one level down from the root folder).
../ says "From the "css" folder, go up a folder level then look for banner.gif inside the "images" folder..

HTML doc not attaching to style sheet but looks fine in DW. Problem

Hello once more,
I posted this problem the other day but it was mistaken for something else, this was my fault as I posted incorrectly.
The current problem with this page, is that it looks fine in Dreamweaver, but as soon as it is viewed in any browser, even firefox, it loses all of the style commands. The problem is with the text on the page, the menu seems to be behaving fine and I cannot comment on whether it is interfering with the page in a manner which causes the text to not find the styles.
Here is a screenshot of how the page should be appearing:
http://postimage.org/image/wp16tgqid/
Here is the page live on the internet:
Page
Here is an except of one of the styles:
.readingtextborder9{
    width:471px;
    height:173px;
    background:url(../images/reading%20border9.png);
    margin-top: 20px;
    margin-left: 36px;
    margin-right: 10px;
    margin-bottom: 5 px;
    text-align:justify;
    padding-left: 180px;
    padding-top: 10px;
    padding-right: 13px;
The page did work fine up until a point which I cannot distinguish, but at one point the menu was working together with the page, correctly. Hence why I find it hard to believe the menu is causing the problems.
Any help would be hugely appreciated.
Thank you

Validate code and fix reported errors.
You have a messed up Meta tag on line 26 and an extra </div> tag on line 208.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.entasistours.com%2Freading.ht ml
On lines 4-11, you have this style inside comments. Why?

On line 11 you have this which doesn't do anything. Remove it.
<style type="text/css"></style>
On lines 33-47, you have these styles.
<style type="text/css">
.style1 {font-size: 12px}
a:link {
color: #666666; }
a:hover {
color: #333333; }
.style2 {
font-size: 12px;
color: #666666; }
.style3 {color: #666666}
.style4 {font-size:12px; font-weight: normal; line-height:1; font-family: verdana; padding-top: 2px; margin-top: 5px; text-align:center; width: 100%;}
a:visited {
color: #333333; }
</style>
And even more styles on lines 58-71, also inside comments, why?
<style type="text/css">

</style>
Organize your code better.
Use meaningful .class names instead of style1, style2, style37, style42 which don't tell you what the style is being used for.
Put CSS code into your external style sheet. This will make problem solving and site management much easier.
Nancy O.

"@font-face" problem only with firefox. I have attached a style sheet while i was embedding my personal fonts into a website, but Firefox won't load them. Why?

I was hand coding my new website. This time i was trying to embed some personal fonts into my website, so i used a style sheet to embed which is coded like
"@font-face {
font-family:Sofia;
src:url(../fonts/Sofia-Regular.otf);
All the font work fine in the root folder of my site. But whenever i am creating dreamweaver templates and using them on pages which are in different folders but in the same root directory, the fonts are set back to default font. This problem is only with Firefox. Chrome, IE, Opera etc. works fine. Please Help!

i run into the same problem the last days.
using bootstrap and the fontawesome iconfonts.
everythings fine with chrome an ie, but no fonticons with firefox...
found alot of solutions, but none of them worked.
then, using the webdeveloper console (i used firebug all the time before) i see the error why the webfont was not loaded:
[14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms]
yes, the site is behind a '''htaccess''' login.
first load after login is => everything ok!
after following an internal link => no webfonts!
after disabeling the htaccess login, everything works fine!
but that can only be a workaround!
why firefox didnt recognize the login/authorization like chrome does?!
what todo if you have your site behind htaccess and want to use webfonts?!

Unexpected error when linking CSS style-sheet

I have been working on this site for over a month now. I have
a linked external CSS style sheet and everything has been working
seamlessly between Dreamweaver and the web. Today, I tried to
create a template and then disliked it, so I deleted it. After
doing that, my CSS rules were no longer displaying properly EVEN
THOUGH my formatting and everything has remained the same.
I have a feeling there is something cached behind the scenes
that is messing this all up. Community assistance is greatly
appreciated. This is not the first time I've been unable link a CSS
stylesheet.

upload the page and post a link, 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
==================
"rausch_g" <[email protected]> wrote in
message
news:f7im8a$7u4$[email protected]..
> This is not a display issue with the toolbar. There is
clearly a
> stylesheet
> attached in the header; however, in Dreamweaver when I
look in the
> "properties"
> panel while in CODE VIEW, it says there are no styles
and no attached
> style
> sheet. When I try to attach my style sheet, it says, "An
unexpected error
> occured while trying to read style-sheet information."
There are no
> errors on
> my style sheet, so I am unsure how to fix this.
>

How to Make a "fonts.css" style sheet

Hi, I have a wordpress blog with a stylesheet named “style.css”. I want to change the fonts in the style sheet and so I want to create a separate style sheet named “fonts.css"
I could just duplicate the ”style.css” page and then rename it “fonts.css” but I believe I read somewhere it is better to create a new style sheet named “fonts.css” and then add my font styles to that. Doens anyone know of a tutorial or how I make the new style sheet and add my fonts?

I only typically use two stylesheets on any given site, layout.css and styles.css. One is for the overall layout/positioning info of the site and the other is the style information which would include fonts, colors, shadows, transitions, etc.
If it is better in your mind and for your workflow to create a third stylesheet just for the font values, go for it. To me, fonts are just another style element though, so they stay in my styles.css file.
There's really no right or wrong to doing it either way. Just make sure you create another link in the head section of your site to the new file if you create fonts.css.
Thanks jon,
Yes I agree, I could just change the fonts in “style.css” and then have less style sheets, but the themes developer told me to create a new style sheet named “fonts.css” only because the theme is updated regularly and uploading a new theme will write over the file named “style.css” and then your fonts will default to their original fonts.
I don't see anything wrong with that approach. Just remember that if you have both styesheets linked to the same page then the page will get it's css styles from the last linked stylesheet.
So for instance if you have:
body {
font-size: 14px ;
in the style.css
and
body {
font-size: 12px ;
in the fonts.css
and the last linked stylesheet was styles.css the page would display 14px text.
So you just need to get them in the right order IF you have more than one styleshet linked to a page.
Thanks Osgood,
Yes that was my other question. So in my uploaded CSS folder I have the original “style.css” file and now my new “fonts.css” file. “style.css” is above the “fonts.css” file and both contain the same information except the file “fonts.css’ has been changed to use different fonts.
So if I understand you correctly I need to either move the file “fonts.css" above the file “style.css” or delete “style .css” from the CSS folder so the file “fonts.css” will take precedence. Is this correct?
Also, I needed to open style.php and edit the code to include “fonts.css” which I did.
I opened "style.php" and then added the code in "red" then uploaded it to the (CSS) folder on the server.
<?php
header( "Content-type: text/css" );
$files = array();
$files[] = 'style.css';
$files[] = 'responsive.css';
$files[] = 'fonts.css';
foreach($files as $file) :
    $content = @file_get_contents( $file );
    echo minify( $content );
endforeach;
function minify( $code ) {
          $code = preg_replace( '#\s+#', ' ', $code );
          $code = preg_replace( '#/\*.*?\*/#s', '', $code );
          $code = str_replace( '; ', ';', $code );
          $code = str_replace( ': ', ':', $code );
          $code = str_replace( ' {', '{', $code );
          $code = str_replace( '{ ', '{', $code );
          $code = str_replace( ', ', ',', $code );
          $code = str_replace( '} ', '}', $code );
          $code = str_replace( ';}', '}', $code );
          return trim( $code );
?>
After doing all of this I still didn’t see any changes to my fonts so I must have done something wrong.
Any ideas?

Referencing CSS from Shared Components/Cascading Style Sheets

Apex 4.0
I've been placing my CSS style sheet in Shared Components/Cascading Style Sheets. And referencing it as follows <link type="text/css" rel="stylesheet" media="screen" href="#WORKSPACE_IMAGES#app300.css">.
For weeks all has seemed to work fine. I make changes to app300.css in Cascading Style Sheets. Clear cache. And see my change.
But suddenly it stopped working. More specifically my updates don't take. I firebug and look at the file under CSS and don't see my changes. app300.css is unchanged. Then I deleted app300.css from Shared Components/Cascading Style Sheets. The file is deleted. No longer in the Cascading Style Sheets panel. But the old file still appears when I look under firebug.
Simply a brain cramp for me. I know this is probably obvious but I can't figure it out.

Hi,
If your file still recides in the database, you might want to try deleting it with a procedure from the wwv_flow_api package:
set serveroutput on
declare
l_security_group_id number;
begin
select workspace_id into l_security_group_id
from   APEX_040000.APEX_WORKSPACES;
wwv_flow_api.set_security_group_id
      (p_security_group_id => l_security_group_id);
wwv_flow_api.create_or_remove_file
    ( p_name           => 'app300.css'
    , p_location       => 'WORKSPACE'
    , p_mode           => 'REMOVE'
    , p_type           => 'CSS'
commit;
end;
You can run this using SQL developer/ Toad or whatever program you use, but I don't think you can run in the SQL workshop of Apex.
Run it as workspace owner.
First part sets the apex engine to point to the correct workspace id in Apex, change "APEX040000" to match your version of Apex.
Second part is the procedure that should remove your file from the database.
Make sure you commit your changes and try to upload your css file again.
Regards,
Vincent
http://vincentdeelen.blogspot.com

Multiple style sheets 1 for background and adjustable content and 1 for layout

H guys , I have 1 css that is attacthed to everypage of the site, this is the basic layout of the site , what I want and trying to do , is have another css for "each" page that has a different body back ground and the unique divs to that particular page !
I've attached both css to the page but the only the layout css shows , so there's no bg or unique divs showing , what do I have to do to get both to show on the page ? .. I've tried linking the 2 css togther but only the layout shows , so I'm pretty stuck . many thanks in advance if you can help

Yeah, it can be edited... but only by you!
So CSS in the <head> and CSS in a style sheet can both work... but if you have 10 pages, each with it's own CSS in the <head>... and you have to go in and adjust some stuff... that means you must open 10 pages.. do the edits.. separately... then test each of the 10 pages..... separately..
OR have a master CSS page... do all the edits at once, upload just one edited CSS page and then test the entire site... all at one time.
That's the heart of CSS... Cascading Style Sheets... changes/edits you make will propagate/cascade down over your entire site...
My advice... keep all your CSS in one (easily editable) file.
Best wishes,
Adninjastrator

Part 07 - Understanding and Using Cascading Style Sheets | Classroom: Basic Site Layout and Navigation in Dreamweaver | Adobe TV

In this video you’ll continue to further customize your website using CSS or Cascading Style Sheets. With CSS you can control many visual aspects of the website efficiently and consistently. Learn the basics of how CSS rules work and how you can easily take advantage of the power and flexibility of CSS in Dreamweaver including creating and editing your own CSS class.
http://adobe.ly/wTlFxC

some of these tutorials don't really work. changing the body image to scrolling or fixed doesn't change anything on my computer, and apparantly doesn't change anything on the version that the instructor is using either, since he never shows us the "before"

New to CSS! Attach a Style sheet to exsisting website

Similar Messages

Maybe you are looking for