CSS is one of those things we see get thrown around but not really explained. If it does, we only get to scratch the technical surface. Over the years, CSS has grown from something that makes the web prettier into a tool that can be infused with user experience psychology and conversion inducing patterns. To add to it all, the differences in browsers and screen size requirements push CSS’ potential to be complex through requirements just a little bit further. Today, CSS is a melting pot of design, technical knowledge and personality codified. There is more to CSS than just changing background colors and wondering why things aren’t aligning as it should. CSS is a visual communication tool that often gets overlooked and glossed over because we’re too distracted by other things like JavaScript frameworks and libraries. And like JavaScript, we often pick up CSS with basic working proficiency and stop as soon as we achieve our immediate goals. As a result, we tend to ignore things like structure, architecture, cohesion and potential code growth across the application until it’s too late. But first, let us begin at the beginning. What exactly is CSS? CSS is an acronym that stands for Cascading Style Sheet. All browsers have a CSS interpreter where styling rules are applied to the corresponding elements. On a technicality, CSS is not a programming language. This is because the purpose of CSS is to style markup (aka HTML) for web browsers. HTML is merely a language that ‘mark up’ content — meaning that it gives the document a certain visual and structural formatting. Both HTML and CSS are declarative in nature. This means that it only describes things and doesn’t do any processing. When you write <h1>Title here</h1>, you are not programming anything in particular but merely declaring a piece of data to be shown. When you add CSS into the mix, you are telling the browser what the text between the <h1> tags should look like. There is no algorithm. No state storage. No dynamic elements as such. All that sits in the realms of JavaScript and has nothing to do with CSS. When browsers interpret CSS for display, it does so in a linear manner. This is because CSS is giving instructions to the browser which reads the file from top to bottom. When a rule is set and then modified further down the file, the browser takes the latest evaluation as the final result to be displayed on the screen. That’s what the C in CSS refers to. The cascade effect of CSS sets the browser to display rules in a successive and overriding manner based on when the rule physically materializes. Why does it matter? Learning CSS properly matters because it can mean the difference between your columns aligning as expected or three hours of trying to figure out why it’s not doing what you’re trying to tell it to do. While there are CSS frameworks and libraries available in abundance on the web, learning pure and vanilla CSS can make you a better front end developer overall. It gives you the ability to quickly spot potential issues and structure your CSS in a way that is scalable and maintainable. If you’re new to CSS, styling code can get messy very quickly — especially once you start working in teams and everyone has their own ideas on how things work. The next thing you know, your stylesheet descends into an all-out !important warzone. If you’ve had the chance to work with CSS, especially in a team setting, you’ll know exactly what I’m talking about. If not, then you’ve probably had (or will have) this battle with yourself at some point. CSS is everywhere and to be a true front end developer, one needs to truly understand the nature of stylesheets and their physical relationship with HTML. Unlike programming languages, we are CSS’s debugger. There are no error messages to help us understand the visual errors or why things are behaving the way they are. Why do user experience and digital design principles matter? When you learn CSS, you often only learn the technical side of it. However, the web is more than just a set of rules written to decorate HTML. It is a series of actions and interactions that melt together to help you make certain decisions. Sometimes it comes in the form of adding items to a cart. Sometimes it comes in the form of blog posts that amuses and educates. Sometimes it comes in the form of beautifully taken photographs arranged in an aesthetically pleasing manner. Writing CSS is more than just putting code into an editor. It is the act of encoding emotions and eliciting actions for the user to experience. Digital design principles borrow from printed theories and time tested to create a cohesive and aesthetically pleasing result. It is these things that give websites a professional and polished edge — a skill that also differentiates you from just being a front end developer. Final thoughts CSS is technically easy. There are a finite number of rules to understand. However, it is the potential combination of rules that makes CSS difficult. As visual requirements become more complex, creative but structured solutions are needed to keep the maintainability of your CSS rules in check. While the design aspects can be left to marketing and the UX designer, it is also good for front end developers to understand how design works. Not all designers are developers and sometimes we encounter those who don’t understand the finer requirements of browsers and pixel guidance. You need to be able to talk in design speak as much as digital designers need to learn the intricacies and potential complexity of stylesheets. Front end development is a cross-discipline field. It is not limited to just code and requires additional knowledge to make you an effective one. CSS is the thing that connects your user to the application on a visual level. It has a major impact on the final user experience score. Within a pair of curly braces, CSS has the potential power to determine if your users will continue reading or give up with the back button. It can also mean the difference between adding items to the cart and making a sale.
![featured image - What is CSS [Beginners Guide]](https://hackernoon.imgix.net/drafts/kq5m3yzf.png?auto=format&fit=max&w=3840)
