CSS: What You Need to Know
CSS is the code required to feed your design into the browser. Here’s what you need to know and why.
By Justin Dauer on January 29, 2020
How does a web page work? For every designer who isn’t also a front-end developer, that answer will be slightly different. But one thing is certain: at some point, you’ll need to understand CSS.
So, what is CSS?
CSS (Cascading Style Sheets) is the code that styles web content. It can control the layout of multiple web pages all at once.
External stylesheets are stored in CSS files. These files contain all the style information for a particular site — fonts, color scheme, layout options — which determine how each page will look in a browser. With an external stylesheet file, you can change the look of an entire website by changing just one file!
If you’re here, it’s safe to assume that you know what CSS is and how it works. But if you don’t, I’ll summarize it in a sentence: CSS is the code required to feed your design into the browser.
CSS is an important part of web design as a whole. It gives designers the power to precisely control their designs without having to master HTML coding. And as a result, we can quickly build websites that are adaptable and accessible.
Many designers use it every day to build beautiful websites, but they don’t understand how it works. They use tools like Framer X or Figma that compile CSS code for them, or they work with developers who write the code on their behalf. But whether you are working with a developer or not, understanding CSS allows you as a designer to iterate faster while maintaining control over your designs.
If there are any web designers reading this article right now, I can almost guarantee that at some point in your career you will be asked by a developer why you used such and such property in your design. This will happen because each property has its own specificities and implications for the browser interpretation of the design. If you have no clue about CSS,
CSS is the code required to feed your design into the browser. It’s not just a nice-to-have — it’s a must-have for anyone who wants to build their own websites.
As a designer, CSS can feel like a foreign language that you’re required to learn for some strange reason. But unlike high school French, you need to learn this language if you want to make your designs come to life.
You might already know some basic CSS, but this guide will help you understand how CSS works—and how you can use it effectively.
If you’re a designer who is used to pushing pixels around in Photoshop and Sketch, then adding CSS to the mix might seem like a confusing task. But it doesn’t have to be that way. In this post, I’ll explain why you need to know about CSS for good design and how to get started with some simple tips and tricks.
CSS: What You Need to Know
I’ve been a designer for over 15 years now. In that time, I’ve become pretty familiar with programs like Adobe Photoshop and Sketch. These tools are great for creating beautiful, high-fidelity designs. But they aren’t the only tools we designers need to use.
The other tool we use is HTML and CSS—the code that power our designs. It turns out, these two things are pretty important if you want your designs to actually show up on the web (or any device).
If you don’t believe me, try making a website without CSS or HTML. That won’t work so well now will it? But it isn’t as scary as it might sound. The key thing to remember is this: HTML and CSS are just another tool in your toolkit as a designer
As a designer, knowing how to use CSS is critical. It’s the code that makes your designs come to life in the web browser. In this article, we’ll cover what you need to know about CSS and how it relates to your design workflow.
What Is CSS?
It’s possible to design a website without touching a single line of CSS. But it’s not advisable.
CSS is the code that translates the designs we make in our favourite design tools into web pages that can be viewed in browsers on desktop and mobile devices, and even on smart TVs. This simple fact makes learning and understanding CSS important for designers, as it helps us to make better decisions when designing for screens.
This article will take you through the basics of CSS and clear up any confusion that may be lingering in your mind. It will also go over some of the more common ways CSS can be used to improve designs, as well as how it can cause problems if used incorrectly.
There are a lot of different ways to build something for the web, but most of the time you need some combination of HTML and CSS. HTML is the structure and content, and CSS is the presentation layer.
HTML describes the content and structure of your site. It’s intended to be mostly human-readable, while still being able to instruct a machine how to display it. When we say “mostly human-readable,” we do mean “mostly.” HTML can be pretty tricky sometimes, especially when it comes to the semantics of how you lay out your content (“semantics” meaning the best way to mark up your content). There are many good resources out there on best practices of writing HTML, so I won’t get into too much detail here on that topic.
CSS describes how elements look on screen. It allows you to style text (font size, color), images (height, width, etc.), add animations or transitions, and even change an element’s layout on screen. CSS has come a long way since its inception in 1996—it has grown from simple styling declarations into a robust tool for designing great user experiences on the web.
CSS is everywhere on the web; if you’re going to be building for it at all, you’ll need at least some