5 Best CSS-TRICKS Articles for Beginners
by Catherine Noel
What is CSS?
CSS or Cascading Style Sheets is a programming language that enables web developers to style their content. For example, if you wanted to have bold text you would write a CSS rule like the one below:
font-weight:bold;
Though CSS seems relatively easy, it can become fairly complex. You can even create still art with CSS.
Don’t know where to start in your CSS mastery? These few articles will give you a foundation to understanding how it all works. I know the start to a stylish journey with CSS can be intimidating, but once you learn these concepts, you will have a wealth of tools to find the solutions you need to implement your design.
I know the start to a stylish journey with CSS can be intimidating but once you learn these concepts, you will have a wealth of tools to find the solutions you need to implement your design.
display
Let’s start with one of our most commonly seen base styles on every page, display. The display property defines how an element on the page will show. This article details all the initial default values for each element in your web layout. Understanding how display works will allow you the flexibility to manipulate the way an element shows in its container.
Check out: Display CSS-TRICKS
position
Next up is the position attribute. This allows you to manipulate where the element shows on the page. This article outlines the 6 values of this attribute, how and why it is used based on whether you need your element to depend on the parent element or exist on its own. There are also a few CodePen examples to exercise with.
Check out: Position CSS-TRICKS
grid + flexbox layouts
There are two mighty layout systems to use with CSS. In many cases understanding, both systems will save you time and how you want to build out your web page or component. The key difference is that flexbox is one-dimensional and grid is two-dimensional. What does that mean, you ask?
grid gives you the opportunity to manipulate elements by arranging them based on rows and columns whereas flexbox doesn't have that much flexibility. The best part is that you can use them together!
Check out: A Complete Guide to Flexbox CSS-TRICKS + A Complete Guide to Grid CSS-TRICKS
BEM
Have you ever thought to yourself, “How do I determine a class name for this element?” Yeah, me too! BEM is a model on how to think about writing class names. Even if your team uses a different coding style such as camelCasing letters this will give you a baseline for how to frame your mind. Block, Element, Modifier model will save your from your philosophical question of naming conventions.
Check out: BEM 101 CSS-TRICKS
Without a doubt, after learning all this you must believe that CSS IS AWESOME!
