I don't understand CSS?

I don't understand CSS?
0

#1

I mean I can work with it, go testing and positioning stuff but the point is most of the time I have no idea what I am doing. I’m just testing and checking if it works.

any tips?


#2

css

Some people are here are wizards with it though, so I’ll leave the helpful responses to them.


#3

`You can try other methods of learning CSS, like another programming course`


#4

@ArielLeslie I wish I could give you more likes, that gif is perfection.

@emersonlbr I’ve been working with CSS for a long time and I’ll STILL get hung up every now and again. It’s especially fun when you’re trying to get each browser to display relatively the same way (cause they all have their quirks you need to work around). My advice is to build up your own personal CSS bag of tricks and practice and perfect them as much as you can.

By that I mean, techniques that you use on the regular: centering things, floating things, building responsive layouts (mobile first is usually the way to go), styling a navigational menu, styling fonts, responsive images, etc. Eventually you’ll be able to predict (for the most part lol) how something will behave when you put a certain style on it. Which is a huge help when it comes to debugging. Again, sometimes I still will get tripped up and it’s usually something stone simple that I’ve left out. And as you go along you can add more advanced tricks to your plate.

My other tip is build habits in your style sheet. Like for example you could always declare widths and heights at the very top of a particular styled element, next padding and margins, maybe then font-stylings or background stuff, etc. Having a consistent way you lay stuff out helps you catch bugs or missing necessary styles faster.

Another example is if you’re working with media queries, some folk like to put them right under the initial element they’re styling, some like to stick them all at the bottom (which is my preference personally). It’s up to you, but whatever you end up doing, remember to be consistent with it.

Don’t be afraid to comment the heck out of your sheet either, I make a little reference section at the top with regularly used colors or styles and an index with section abbreviations (if it’s going to be a long sheet) that I can Ctrl + F/Command+F and go right to that section rather than scrolling down lines and lines of code:

/* ========

Index 

NAV - main navigation 

LAND - Landing page styles

MEDIA - Media queries

========== */

/* ==========

Color References

Main Body Background: #fefaf1
Upper Body/Specials Background (Brown): #2A1A0A
Font color: #2A1A0A
Link Hover Color/Menu Button Color: #5cb7c4

========== */

...
...
...

/* MEDIA */

@media screen and (max-width: 768px) {

#contact{
		max-width: 500px;
		padding: 0 5%;
}

}

#5

I think the key to being happy with CSS is to find solutions that work for you. CSS is indeed very frustrating to work with at times, and it doesn’t help that we get bombarded with advice like “Flexbox is king” and “Grid is the new Flexbox” etc… Just like JavaScript, there are several ways to code your CSS to arrive at a similar solution. If you don’t want to deal with the nitty-gritty of it then a library like Bootstrap or Foundation or Materialize will probably make your life easier. On the other hand, if you want to do it vanilla-style and have a strong foundation then pick one layout model (whether it is Block or Flexbox or Grid) and learn it well and get comfortable with it. Familiarize yourself with Media Queries as they are super useful. Maybe learn some basic animations which will make it fun to learn CSS. Practice on simple layouts and play around with your CSS. There is no easy route. The CSS spec is HUGE. Explore it. Have fun with it. Discover new properties. Explore other people’s code on Codepen and see what they do. Also, I suggest learning SASS which is a preprocessor for CSS. With it you can use variables and many other goodies to save you time and effort (mostly avoiding repetition). There is lots of repetition in plain CSS. I’m just getting started with SASS.


#6

Hi Emerson

In my opinion it is key to understand what you’re doing with css.

Although Bootstrap and other front-end frameworks/grid systems are very helpful and need less understanding, crazy designs won’t be able to be done without your input.

Try to avoid positioning and use float as much as possible. A website consists out of a bunch of blocks and as long as there is no block above another, you shouldnt use positioning. The only exception I can think of is putting an element exactly in the middle of a parent object. Next to this there are just some tricks to learn.

With a good css reset (eric meyer’s is very known) and good semantic code (bem structure is interesting) you will have almost no difference between browsers. (Frameworks should already have a reset built in)

