What is CSS: A Guide for Beginners

Table of Contents

• Meet Joseph: 
• CSS: A Brief History
• Who Uses CSS?
• Using CSS on the Job
• How to Learn CSS

How does a website get its style? CSS, of course! But what exactly is CSS and how will you use it as a developer? Joseph Mecham, Devmountain’s Web Development Program Director, explains (in fun, beginner-friendly terms) what CSS is, the history of CSS, how it’s used by software developers, how it works with other programming languages (namely HTML and JavaScript). Plus, get a sneak peek at where CSS is heading in the future. 

Meet Joseph: 

• Joseph is the Web Development Program Director at Devmountain (which teaches CSS!)

• His background in development spans over nine years. Joseph does not have a university degree; he learned HTML, CSS, JavaScript, and PHP in just two years at a local technical college.

CSS: A Brief History

What is CSS?

CSS (which stands for Cascading Style Sheets) is how front end developers apply style to HTML elements.

Let’s simplify the relationship between HTML, CSS, and Javascript, by way of analogy. Say you want to build a car out of HTML, CSS, and JavaScript. 

• You’d begin by using HTML to provide the basic structural components of the car: four wheels, windows, chassis, steering wheel, and so forth. We call these structural components elements. 

• At this stage, if we were to imagine this car were actually a website, our HTML would resemble nothing more than a sad-looking heap of disparate parts (or elements). Fortunately, browsers have a default style preset and the browser would likely interpret our collection of parts as a car. 

• Similarly, if you had a website with no default styling, it would be a wreck. This is where CSS comes in. You’d use CSS to say: "my wheels are black; two in the front; two in the back; my windows are clear; the steering wheel is black and goes on the driver’s side." CSS is used to control the layout and presentation of the car (or website). 

• Although your car looks great, it doesn’t move. Enter JavaScript. JavaScript gives you control over the car’s behaviors. Now you can open its doors, and turn the key and have its engine run. 

Where did CSS come from?  

Initially, HTML wasn’t intended to be styled at all. The initial HTML concept wasn't much different from opening up an encyclopedia or perhaps reading a hand-written letter – there was really no style. The most style that you would see in this context might be in a document like an  encyclopedia, in which there’s an image, and the image occupies a certain amount of space and the surrounding text wraps around it. In its first implementation, it seemed that was all HTML was for. 

Later, when people began to ask "how can I make my page look different" the answer truly was: "you don’t have much choice; it's up to the browser that you're using to determine what your page is going to look like.” People did try to achieve style using HTML, but realized early on that it wouldn’t work. Their HTML would be overloaded with attributes talking about style – and not about the actual content (i.e., style over substance). 

Eventually, in 1994, Håkon Wium Lie proposed the concept of Cascading Style Sheets and first implemented it. CSS was first adopted by the browsers Internet Explorer 5 and NetScape Navigator. In our world of browser wars, if one browser supports or adopts a particular feature, then others will adopt it too, just to remain competitive. Once one browser had adopted CSS, it was just a matter of time until competing browsers got on board also. 

Is CSS a programming language? 

CSS does do some pretty advanced things, but it’s not a “programming language” per se, because by itself, CSS is useless. If someone were to say "look at that green tea kettle over there", it would be an easy direction to follow, but if they were only to say "look at that green…" it would make very little sense at all. CSS defines, but on its own there’s nothing to define. 

Who Uses CSS?

Can you give us examples of companies who use CSS in their products? 

Simply put: if you have a website today, you're using CSS. 

Even a seemingly “unstyled” site like Craigslist still uses CSS. For reference, Craigslist is a good example of what a site without much CSS looks like. 

As someone learning software development, what are the advantages of learning CSS? 

You could learn HTML just fine without any CSS and that would allow you to build websites that were totally functional so far as being informational. But to have your website look any different to what the browser defaults to, you'd need CSS.

Even beyond that: element attributes such as "id" and "class"; these are really core concepts that you use regularly for CSS. They’re also crucial to using JavaScript in your website as well. What's nice about CSS is that once you’re familiarized 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: my suggested learning path would be HTML, then CSS, and then JavaScript. 

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

CSS is crucial for front end development. It's not crucial for back end development. One could be a back end developer and never know anything about CSS. 

But even for a back end developer, knowledge of CSS is helpful. Inevitably, you’ll be communicating with a front end developer, so knowledge of CSS definitely helps communicate what element on the page is going to be updated with the data that's coming from the back end. If you don't understand on a really basic level how to communicate some of the front end development concepts, you'll run into a roadblock at some point.

All in all, knowing CSS is useful to any developer working on a website.

Using CSS on the Job

How would a software developer actually use CSS in practice? 

The easiest way to conceptualize but least efficient way to use pure CSS is via inline style. 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. 

So why is inline styling the least efficient way to use CSS?

If the CEO of a well-known beverage company suddenly wants to rebrand his flagship product. He/she no longer thinks 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 we 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; . And 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 fry. We're only talking 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. 

Besides HTML and JavaScript, are there other technologies used with CSS? 

There's an application called Sketch that designers use to plan what a web application or a website is going to look like. Sketch uses CSS concepts so that when you're designing something, you can say that "I want all of my largest headings (or H1s) to have x font and x color. If you were a graphic designer ou UI designer and you were using Sketch, knowing CSS would definitely assist you. 

Are there different types of CSS? 

• There have been past versions of CSS. Currently we’re on CSS 3.

• There are also supersets of CSS, and this gets really fun. SASS and LESS are examples of these supersets.

Supersets add superior ways of working with CSS. When you use either SASS or LESS, they have to be compiled back to CSS so that the browser can interpret. There are currently no browsers that can parse through or understand SASS or LESS. What’s cool is that there are features of the two that have been so helpful that inevitably I hope you'll see these features become part of CSS. It's not that different to when jQuery came out and introduced a number of great ideas that have now being part of standard JavaScript.

How to Learn CSS

Why and how does Devmountain teach CSS?

Devmountain teaches full stack development (meaning that our curriculum covers both front end and back end development) 

• Why CSS? Because without CSS, front end developers would be left without a paintbrush. It’s crucial that they learn it. 

• How we teach it? As with everything at Devmountain, we teach at 200 mph, with copious opportunities for reinforcement through coding projects. Once students have been introduced to a concept, we have them revisit it again and again.   

What resources would you recommend to CSS beginners? 

• W3Schools is a really good place to start, I’d recommend it. They start with the basics and have great examples to learn from. 

• CSS-Tricks is an incredible website that really helps break down some of the trickiest things that can be confusing in CSS.

Find out more and read Devmountain reviews on Course Report. This article was produced by the Course Report team in partnership with Devmountain.