Linking a CSS file

Hi Everyone,
I am new to CSS and its ability. I do understand how Dreamweaver works and have been designing table-based websites for years.
I also know how a CCS file works. What I don't know is how to START a website design using CSS.
Say I have a CSS file that is complete. I want to link this to all the pages in my site. How to I go about designing the page? Do I do it with div's and just name them the same as the CSS info or do I just fill out a page with pics and text and assign it to a CSS name already established in the CSS file? I get the idea of what I'm suppose to do but am lost with trying to achieve it.
Thanks

How to start? That sort of depends on you. I usually start with an unstyled HTML document. Build my page content logically from top to bottom. Then add appropriate #Divs or containers for the main Layout areas. A typical CSS might look like this:
Body { }
#Header { }
#HorizMenu { }
#LeftSidebar{ }
#mainContent{ }
#Footer { }
HTML:
<div id="Header">
</div>
<div id="HorizMenu"
</div>
<div id="LeftSidebar"
</div>
Etc....
Creating your first web site in DW CS4 -
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

Linking external css file issue

Hello everyone,
I have linked my css file to the html in dreamweaver manual in the html page and by attaching the css file in dreamweaver but when I add new stle to my css file I dont know why it wont show the affect of the style I add to the HTML file while I have the split view in dreamweaver. please help

That's because you're creating a class. You don't need a class to style HTML selectors.
HTML selectors don't contain any prefixes.
h1 {color:teal}
h2 {color:brown}
h3 {color: maroon}
Classes contain a dot prefix and must be referenced in the HTML.
.classname {color:pink}
<h2 class="classname">This class is pink</h2>
Nancy O.

How to link a css file in the xsl file

Hi
           I would like to know how to include link to my .css file in my .xsl file.