Im starting to get a bit rusty but a few years ago I could very often build up my complete css file without looking once at the result. This requires some exercise but mostly understanding. It can be helpful to draw blocks on your design to see the bigger picture.

One last tip… if you ever struggle with the z-index after absolute positioning, be sure that the element that doesnt seem to react doesnt has static positioning (default). :wink:

To get a better and more specific reply, you could maybe say what properties you dont get.

Dont give up and good luck.

Pnoia


#7

to me the trick is reading the specifications, or looking for learning methods that rely heavily on the theory.

It’s far simpler to understand positioning when you know about the flow. Z-index when you understand stacking context, dimensions by learning what the different display modes do and how the box model works, and guarantee the application of just the right rules by mastering the cascade and specifity.

CSS is actually really easy compared to actual programming languages, but it’s simplicity also means most courses glance through it showing how to achieve a certain effect, without taking the time to truly explain the theory, which is the WHY you do what you do. And without that, you’ll be lost as soon as you want to do anything different, even in the slightest change.

So focus on the theory, and everything will suddenly make sense


#8

CSS is like chess. The rules are simple. Each property, does only one thing (or adjusts only one thing based on the value you gave it). It’s as simple as that.

But like chess, just because the rules are simple doesn’t mean it’s an easy game. To be good at chess, you must know more than just the rules. There are some patterns, typical ways of doing things, habits, strategy, logic (not in a programming sense, but in layout and positioning-wise.) How does one become good at chess? By practice.

Same with CSS. Practice, practice, practice.

CSS is not programming/coding. CSS is leaning more towards “design”, aestethics, looks, and form. Knowing what color combinations look good. Having a feel for what kind of spacing is good or not. Having a good gut reaction on whether a design looks good or bad.

And in some ways, coding is easier to teach than “design”. With design, some either have it, some don’t. Some seem to have a natural ability to make beautiful designs. Some just have an inherent style, and some – well, no. One can try to learn it and improve over time. But some people are just good and seem to have an “eye for design” from day 1. It seems unfair sometimes.

So is it hopelss that one can’t be a CSS grandmaster? Nope. The only way to be good at CSS is to make lots of mistakes, make lots of bad design, make lots of bad looking pages and learn from them. Then look at other’s beautiful designs/layouts and study them (not copying the code), but analyzing why it is such a beautiful design. CSS properties are simple. The hard part is combining them to come up with a beautiful design. – and that just comes with practice after making lots of bad design.


#9

WikiHow articles can help you.


#10

As someone who started learning to build a basic HTML site over 15 years ago, and then didn’t do anything else until ~5 years ago, I am a big fan of CSS.

You may not be aware, but previously you had to use tags like <font> or <b> and set `color="#ff0000" for every element you wanted red.

When I cam back to developing, and I came across CSS, I was amazed! Writing one bit of code that set all of my paragraph (!) tags the same font and colour was a revelation!

I’d suggest going back to one of the very early challenges, and trying to write it all with in-line styles. So giving every <p> tag the font-family, height, weight, colour etc you want, along with setting all of the padding & margins manually.

Then repeat the task, but copy the code, and past it into a CSS file. So delete all of the “font-weight:bold” tags from your paragraph tags in your HTML, and set `p { font-family: ‘serif’; } etc and see exactly what it is that the CSS is doing.

It might give you an appreciation for what it is, and how much simpler it makes life.


#11

Your first statement isn’t quite fair, if something sucked in the past it doesn’t mean that being better now makes it ‘good’ or perfect. CSS is far from it. it often doesn’t make sense. But flexbox and grid are here to make our lives a little bit easier :face_with_monocle:. I hope CSS continues to improve.

Thanks for the suggestion! I really think that understanding CSS is like all about trying things out and checking if it works. it applies to coding in general though. :sweat_smile:


#12

I’m not sure where I said anything sucked or was better now?


#13

The best way to learn CSS is to debug some others code and try to find the best way to solve the problem without major changes.


#14

It’s the paint and the html is the pencil drawing. I suggest learning CSS grids https://www.youtube.com/watch?v=HgwCeNVPlo0&scrlybrkr=b14a4a83


#15

Hello, guys. I really want to say thanks to all responses here. It helped me a lot. I felt frustrated with CSS, but now I will try to approach it from a different perspective.