Stop struggling with CSS — in 5 minutes or less
CSS is like that misunderstood cousin at a family dinner, they’re always invited but people either get them or they avoid them. In my 4+ years of professional development, CSS is something that I’ve seen people either fine with or hate passionately and avoid like mosquitos. But honestly what I’m here to express is that it’s quite easy to use CSS effectively, and I can teach you in this 5 minute read. If vertically and horizontally aligning elements is something you ‘kind of’ know how to do, this article was made for you.
What to expect in this read:
- A breakdown of need to know CSS concepts
- An answer to “should I just take a course on it?”.
Key concepts to pro CSS-ing
When it comes to being a pro with CSS, orientation and positioning of elements is the foundation to any real styling. If you’re able to properly orient elements the amount of time you spend CSS-ing will be reduced drastically.
Elements and their children
The first thing to understand is the relationship that elements have with their children. A lot of positioning of an element comes from what it inherits from it’s parent.
For example,
<style>
.text-container {
max-width: 650px;
}
.text-class {
width: 100%;
}
</style>
<div class="text-container">
<p class="text-class">I'm new text!</p>
</div>In the above snippet of code we have a parent element <div class="text-container> wrapping a child element <p class="text-class">. The parent class has a max-width of 650px. When we tell the child p element to take up 100% of the available width it will only take up 650px of space, because it’s size is limited to the scope of it’s parent.
This concept is straight forward, but can quickly because complicated depending on the number of child and parent elements you have. Thankfully though the browser’s inspecting tool is extremely helpful when building.
Inspect your page!
Browser’s have built in developer windows to help you see your code’s layout, you can even style in the browser. Leveraging this tool is a need to know fundamental. Even if you know what you’re doing having a visual composition of your HTML makes working much easier.
It’s easy to use too take a look at this:
Once you have begun inspecting you can hover over specific elements to see the elements layouts, positioning and styling.
Use Flex Boxes
In terms of CSS-ing, flex boxes can take you from a game of checkers to chess. You may use some sticky positioning here and there but personally understanding how to use flex boxes was my biggest turning point with CSS. When I got good at flex boxes I build a new personal site, not because I “needed” to but because I thought the entire process would take me less than 2 hours (and it did).
Rather than explaining Flex Boxes I am going to direct you to my favourite interactive game that will teach you everything you need to know in minutes.
Sticky Positioning
Generally I think it’s best to stay away from the position CSS method, but it is useful if you want to make something like a sticky header while a user scrolls on your page.
W3Schools does a good job in explaining how this works in this example:
Should I take a class to learn CSS?
If you are completely new to HTML and CSS then I would recommend taking a course. The tips above are great, but they do not replace fundamentals. I would highly recommend the following course on Udemy, it walks you through the key concepts of HTML, JavaScript and CSS.
https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3
Best of luck on your development journey!
and Happy Hacking :D!
