Template CSS linking issue

[camelbreath]

Windows 10  Dreameaver 21.2

Link to my erroneous page

This problem clearly demonstrates that I only know enough about HTML to be dangerous.

I attempted to open a page with the DW single page template and then began removing every thing that I did not want to make a simple page for a photographer friend who wants his proof sheet available to his clients on line. In DW, the cobbled together page looked fine. On line, it shows that it has no idea where to find its styling. 

I made sure the style sheet uploaded and even made a copy of it and uploaded it outside the CSS folder, all to no avail.

Can anyone tell me how to fix this, understanding my well documented lack of expertise?

Thanks to those who know more than me,

Joe

[B i r n o u · Accepted solution]

your website is using HTTPS... so that means that all your linked ressources must be called using this protocol,  yet http://use.edgefonts.net/source-sans-pro:n2:default.js is using HTTP... so change it to https://use.edgefonts.net/source-sans-pro:n2:default.js

that should help loading missing parts.

in an other side, the CSS file seams to load correctly, except that all background images still point on ../images/ and as you relocated CSS to the root folder, you should change this path to /images/ only

[camelbreath]

Birnou, your timely advice was spot on. I deleted the CSS I put in the root folder so the page is finding its info in the right place.

Thanks for your help,

Joe

[camelbreath]

The adventure continues, I want the small descriptive type in each unit to be darker so I wrote a simple CSS color rule:

.darktype {
color: #09313b;
}

and inserted it in the style sheet at a location that I thought would work. I assigned the rule to one of the text lines I want to be darker, but it does not work:

<div class="thumbnail">
<h2 class="stats">Arkansas River golden hour</h2>
<h4><a href="chuck/arkansas-river-golden-hour.pdf">Click here to view&nbsp; or download</a></h4>
<p class="darktype">Scenes at the Hwy. 79 Arkansas River Bridge</p>
</div>

Again demonstrating my lack of HTML expertise.

Can you tell me where I have erred.

Still grateful,

Joe

[Nancy OShea]

To make text darker, add font-style: bold.

Or wrap the HTML in <strong> </strong> tags.

<p><strong>Bold Text</strong><p>

[B i r n o u]

it seams that it doesn't work, just because you have an heaviest rules ahead

.gallery .thumbnail p {
	color: #A3A3A3;
}

in CSS this rule (.gallery .thumbnail p) weighs two classes and one selector, that is to say 21 (the classes weighing 10 and the selectors 1)...

on your side the darktype rule is defined only by one class (.darktype), therefore weighs 10... it is the other rule which is thus applied

so to workaround your problem, use a stronger rule, like
.gallery .thumbnail p.darktype which weighs 31
notice that there is no space between the P and the class name (because this class is not a child of P, but applied to the P node

.gallery .thumbnail p.darktype {
    color: #09313b;
}

[camelbreath]

I removed the darktype rule and added the

.gallery .thumbnail p.darktype {
color: #09313b;
}

to the bottom of the style sheet an saved it. It does not show up on the dropdown list that I can tell. So my questions are:

1. Is placing the new rule at the bottom of the sheet OK and if not where should it be?

2. Do I need to manually add the style in the markup and if so can you show me how to do it since my HTML skills are not where they should be?

Thanks for your patience and help,

Joe

[B i r n o u]

well you just add the rule in between STYLE tags located in between the HEAD tag... just after the TITLE tag is nice.

then the darktype class should appear in the properties selector (in my sample below I called the class foo), and the cursor is somewhere in the P tag

[camelbreath]

Thanks again for your fine help!

Joe

[B i r n o u]

You're welcome, I'm glad that it helped you.