CSS Style Sheet Help

Report · Aug 16, 2018

I'm creating a website using Dreamweaver CC. I've created two pages already and have successfully attached the style sheet through the CSS Designer/Sources pane. However, when I come to add the style sheet to a plain HTML5 with no Framework, none of the rules apply.

I'm an absolute beginner at this so can you please answer with detailed and simplified explanation as to what I'm doing wrong.

Report · Aug 16, 2018

We would have to see your code. But first - have you defined a site for this project? Or did you just start coding?

Check your code. If the source for the CSS begins with "file:///", then you didn't define a site. Change it to the relative path to the .css file.

If this isn't the case, then we need to see either the code, or the URL for us to look at it.

HTH,

^ _ ^

Report · Aug 16, 2018

Thank you for your answer. I've not defined a site for the page.

Report · Aug 16, 2018

Typically, defining the site is the best way to work in DW. However, if you don't, then you can manually change the src/http attributes to the relative paths. Glad you got it working, and thank you for marking my answer as correct. I do appreciate it.

V/r,

^ _ ^

Report · Aug 16, 2018

I'm in a bit of a muddle again. I've defined a site but despite my many attempts the CSS rules are still not being applied.

Here's my code:

<!doctype html>

<html>

<head>

<title>Product Management</title>

</head>

<body>

</body>

</html>

Report · Aug 16, 2018

The above indicates you have a folder named 'Styles' (with a cap S) directly within your defined site folder and inside the Styles folder you have a file named responsive.css?

Is that where the files reside?

Report · Aug 16, 2018

That's where my CSS Style Sheet resides

Report · Aug 16, 2018

Are you hosting on a Windows server, or Linux? If Linux (Apache), I believe the links are case-sensitive, so if the folder is actually named /styles, then Apache will not see a folder if it's attributed as "/Styles".

I'm clutching at straws, here. It could be anything.

HTH,

^ _ ^

Report · Aug 16, 2018

This website isn't going to be published and is mandatory for my coursework. I had no trouble adding the style sheet to my second page but when it comes to this certain page, using the exact same method, it doesn't work.

Shall I just copy and paste the code from the second page into this one or is there anything else I can do?

Report · Aug 16, 2018

You can give that a shot, I guess. Older versions of DW, you could right-click a tag and edit it. This would allow you to navigate to the proper folder and select the file, making sure the path is correct.

Are the first and second pages both in the same folder?

V/r,

^ _ ^

Report · Aug 16, 2018

Yes. I've saved all the pages in the same folder.

The copying and pasting didn't work, the code is exactly the same as the first two pages. I can view all the selectors and the media queries but none of the style rules are appearing.

Report · Aug 16, 2018

In the browser, press F12 to open Developer Tools. There should be a tab called "Console". Select it, reload the page, and see if there are any error messages.

If that doesn't work, then you can use the Advanced Editor on this forum then copy/paste the code from both pages into separate posts (after you paste, highlight all the code and use the >> button up top to use Syntax Highlighting.) That way, we can eyeball the code.

HTH,

^ _ ^

Report · Aug 16, 2018

In the same vein as what Nancy OShea stated, you can also validate by direct input at https://validator.w3.org/

Go to that URL, select "Direct Input", and then copy/paste your code into the textarea and click the "Check" button.

V/r,

^ _ ^

Report · Aug 16, 2018

There's also a code validation tool for CSS at the link below.

The W3C CSS Validation Service

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 16, 2018

When things don't work as expected, it's often caused by code errors. Validate code and and fix reported errors. See screenshots.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 17, 2018

I did a validation on the code and 2 warnings came up. I don't understand what it means, can someone help please?

And thank you so much for the help, I really appreciate you guys helping me solve this.

Report · Aug 17, 2018

Neither validation warning is critical and wont effect your css styles showing up. What is interesting though is you have no code in the page to attach any css styles to except the html/body tag, maybe that could be why your css styles are not showing, its a blank page?

If that isnt the issue maybe the first script tag with the var in it is an issue, that looks a bit weird to me but pretty much everything in web development is weird these days and getting more so. Its most likely some proprietory garbage Dreamweaver inserts but as l dont use that bit of kit any longer l cant be sure.

Report · Aug 17, 2018

Doesn't the

rel="stylesheet" type="text/css">

link the stylesheet to the page. As mentioned before all the code is the exact same as my other pages but for some particular reason it's not appearing.

Report · Aug 17, 2018

Sure the stylesheet link is correct but you havent added any code to the page yet, what are you expecting to be styled in the snippet of code you posted.?

Add a header tag to the page between the body tags

<h1>This is a heading</h1>

Open your css stylesheet and add

h1 {

color: red;

}

Save the css file and then you should see the heading tag in your page has turned red

Report · Aug 17, 2018

When I added the stylesheet to my second page (which was also a blank page) it immediately worked.

Report · Aug 17, 2018

SI201012 wrote
When I added the stylesheet to my second page (which was also a blank page) it immediately worked.

Impossible. Unless you have some content on the page just linking a stylesheet will do nothing unless there is something in the style sheet which affects the body/html tag and if there is it would have worked for the page you posted.

Its more likely to be a result of user confusion, which given the complexity of web-development is quite easy to happen

Report · Aug 17, 2018

Thanks for all the help guys, but my dreamweaver crashed and I lost everything. So this time I'm going to be super careful and make sure nothing goes wrong (hopefully).

Adobe Community

CSS Style Sheet Help