What is the best way for “normal” powerusers (those with no coding experience and minimal knowledge of html) to learn CSS?
I am a researcher, writer, and teacher and use markdown in lots of apps (Obsidian, Ulysses, iA Writer, Marked2 ect). I’m continually in situations where I need to modify CSS. I can tinker with snippets but I’d like to get the bigger picture. I don’t want to write this stuff from scratch but have a good understanding of how it works.
Does anyone have any recommendations on how to learn this stuff (I’m thinking 10-20 hr investment.
I frequently turn to the W3Schools CSS tutorials for reference. They are not 100% comprehensive – but cover the basics and much more, with the benefit of interactive examples. Another option is the CodeAcademy CSS course.
Get a CSS editor. I use Espresso – it’s included with Setapp – but there are lots of alternatives.
Set up a project to experiment with and test the effect that CSS can have on an HTML page. Editors such as Espresso that have both editing and preview modes can help with that.
CSS is very powerful, but can be daunting if you are working with a complex CSS file. It is not a highly structured tool. If a CSS file does not have any comments or is not arranged in logical chunks it can take effort to chain through the cascading relationships between elements. To some extent the “Show page Source” option in Safari’s Develop tools (or similar in other browsers) can help by highlighting what CSS elements affect what portions of the page. The downside is sites like this MPU one, where the bulk of the CSS is machine-generated and is almost unreadable in raw form.
I’ll second what @anon41602260 said: get a decent editor, get familiar with a reference of some sort — there are a million online if you Google “CSS tutorial” or similar — and, most importantly, find a project that really matters to you. Then experiment.
One challenge is that CSS was created as a tool for styling websites, but now it’s used to define styles in all kinds of other situations. As a result, a web CSS tutorial might not be what you need.
Fwiw, it can be incredible satisfying to get something looking how you want … it can also consume huge amounts of time when things don’t look quite right…
As a self-learnt web developer, I can recommend tutorials from Mozilla Developer Network’s Web Docs. You can find the one specific to CSS in this link: CSS Tutorials - MDN Web Docs.
To grok CSS, I think the simplest path is to create something simple. Maybe an empty webpage with:
2 lines of text with custom fonts (from local file, or from Google Fonts repository) in upper middle
custom background colors (that maybe can change based on PC’s light/dark mode)
a plain box with certain color, that you put exactly in lower left, following the screen even when user scroll.
You will learn about what is index.css, and how you can add CSS inside index.html file
You can use simple plain-text editor like TextEdit or BBEdit (free version is enough). Then you’d edit local index.html file with <style></style> element inside <head>, then open the html file in browser. Also regularly press ⌘R to refresh the local page each time you make a change
Browse your problem you encounter with Google / DuckDuckGo. You might often find solution in articles by CSS-Tricks. They provides great articles, and often includes interactive example you can edit and interact with.
A +1 on W3School (link in @anon41602260’s reply). Just go down the sidebar through each section and you will pick up enough to do some reasonably sophisticated layout in CSS.
I would also strongly suggest reading up on the DOM and layout model for HTML rendering. To effectively use CSS to lay out a web page, you need to understand the layout model so you will know, for example, what the difference is between margin and padding so that you can make your elements appear the way you want them to.
My “personal home page” which is basically al layout of links I use on a regular basis, laid out in sections which themselves can contain multiple subsections as well as links, utilize multiple columns in the layout (but subsections don’t break across columns), have headers with rounded corners, etc, is all layed out using CSS, and much of what I did was learned from W3Schools with a little bit of extra googling when needed. Without understanding how HTML is layed out, however, I would not have been able to make headers and section bodies (which also have rounded corners for example) line up properly.
I wouldn’t expect Tailwind to work if using CSS plugins to style existing software, since you wouldn’t be able to change the markup.
Many good recommendations to learn here. Basically you need to wrap your head around the layout/box positioning and spacing model, and text/row height, and then just about everything else you can look up as you need it.
Probably not exactly what you’re looking for, but https://jsfiddle.net/ is a useful browser-based tool for testing HTML / JS / CSS in real-time. If you have your own code that you’re trying to get working correctly, you can copy/paste right into the webpage and play with it.
