What is CSS: A Guide for Beginners

Table of Contents

---

• What is CSS?
• Where did CSS come from?  
• Is CSS a programming language? 
• Who Uses CSS?
• What does CSS look like? 
• What is CSS used for?
• How to Learn CSS
• Frequently Asked Questions (FAQ)

How does a website get its style? CSS, of course! But what exactly is CSS and how will you use it as a developer? In this guide, we’ll discuss what is CSS, the history of CSS, and how it works with other programming languages (namely HTML and JavaScript). Find out how it’s used by web developers and web designers, and why non-technical professionals may also benefit from CSS. If you’re ready to learn CSS, we’re sharing our recommendations!

CSS: A Brief History

What is CSS?

Cascading Style Sheets (known as CSS) is how front end developers apply style to HTML elements.

We’ll use an analogy to tie HTML, CSS, and Javascript together. Say you want to build a house out of HTML, CSS, and JavaScript:

• HTML would provide the basic structural components of the house: a frame, foundation, roof, windows, etc.
• At this stage, we’d have something resembling a finished house, but our HTML would simply be a bland, empty, unfinished pile of disparate parts (or elements). That no one would want to live in! However, the basics are there, and since browsers have a default style preset, the browser would likely interpret our building as a “house.”
• Comparatively, if you had a website with no default styling, it would be pretty much useless. Enter CSS. You’d use CSS to say: "the walls hold up the roof, my siding is beige, with brick styling in the front; my windows are clear glass and have green shutters; the main door is also green and opens in the front." CSS is used to control the layout and presentation of the house (or website).
• Although at this point the house looks nice, it’s not livable yet. Here comes JavaScript! JavaScript gives you control over the house’s interior. Now you can turn on the heating/cooling system, open the doors and windows, and turn on the utilities so that it’s a fully functioning house, ready to move in.

Where did CSS come from?  

Initially, HTML wasn’t intended to be styled. The first concept of HTML wasn't much different from opening up an encyclopedia or perhaps reading a hand-written letter. It provided information, but no style, other than maybe an image with the surrounding text wrapped around it. Later, people began to wonder, How can I make my page distinctive? However, they learned they really couldn’t, as the browser they used determined the overall look of their page. People tried to implement style using HTML, but quickly realized that it wasn’t going to happen. Their HTML would be an example of style over substance: overloaded with attributes talking about style – and not about the actual content. 

In 1994, Håkon Wium Lie proposed the concept of Cascading Style Sheets and was the first to implement it. CSS was then adopted by the Internet Explorer 5 and NetScape Navigator web browsers. Browsers are competitive, though, so once one browser supports or adopts a particular feature, then others will adopt it, too. Soon all the other browsers got on board. 

Is CSS a programming language? 

No. While CSS itself is pretty advanced, it’s not considered a “programming language” as it can’t function on its own. For example, if your friend said to you, “Look at that red car in the parking lot,” you would understand their direction, but if they merely said, “Look at that red…” you wouldn’t understand what they were talking about. That’s how CSS works: it defines other things, but on its own, there’s nothing to define.

Who Uses CSS?

Quick answer: every single website! Even a website without “bells and whistles,” like Craigslist, still uses CSS. If you wanted to merely use HTML to build a website, you could — your HTML-only website would be functional and provide information. But it’s CSS that gives a website a different look from what the browser you’re using defaults to. If you’re a web designer and you want to build a website that has both style and functionality, you need CSS. 

Element attributes such as "id" and "class" are core concepts that you use regularly for CSS, and they’re also crucial for implementing JavaScript in your website. Think about CSS as a foundation: once you’re familiar with its core concepts, you'll be able to apply that knowledge when you move onto JavaScript. CSS is one of the first things you should learn as a web developer; a good learning path would be HTML, CSS, and then JavaScript. 

And CSS isn’t just for web developers! Non-technical roles, like Project Manager, UX Designer, and Digital Marketer can benefit from understanding CSS. “Understanding CSS makes you more versatile and adaptable, which are highly valued traits in today’s job market,” says Rob Merrill, a LearningFuze instructor, “Even a basic knowledge of CSS can set you apart from other candidates by showing that you’re tech-savvy and capable of handling a wider range of tasks, which can be especially attractive to employers in roles where digital content or web presence is crucial. It also allows you to better communicate with tech team members which can lead to more efficient and stronger deliverables.”  

How important is CSS for front end development vs. back end development?

CSS is crucial for front end development, but not back end development, although it’s helpful to know. At some point, a back end developer will work with a front end developer, so knowledge of CSS helps communicate what element on the page is going to be updated with the data that's coming from the back end. 

What does CSS look like? 

The easiest way to conceptualize CSS (but the least efficient way to use it) is via inline style. As Joseph Mecham, Devmountain’s Web Development Program Director says, “It’s easy to conceptualize because you’re applying styles to elements directly as you write the HTML. You’d have an element and would write attributes specifically for that element – something like <p style="color: red;"> And what we're doing here is adding a red text color to our paragraph  element inline. However, doing it this way inadvertently fails to take advantage of one of the biggest benefits of using CSS: its re-usability.” 

Coding bootcamp graduates are regularly employing CSS in their projects. Valerie, a 4Geeks Academy graduate, says she started by building a static HTML/CSS postcard before elevating to creating an Instagram post using more CSS to improve its overall appearance. Jordy, a Coding Temple graduate, relied on CSS to help style his Python-based web application, inkVue.

What is CSS used for?

Let’s return to our expert. Mecham explains it this way, “The CEO of a well-known beverage company suddenly wants to rebrand his flagship product. They no longer think that the ubiquitous firetruck red color works and wants to shift to maroon – starting with the product website. We’re the development team responsible for making the change. 

• To dictate the color of our paragraph text, instead of telling each individual paragraph to have red text, we could – in the head of our HTML document – have an internal style sheet and in this case what we would do is say: I have a class called red-text which simply turns text to red: .red-text { color: red; }
• Now, for any of our HTML elements throughout our whole document, we can put the element class=”red-text” and they're all going to pick up that same styling that we put at the top of our document.
• Instead of going through the whole document, searching for every instance where it was specified that something would be red, we could make a single alteration to our internal style sheet and make a universal change. Where it says color: red; instead of red, we’d change that to color: maroon. Just like that, the text in every paragraph on the whole page would then be maroon. Efficiency goes through the roof!”

But this is “small potatoes,” Mecham says, “We're only talking about a single page here. Let’s take it one step further (and this is your ideal CSS setup): 

• If we had leveraged an external style sheet (instead of an internal style sheet), we would be able to have our entire 100-page website immediately conform to the new style, rather than just the one page.
• The beauty of CSS is this: we write once so we don't have to repeat. Remember: D.R.Y. (Don't Repeat Yourself).
• In code, as far as styling goes, this is the best way to utilize CSS; having shared classes used by all pages, and then only needing to change something once for it to change everywhere.”

How to Learn CSS

A great way to learn CSS is through a coding bootcamp focused on front end development or full stack development. When looking for the right coding bootcamp for you, consider bootcamps with great alumni reviews, proven student outcomes, and a strong curriculum. Some coding bootcamps like General Assembly, Codesmith, Tech Elevator, and Hack Reactor also offer free online workshops where you can learn the basics of HTML and CSS.

If you’re not ready to commit to a full-length coding bootcamp, you can learn CSS through on-demand courses and resources at online platforms, like Codecademy, W3Schools, CSS-Tricks, Udacity’s Introduction to Programming, or Coursera’s HTML, CSS & JavaScript for Web Developers.

Frequently Asked Questions (FAQ)