My html doc doesn't seem to be reading my css

New Here ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

I've built a simple website and am using css. My css file seems to be imported correctly, but the text isn't responding to it. I've done this a few times in the past with no problems, but it's been few years. Am I doing something wrong? Would be happy to post the page and share a link if anyone is willing to help. Thanks.

Views

96

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

Copy & paste this code into a new document & save to your local site folder as test.html

Can you see the CSS styles in Live view as opposed to Design view?  Toggle views with Ctrl + Shift + F11.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fluid {max-width:100%}
.thumb {padding:12px; box-shadow: 5px 6px 1px rgba(0,0,0,0.3)}
h3 {color:antiquewhite; background:brown; padding:1%}
</style>
</head>
<body>
<div>
<h3>Heading 3</h3>
<a href="https://example.com">
<img src="https://dummyimage.com/400x300" class="fluid thumb " alt="Placeholder" title="Example.com">
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis velit minima hic tenetur ea nesciunt tempore voluptas, architecto obcaecati, iusto optio quidem explicabo odit expedita quas? Aliquam libero numquam nesciunt!</p>
</div>
</body>
</html>

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

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 10, 2021 Aug 10, 2021

Copy link to clipboard

Copied

Yes, thank you, Nancy - Live view shows me the grey box with 400x300 in it, Design view shows me a broken link.

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

Best thing to do is to post a link to your page so it can be viewed online. In many cases this can be caused by conflicting CSS or an issue in the code which is causing rules not to respond.

Likes

Translate

Translate

Report

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 10, 2021 Aug 10, 2021

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

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 10, 2021 Aug 10, 2021

Copy link to clipboard

Copied

css classes need to start with a period - .

 

So in your css stylesheet you have the below:

body_2

 

instead of: (period before the selector (see in red below)

.body_2

 

Don't get confused and add a period before the genuine 'body' tag which exists as a default html selector. Infact you should name your paragraphs something which leads to less confusion, like 'body_text' or 'main_text'

 

Not sure what it is you are trying to do BUT the use of tables and images to construct a website kind of went out of business about 15 years ago............now you need to consider mobile devices so your website is responsive.

Likes

Translate

Translate

Report

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 10, 2021 Aug 10, 2021

Copy link to clipboard

Copied

Thanks, osgood. No doubt one of many things I've done wrong. I appreciate your help. 

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Aug 10, 2021 Aug 10, 2021

Copy link to clipboard

Copied

LATEST

A lot has changed on the web in recent years.

 

1. Navigation should not be image-based.  Real text is better for accessibility.  Also raster images become pixelated and blurry when rescaled to fit large devices.  But more importantly, images of text can't be translated or indexed by search engines.

 

2. Whenever possible use Illustrator or another vector graphics app for your web graphics and export them to SVG.   Vectors can be rescaled to any size without quality loss.  SVGs are ideal for logos, brand names, icons, charts, infographics, comics, drawings and other flat colored web graphics.  

 

3. For better viewing of photos on multiple devices, use JPG or PNG in small, medium and large sizes  along with the SRC SET property. 

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

 

4. Start your projects with a responsive CSS layout.  Bootstrap is well supported in DW CC and it's a popular mobile-first framework used by millions of sites worldwide.  In DW, go to File > New > Starter Templates > Bootstrap Templates.  Select one from the list and hit CREATE button.  SaveAs index.html.

https://www.w3schools.com/bootstrap4/default.asp

 

Post back if you have more questions.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

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
Adobe Community Professional ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

Did you define your local site folder BEFORE you started this project by going to Site > New site and selecting a folder on your primary hard drive -- not a networked or cloud drive?  For example, C:\myTestSite\

 

And does the stylesheet reside in your local site?

Files PanelFiles Panel

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

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 10, 2021 Aug 10, 2021

Copy link to clipboard

Copied

Yes, I began with a folder on my hard drive called "client". I defined that folder as my local site. Everything related to the site, including the .css, is located in that folder at the root level.

Likes

Translate

Translate

Report

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