Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

CSS Style Sheet Help

New Here ,
Aug 16, 2018 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.

857
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2018 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,

^ _ ^

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2018 Aug 16, 2018

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2018 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,

^ _ ^

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2018 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>

<meta charset="UTF-8">

<title>Product Management</title>

<link href="Styles/responsive.css" rel="stylesheet" type="text/css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/source-sans-pro:n4,n2,n6:default.js" type="text/javascript"></script>

</head>

<body>

</body>

</html>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2018 Aug 16, 2018

<link href="Styles/responsive.css" rel="stylesheet" type="text/css">

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2018 Aug 16, 2018

That's where my CSS Style Sheet resides

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2018 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,

^ _ ^

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2018 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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2018 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,

^ _ ^

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2018 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2018 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,

^ _ ^

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2018 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,

^ _ ^

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2018 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
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2018 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.

CC-BugReport.jpg

CC-validate-doc.jpg

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 17, 2018 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?

Screen Shot 2018-08-17 at 15.45.15.png

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 17, 2018 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 17, 2018 Aug 17, 2018

Doesn't the

<link href="Styles/responsive.css"

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 17, 2018 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 17, 2018 Aug 17, 2018

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 17, 2018 Aug 17, 2018
LATEST

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 17, 2018 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).

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines