[Closed] Website CSS - just trying to make things simple!

do you have a link?

I can’t help - I’ve never got on well with CSS. But are you writing directly in HTML or using some sort of content managemeant system (like Wordpress)...

Thanks! This is the current irritation:

https://barefacedaudio.com/blogs/articles/getting-the-guitar-tone-you-want-custom-celestion-choices

The platform is Shopify. My prior staff have made it quite complex by also using custom code. I can edit the blogs like this in the platform but it doesn’t show the formatting until I preview them. With the product pages I have to do it all in code...

We’re very much a substance over style, content over cosmetics business, so I’m happy to strip back the look just as much for the vibe as well as for the ease of editing and adding content.

Use "developer tools" in your browser - in chrome that's accessed by hittiong f12. You can then go to the "elements" tab and use the icon in the top left (arrow pointint into a box) which will highlight in source code the element your mouse is pointing at. CLick on it the the CSS will be shown in the "styles" box, from weher you can find the applicable style and then find the same in your source code

[url= https://i.postimg.cc/pVn7XZK9/2021-01-27-08-59-50-Window.pn g" target="_blank">https://i.postimg.cc/pVn7XZK9/2021-01-27-08-59-50-Window.pn g"/> [/img][/url]

here's the offending article, line number 5, take out the text-transform and all the links will go back to regular case:
<div class="styles-section-title styles-selector"></div>
<div class="style-properties matched-styles monospace styles-panel-hovered">

.rte a:not(.btn) {
border-bottom: none;
padding: 0 5px;
height: 45px;
line-height: 45px;
text-transform: uppercase;
text-decoration: none;
color: #0e1ecc;
}

</div>

.rte a:not(.btn) {
border-bottom: none;
padding: 0 5px;
height: 45px;
line-height: 45px;
text-transform: uppercase;
text-decoration: none;
color: #0e1ecc;
}

This is the offending code.

Looks like it's ".rte a:not(.btn)" which has "text-transform: uppercase"

I actually use IE developer tools as it's got a slightly better user interface for this kind of thing than chrome - you can literally right click the element you want and choose "inspect" then turn off individual style elements

[url= https://i.postimg.cc/k4dCvg3C/2021-01-27-09-06-52-Window.pn g" target="_blank">https://i.postimg.cc/k4dCvg3C/2021-01-27-09-06-52-Window.pn g"/> [/img][/url]

this is the offending CSS class

Thank you so much!!! I’ll be back next time I get stuck, I’ve wasted hours on this!

Sorry, I'm still not managing to do this. I can see how to inspect and find the items now. But I can't see how to relate those items to the stuff on the server. How do I find out which CSS the web page pulls from?

it tells you which css file and even the line number.  In this case it is getting-the choices line 849.  If you hover over it you will see the full path

but.... beware.  Some of the files are scss rather than css.  You CAN alter the css file directly, and it's a quick and dirty way to do and will work, but the next time someone compiles the scss files it will overwrite your css files :(.  If all you are doing is keeping it going until you can get someone else to fix it later that is fine.  If you want to learn how to compile scss files down to css then Koala-app is a not bad way to get up and running quickly.  If you are comfortable messing around with css then you will be fine with Koala

Ok, I sort of understand but I'm still stuck. I have access to the text content of that page via a text or html editor but that just gives me the text plus basic line breaks and paragraphs etc.

That getting-the-choices line 849 doesn't seem to be accessible anywhere. If I go into "edit code" on the Shopify themes I can have all these templates:

404.liquid
article.liquid
blog.alternate.liquid
blog.feedback.liquid
blog.GX .liquid
blog.liquid
cart.elspw-json.liquid
cart.liquid
cart_elspw_backup.liquid
collection.2nd.liquid
collection.Bass.liquid
collection.Bass2.liquid
collection.Guitar.liquid
collection.GX.liquid
collection.liquid
collection.Speaker.liquid
customers/account.liquid
customers/activate_account.liquid
customers/addresses.liquid
customers/login.liquid
customers/order.liquid
customers/register.liquid
customers/reset_password.liquid
gift_card.liquid
index.liquid
list-collections.liquid
page.alternate.liquid
page.contact.liquid
page.Custom banner.liquid
page.feedback.liquid
page.GX.liquid
page.liquid
page.Meet the team.liquid
page.photos.liquid
page.Players.liquid
page.Team banner.liquid
password.liquid
product.12XN.liquid
product.Alnico.liquid
product.Baffle.liquid
product.BB.liquid
product.BT.liquid
product.Classic.liquid
product.Custom Bobb.liquid
product.EIGHT10.liquid
product.FOUR10.liquid
product.Grill.liquid
product.GX.liquid
product.GXII Speaker.liquid
product.GXII.liquid
product.GXiiHold.liquid
product.Heritage.liquid
product.liquid
product.Machinist.liquid
product.ONE10.liquid
product.One10T.liquid
product.Radical212.liquid
product.Reality.liquid
product.Reformer112.liquid
product.SC.liquid
product.Signature.liquid
product.simple.liquid
product.SIX10.liquid
product.SM.liquid
product.ST.liquid
product.Test.liquid
product.Test2.liquid
product.Tolex.liquid
product.TWO10.liquid
product.Unloaded.liquid
product.Uprising212V.liquid
product.Upsetter110.liquid
product.Usurper210H.liquid
product_elspw_backup.liquid
search.liquid
Add a new section
article-template.liquid
blog-template.liquid
cart-template.liquid
collection.liquid
collection-list.liquid
collection-template.liquid
custom-content.liquid
feature-columns.liquid
feature-row.liquid
featured-blog.liquid
featured-product.liquid
footer.liquid
Guitar.liquid
header.liquid
hero.liquid
image-bar.liquid
list-collections-template.liquid
logo-bar.liquid
map.liquid
newsletter.liquid
password-content.liquid
password-footer.liquid
password-header.liquid
powr-image-slider.liquid
product-custom-template.liquid
product-template.liquid
Product-template2.liquid
Product-template3.liquid
Product-template4.liquid
quotes.liquid
Reality.liquid
Reformer.liquid
rich-text.liquid
slideshow.liquid
Speaker.liquid
Upsetter.liquid
UpsetterProduct.liquid

But I can't find it in them... Dammit Jim, I'm a Mechanical Engineer, not a Computer Scientist!

My apologies, it wasn't in that file, that appears to be the text, I don't normally use shopify.

I'm not entirely sure what you are doing is the correct solution.  You have other pages such as this one

Ordering and availability – Barefaced Audio

that don't have that problem.  There is something about the styling on that particular sort of article that is causing the problem.  You might be able to fix it with css but that might also be wrong :(.  I have to say that I looked at the page and it really didn't bother me.  It might not be ideal but it really didn't register as an issue.  As you say, content over style

I was trying to use the “blog” section of Shopify but that’s a good point. If I create them as a different sort of page I can probably avoid the issue entirely!

I’ll give it a go!

it does look as though standard pages don't have that issue.  Check what sort of page I linked to earlier was

I'm just learning coding so just limited experience but I've been using codepen which has the screen divided so you write html in the left column, CSS in the middle and JavaScript in the right column. It might help to see in future any errors more clearly?

I also run Shopify sites... and have a third-party doing the heavy lifting on the development. As you have seen you don't have access to the CSS files directly in the Shopify code, probably because the third-party is generating them separately.

What you can do in this situation - an ugly hack, but it should (might?) work - is to insert a new CSS rule in the document itself. The point of CSS is that rules 'cascade' down so a rule defined early in the structure (e.g. by a CSS file loaded in the header) can be overridden by a more 'local' rule for the same element.

There's also a flag "!important" which can tell the web page to use this rule whenever there are multiple rules in force.

Hence, if you insert something like:

<style>
.rte a:not(.btn) {
line-height: normal !important;
text-transform: none !important;
}
</style>

directly in your page (within the <body> section), that may work... I'd test it myself, but I am on holiday and have no desire to fire up my work laptop and sign in...

FWIW
I know less than nothing about guitars, and even less than that about IT. However the line spacing in that blog article didn't offend my eyes at all. You may be overly critical of it.
This

I have to say that I looked at the page and it really didn’t bother me. It might not be ideal but it really didn’t register as an issue. As you say, content over style

Try not to use the !important tag, just add to your css selector, like so:

<style>
body .rte a:not(.btn) {
line-height: inherit;
text-transform: inherit;
}
</style>

Also, setting the line-height to inherit means it will use the same line height as parent elements. Same for text-transform.