The scenario here is I want include a background color in my ShowForm.I am trying to do the same using css.
This is the code snippet in my css file
.outerbody {
     background-color: B1C1CF;
This is how I tried to include a link in my xsl file
<link href="/irj/go/km/docs/Testing/MyNewsDemo/css_test.css" type=text/css rel=stylesheet>

Hi
          Thanks a lot. It would be very helpful if you send me an example.
As of now I have found a solution,I would like to share it here.
I added a link to my css file in xsl:
<link rel="stylesheet" type="text/css" href="/irj/go/km/docs/Testing/MyNewsDemo/css_test.css">
</link>
I replaced the standard class name "body" with my class name "outerbody" specified in the css file.
<body class="outerbody">
Edited by: SRIVIDHYA RAGHUNATH on Feb 25, 2009 11:19 AM

Induced Error Linking to CSS files

When I link (in the CSS panel ) a CSS file locally to an html
page I get the following:
<link href="/css/type.css" rel="stylesheet"
type="text/css" />
The CSS folder is in the same folder as the page so the path
is almost correct but its the leading "/" that creates the problem.
The html page doesn't reference the CSS file.
If I remove the leading "/" the CSS file is referenced and
the page displays as expected.
So the link now becomes
<link href="css/type.css" rel="stylesheet" type="text/css"
/>
I'm not knowledgeable on the conventions of defining the path
from the page to CSS file so I have to ask is this a bug in DW, do
I have an incorrect setting that I'm not aware of, OR is there some
other reason this is happening.
Additional Information: The page displays correctly in the
"design" mode but when you go to "live view" it fails. The page
also fails to display correctly when viewed in a browser.
Background: DW CS4, OSX 10.5.5
Thanks

At the bottom of the "Select Style Sheet File" dialog there
is a filed
called "Relative to:". You have it set to "Site root". Change
it to
"Document".
HTH,
Randy
> When I link (in the CSS panel ) a CSS file locally to an
html page I get the
> following:
> <link href="/css/type.css" rel="stylesheet"
type="text/css" />
> The CSS folder is in the same folder as the page so the
path is almost
> correct but its the leading "/" that creates the
problem.
>
> The html page doesn't reference the CSS file.
> If I remove the leading "/" the CSS file is referenced
and the page displays
> as expected.
> So the link now becomes
> <link href="css/type.css" rel="stylesheet"
type="text/css" />
>
> I'm not knowledgeable on the conventions of defining the
path from the page to
> CSS file so I have to ask is this a bug in DW, do I have
an incorrect setting
> that I'm not aware of, OR is there some other reason
this is happening.

Template page doesn't update the css file location

I've been using Dreamweaver for years; been using templates for years but can't figure why this now happening.
I create a new page from a template (that I've used for years) and everything on the page (including image and other links) is fine and updates properly; Links to css files do NOT update.
The relevant template code is as follows:
@import url(../p7pm/p7pmh13.css);
@import url(../tourstyles/tour2fluid.css);
The page code is as follows:
@import url(file:///D|/Wine Tour/p7pm/p7pmh13.css);
@import url(file:///D|/Wine Tour/tourstyles/tour2fluid.css);
I've switched the links relative from document to site root and back again with no joy.
Sure would appreciate a pointer on how to fix this. Thanks.

It looks as though the site definition is wrong. Have you fallen foul of the problem with the latest versions of Windows not registering the site root folder correctly? See http://forums.adobe.com/thread/478327.

Underbars in CSS Files and Firefox vs. IE 7 Compatibility

Hi folks.
This may have already been covered somewhere, but I've spent the last two days trying to solve this problem and didn't see anything referring to it. So, in order to save anyone else the hassle, I'll describe the problem and its fix.
I just started using Apex 3.1.1 yesterday, and I wanted to see how hard it would be to link a CSS file to a site.
I read http://download-west.oracle.com/docs/cd/B32472_01/doc/appdev.300/b32471/ui.htm#BABHJCJI but that still didn't help me. Nothing I tried would make Firefox see the linked stylesheet even though IE 7 was having no trouble at all. That was ironic since I discovered people having problems with IE 7 not showing styles as opposed to Firefox having no problems.
When I put the style code directly into the header of the page, it would work in both Firefox 2 and IE 7, but when I tried to link the CSS file, only IE 7 would show the altered styles. I was about to give up, when it suddenly occured to me that when I chose "Icons" for the "View" option inside the Cascading Style Sheets Repository Page instead of "Details" that the underbar or underline in my file name would not render correctly. Instead of showing up as "cfdb_styles.css" it was showing up as "cfdb styles.css" in both IE 7 and Firefox.
So, after I changed the file name to "cfdbstyles.css", everything suddenly worked in both browsers! I suppose this could be logged as another one of those improbable Apex bugs.
The moral of the story: don't use the "_" (underbar/line) in your CSS file names.
And once again, I apologize if this is common knowledge. I certainly hadn't found it anywhere I looked online.
Thanks for your time, and I hope that helps someone out there struggling as I did,
Anton

Anton,
I don't think you are right. Have a look at the themes directory. There you will see that all
the css files are named like
theme_V3.css
and those contain an underline. If you look at the page template, you will see there how
those files are referenced. So, this is definitelly not an apex bug.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

Someone can help me? I want to add a link in this image (white tree). I think this is in a CSS file.

I need to know how do I add a link in this icon. I believe it is in a CSS file.
Please help me!

Find this in one of your templates:
<span id="Hover_tree"><img alt="" src="/images/red_area_nav_bg.png" /></span>
replace with:
<span id="Hover_tree"><a href="your link here"><img alt="" src="/images/red_area_nav_bg.png" /></a></span>
Hope this helps!

How do I fix my CSS styles in linking and working right on my copied HTML and CSS files?

How do I properly link my CSS styles to my HTML file? (It's a single page website with a spry drop down menu, which somehow doesn't show when I hover over the buttons). I am using a copied file from the original because it was originally saved on my school computer so I had to relink everything.
When I click to see the CSS styles it says: 'sprymenubar.js'mis not on the local disk
When I click "get," it says the spry is not in a defined site. It says this for all my CSS styles.

My guess without seeing your code is that you're linking to files:/// on your hard drive instead of the local site folder. This would explain the problems you describe. When this happens, it's almost always because the site is not properly defined in DW's Site > Manage Sites panels:
Nancy O.

Problem with elements/text linking to styles in external css file

Hi,
the project I am working on is using a default.css and I would like to assign styles from the file to elements in edge - how can I do that?
I already tried the "class" setting in the GUI next an element but the elements do not use the styles defined in the default.css.
The default.css is linked in the html file properly. In the js file which edge creates I see that the value userClass: 'slideTitle' is assigned and slideTitle is defined in the default.css.

Use yepnope like this:
yepnope(
    nope:[
    // include your css file path here.
        'css/yourcssfile.css',
    complete: init
function init() {
//whatever you need here

Add file type icons to links using CSS - DW CSS problem?

Hi,
I want to add file icons to links using CSS. How to do this
is clearly described in the article found
HERE.
A most useful feature I REALLY want to use
However the CSS code shown below is not recognized by DW CS3.
In the CSS Styles window shows "(no styles defined)". HELP!
Any tips/tricks/pointers would be appreciated.

horse.badorties wrote:
> So DreamWeaver CS3 is NOT able to handle CSS 3?
Actually, it has been able to handle most of the CSS 3
selectors since
MX 2004, but it doesn't recognize these:
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E ~ F
Since they're all supported by IE7, Firefox, Opera 9.5, and
Safari 2,
there's a good argument for Dreamweaver to start supporting
them. Why
don't you submit a formal feature request to Adobe?
http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
There are several others not yet supported by Dreamweaver,
but browser
support for them is non-existent, too. The four listed above
are the
most important.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Dreamweaver CS4 CSS file links updating problem

Hi apologies if this question has already been asked, the
search tool does not seem to be working.
I have recently installed DW CS4. When you open a page all
the related files open too so the CSS linked file also opens
however, if i try to update the CSS file from here when i come to
save, i get a message box asking if i want to 'update links'? If i
say yes it updates all the links in my CSS file from ../images to
the full path of the images and this then creates problems with the
site. If i say no, it then tells me that my CSS file contains an
invalid path and then prompts me to 'update links?' again.
If i open the CSS file separately in DW i dont have any
problems.
This is really annoying me, if anyone can help i would be
grateful!

Thanks for your replies. I updated my Nvidia video card driver and I deleted the Cache file per the instructions in the link above. Unfortunately I'm still getting the Lockup.
It locks when I use the CSS panel for a period of time. What's odd is that the CSS panel remains active and I can edit and make changes to the CSS rules. The rest of the interface locks up. The code/design window the menu bar etc. I have to close down DW with the task manger. when I do that I get asked if I want to save the changes to the open files and the changes get saved. But the entire user interface except for the css panel is frozen. Weird.
The link above suggest deleting the entire personal configuration folder and the extension manager folder. this seems pretty sever and then it seems I would have to re-install the extensions that I have and etc. Perhaps that's what I have to do? This regular lockup is a pain. Like I said the rest of my system and other apps (fireworks, Photoshop, etc) are all rock solid. The problem is strictly with DW.
Thanks again for your suggestions.

My CSS file name won't save & won't stay linked to my pages.

Hi there,
I moved my internal style sheet to an external style sheet and it won't save as the file name i give it, it saves as "untitled".
-i am unable to change file name in the code or directly on the file icon....it just reverts back to "untitled".
-i deceided oh well my style sheet will be called "untitled" and proceeded to work.
-i linked a few of my pages to "untitled" and saved them.
-this morninging when i opened my project up none of the styles were saved on any of the pages so i went to relink again then close and open them. the same thing accured, none of the styles were saved.
i am working in CS3
this is what i did to move my internal style sheet to an external style sheet
went to my CSS styles pannel and selected all
-selected all my rules
-command clicked on the rules and chose ""move to external rules"
- in the "move to external rules" dialogue box i chose - move rules to "a new style sheet" and click ok
- in my "save sheet file as" dialogue box i browse to the folder (assets) where i want to save my new style sheet and name it "styles.css"
this is what i did to link my pages to the external style sheet
in the CSS styles pannel i clicke dthe attach style sheet button
in the "attach external style sheet" dialogue box i browse to "untitled" and add as a link
note: the code to link to my external sheet is still in my code <link href="assets/untitled.css" rel="stylesheet" type="text/css" />
any knowledge anybody can share with me? im new to dreamweaver...i am teaching myself so any help would be great. thanks!

The simplest way to create an external CSS file is to use File menu > New > CSS.
Open your HTML document in code view.
Cut or Ctrl+X the CSS rules - everything between the <style type="text/css"> and </style> tags.
Switch to the new CSS file and paste style rules into the blank page.
Hit Ctrl+S to save filename.css
Link external stylesheet to HTML document.
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Problem with CSS files when placed in multiple locations.

Hi,
In our application we have a folder structure for the code files. Folder structure looks something like the one shown below:
ABC
---Scripts
---Stylesheets
DEF
Scripts
Stylesheets
Common
---Scripts
---Stylesheets
The problem is, if we create a CSS file and place it in its module specific folder (Eg: ABC) to which it belongs to and call the CSS on a page, then the styles are not getting applied to the page. But if we move the stylesheet to the Common folder, then page renders properly. In common folder, we already have a common CSS which is used across the project.
Facing similar problem with module specific and common js files.
We have to move all the module specific files to the module folders and all the common files to be placed in the Common folder.
MII Version: 11.5
Please help!
Regards,
Rajesh.

Rajesh,
Also note that, If your html is referencing to multiple css files then the last referenced CSS file style classes will override all the style class having same names in the previous css files.
for example,
say CSS1 has
.bodycolor
background-color:yellow;
.button
color:red;
h1
font-size:50pt;
and CSS2 has
.bodycolor
background-color:red;
.button
color:yellow;
And your HTML is,
<html>
<head>
<link rel="stylesheet" type="text/css" href="css1.css"/>
<link rel="stylesheet" type="text/css" href="css2.css"/>
<title>CSS Test</title>
</head>
<body class="bodycolor">
<h1>Hello World</h1>
<input type="button" class="button" name="B1" id="B1" value=" Click " size="50">
</body>
</html>
In this case the classes "bodycolor" and "button" will be overridden by css2 file but h1 will be taken from css1
Hope this helps!!
Regards,
Adarsh

How can I specify a different css file for mobile browsers?

I'm experimenting with updating our website to be "mobile friendly". I could use some help.
We use a lot of static HTML landing pages for things like links from email ads, etc. What I'm trying to do is have 1 landing page so the content/html page is always the same, but the page will detect what browser/device you are using and then load a different css file depending on what it is. But, we don't want to have to load the style info from the PC version if you're not on a PC.
What I'm doing now is specifying the media type in the css link, like this..
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css">
What's happening is it's loading the main stylesheet first, and then the 2nd one changes some styles if you're on a device with a max width of 480 pixels (like an iPhone). But since it's loading the PC styles first, it's making some things look screwy.
So, is there a way to say "If you're on a PC, load this stylesheet. If you're on an iPhone, load this one instead." .. without javascript? I don't trust javascript too much on mobile devices. I feel like this some simple little thing that I'm missing that will make it all automagically work.
We don't want to have different content depending on the browser, just different stylesheets. Can anyone help?

Hi
Would it be better to do 2 different stylesheets, or just one big one and add a section at the bottom like:
@media only screen and (max-device-width: 480px) { .styles {whatever: styles;} }
2 separate style sheets are recommended. The reason for this is that the Safari mobile browser, (as used in iPhone etc) will download any/all images specified in a style sheet even if they are not used or specified in a media-query rule, this is a know bug with that browser.
I'm also having a new issue where the style "clear: both;" doesn't seem
to be working right. I set up my top horizontal menu using float: left,
and there's a lot of links so on the smaller screen it wraps, which is
fine but now the wrapped links are floating over the page content...
This is one of the reasons that floats should not be used in style sheets for mobile devices, the only exception I know of is for small typographical feature such as 'pull-quotes', (and never use float: right;). It is also recommended to include a menu at the bottom of the page, (or at least a link back to the top).
It works, if I have the iPhone as portrait it looks great, but if I turn
it to landscape, everything is zoomed in. But if I switch back to
portrait, everything is the right size. Is there any kind of way to get
the landscape to have the normal zoom level? I know I can do
"initial-scale=1.0", but that is just for when the page loads, not if
you change it afterwards...
I have heard of only one recommendation to fix this and that is a page refresh on resize, but due to bandwidth limits now being implemented by many providers it is probably not a good idea, you could try setting -
maximum-scale = 1.0
as well.
PZ

Trying to dynamically load CSS for project at compile time via config XML file to select CSS file.

I'm using the same code base to compile different versions of a project. Each project has different base fonts. I've created multiple css files that use the same style names. The idea being that in the code I reference the style names, then the loaded CSS determines which font (and size, color, etc) is used for each style name.
The CSS files are compiling to SWFs, and those SWFs are referenced in config.xml files. Before compiling, I select the config file to use.
I am loading the CSS SWF files via the StyleManager in the Application.mxml, like so:
styleManager.loadStyleDeclarations( _contentData.elements( 'cssPath' ).@path )
The path traces out correctly as:
assets_embed/styles/project2.swf
For some reasone I must include an fx:Style line in the Application.mxml file or no fonts are recognized. Example:
<fx:Style source="assets_embed/styles/project1.css"/>
If I reference the css for project one (as done above) then most, but not all, styles work. Some styles reference the fonts from the project 1 css, others properly use fonts from project 2 swf. If I point to the CSS for the project I'm compiling in the <fx:Style > tag then all fonts work, but that defeats the goal of using XML rather than code to identify the styles.
So, why do I need the fx:Style line if the css is being loaded via StyleManager?
Why is there "cross talk" between style definitions?
Is there a better way to select styles at compile time?

I read this quickly so I might have missed a detail. I think your describing an issue with recent Flex releases that is described in the fine print somewhere. If you don't have any fonts embedded in the main app and are only bringing in fonts embedded in CSS SWFs, you have to force-link the EmbeddedFontRegistry by adding something like this to the main app's script block.
import mx.core.EmbeddedFontRegistry; EmbeddedFontRegistry;
(Yes, "EmbeddedFontRegistry" is in there twice, once to define the fully qualified name, the other to create a class dependency to force the linking).

Linking a CSS file

Similar Messages

Maybe you are looking for