Overwhelmed

[papermaker]

So, to give a little history — I am not creative whatsoever. This makes CSS extremely difficult for me and I’m a bit overwhelmed at the abundance of CSS that I have on my website: I would like to do some modifications but, I’m not even sure where I should start. I mean, would it just be best to start all over?

I’ve been reading over tutorials and help forums but obviously what has been coded already is beyond me. Any help/direction would be awesome.

[__]

I am not creative whatsoever.

Yeah, yeah, whatever. : ) Personally, I believe that anyone can find some measure of creativity if you just put forth the effort.

But, regardless:

CSS isn’t a “creative” language. It’s sets of rules. If you can describe the rules for how you want your site to look, then it’s just a matter of researching which properties and values specify that appearance.

I’m not even sure where I should start. I mean, would it just be best to start all over?

Unlikely… of course, you haven’t shown us anything. But, unlikely.

The very first thing you need to do is not ruin your existing site. People don’t think about this, especially beginners, but when you start changing things it becomes more and more difficult to get them back to the way they were if you change your mind, or if you really mess something up. Trust me, you will really mess something up.

So, don’t make any changes at all until you’ve made a backup of what you have now. Version Control software (e.g., git) is wonderful and powerful, but to start, simply copying your files and saving them somewhere else will do.

There is another advantage to learning CSS: your web browser. I prefer Chrome’s dev tools, but most browsers have something similar if you press [F12] (or, right click → “inspect element”). Up pops a new window, and you can add/change/remove properties and see the results in real time. You can even just toggle boxes oin and off to see what the existing rules/combinations of rules accomplish. Dev tools make no changes to your actual webpage, so try whatever you like with no worries.

For more specific experiments, use an online tool like jsfiddle or codepen. Put your HTML in the “HTML” box and your CSS in the “CSS” box. Couldn’t be simpler.

I’ve been reading over tutorials and help forums but obviously what has been coded already is beyond me.

Obviously, understanding the syntax (the rules about how to write CSS) is an important first step, so start there. There are some good beginner resources here on css-tricks. If you come to any specific questions, this is the place to ask.

[papermaker]

I was hoping to do the crash course and just figure things out as I go along. Actually, what I plan on doing is just writing a new theme while the current theme remains functional.. So, you’ll see me around here posting every now and then. :) Thanks for the response.

[__]

You’re welcome.

I was hoping to do the crash course and just figure things out as I go along.

That won’t work if you don’t first have an understanding of the rules and how they work. It would be like “jumping in” to trig without already knowing algebra, geometry, or basic arithmetic.

(Ok, it wouldn’t be that bad. But no, it wouldn’t work out very well. The point is you do need to know the basics before you can assume you’ll have any chance at picking up the rest “as you go along.” : )

You need to know:

• Syntax
• (the concept of) Cascading
• (the concept of) Specificity
• everything on a webpage is a rectangular box, nested inside (and sometimes hanging out of) other rectangular boxes
• basic typography concepts, like margins and padding, line-height, floating content

Understanding the ideas of making an element display as a “block”, “inline-block”, or “inline” is very helpful also.

The specific rules, and the effects they have, is something you can look up as you learn; ditto with more advanced patterns (combining various rules to achieve something more complex, animations, etc.), browser quirks, and so forth.

[Author]

Posts