Difficulty of learning CSS

I’m having a hard time getting CSS totally down. I understand how it works, but putting it into practice is another story. I worked on the first project which is a profile page and I found myself having problems where text on the page would look bad against the background because I had one div within another and on the inner div I set it up so that it was a darker color and the outer div was a white background. But where the text started on the left it didn’t look right, Is the only way to fix it is to change the width of the box so the text isn’t rubbing against the edge of the div? I’ll make an example of what I’m talking about and update this post to show you what I mean.

Update: I forgot how to change it back to the way it looked before. I’ll have to work on this and try to fix it to look like it used to. I’m such a noob at this.

I deleted a lot of stuff to get this to show, but if you look at this and you will see. https://codepen.io/dabigin/pen/ExyoBeE

This is the completed profile page, granted I’m still new and I’m going to work on the styling of the page in order to make the page look better.

1 Like

An example would be nice. Might just need to give the container element some padding?

Hey @dabigin. This is not something you only experience. Every dev in this world (me too!) experience difficulties with CSS. It’s sometimes so cool, whereas sometimes it plays as if it is mad! Still, I am able to make really cool webpages.
The thing you need to understand is that you need to learn the basic stuff of CSS, then try experimenting with it. After some time, you will understand what type of CSS code you should write and you will fell in love with it.
If you think the text is not readable, change the color of it! If you think the div doesn’t have any space, add padding to it!
Come on man! CSS is kind of crazy, but you should master it no matter what.

my original post has been updated.

I just don’t entirely understand CSS. Its easy to type in what’s required on a lesson, its another to know what to do when you decide to make something. I’m trying to learn the basics real good because I did a Udemy course and I got confused easily because it tossed Bootstrap at me right after the videos went over HTML and CSS. Don’t even get me started on JS.

1 Like

I think you are saying that you don’t understand which properties to use at the correct time. For that, you need to know the objective of individual CSS properties. For example, if you want a box to have a little bit of space inside, you can use the padding property. If your box needs space outside, you need to use the margin property. If you want to align text, you need to use the text-align property. So, look at the meaning of the properties. That will help you write better code.

Please only focus on one language at a time. Don’t learn front-end languages unless you learn the base language of it.

Happy CSS!

I know of hose properties, its just where you apply them. If you look on the completed page you will see that the width of the UL element in the CSS had a width set that put everything in the middle of the page. Before that I was just using p’s to do the text, and I wanted it aligned on the left, but it didn’t look right. It looked how it’s shown on the problem link. Remembering how to set every property so that it looks right will take me some time to learn. I’m just taking it one step at a time right now.

1 Like

The max-width auto margin would work on paragraphs as well, you just set it on the paragraphs (or give them a container and it would work like the ul/li example).

Some options:

  1. Put padding on the container to push elements inside it away from the edge.

  2. Put margin on the elements inside the container to push the elements away from the edge.

  3. Use width/max-width and an auto margin on the elements inside the container.

  4. For inline-block elements and text using text-align: center on the parent will work (centering elements moves them away from the edge). But it depends on the width of the elements and/or the amount of text.

  5. Use flexbox or grid on the container and one of the space distribution methods that will move child elements away from the edge (e.g. justify-content: center).

In the end, which method you will use is context-specific.

It is totally normal that you don’t totally understand CSS. It is a very complicated system with many moving parts, each of which can potentially affect each other. It also has many legacy parts which have since been superceded by new implementations–so there are often multiple ways to do something, which usually have slightly different behavior.

Basically, if you simply accept that it’s a complicated and large body of knowledge, and set about learning it consistently, you will eventually get it. But if you expect that you’ll learn it in a few days or weeks, you’re bound to be disappointed.