CSS: A Basic Understanding

What is CSS?

Well, it’s an acronym that stands for Cascading Style Sheets. But what is that?

Cascading Style Sheets are used in just about every website you see today. It is the language developers use to change the appearance of a website. If you picture a website being built like a car, CSS is the whole design element of the car. The color, the way the headlights and taillights look and function, the type of wheels, the interior layout and features, etc. CSS works hand in hand with HTML (which is much like the car’s frame) to create websites that are very versatile and aesthetically pleasing.

How does it work?

CSS uses classes to separate different elements of a website. Those classes are called within the HTML document, effectively changing the properties of whatever that element is. For instance, if you had the words “I know CSS” in HTML, and wanted them to be colored red, you would assign them a class and specify what color that class is in your CSS document.

Sample HTML/CSS code

The example above shows two separate documents, in case you can’t tell. The one on the left is the HTML and the right is CSS, and is a visual depiction of our scenario above. This, of course, is a very simple example of how CSS works, and an actual website’s CSS page contains MUCH more code. Other attributes can be added to the “smart” class, such as: background colors, borders, margins, fonts and font sizes, etc.

In summary, CSS is a powerful language that can turn a bland looking, black and white text into a colorful, unique calligraphy. It can change where things like pictures, text, tables, borders, etc. are placed on a page. It can also change background and text colors, opacity, and even transform elements on a page to do different animated effects.

If you’re interested in front-end development, learning the ins and outs of CSS are a must!