What Is CSS?

CSS and HTML are like peanut butter and jelly. Like Barnum and Bailey. Like money and taxes. You almost never find one without the other.

HTML stands for hyper text markup language. CSS is a little less of a mouthful. It stands for cascading style sheets.

The most important part of the term is "style sheets." If HTML tells the web browser what a piece of content is - CSS tells the web browser how a piece of content should look.

If we didn't have CSS, Facebook would look like this:

And the Wall Street Journal would look like this:

Now, you could use those sites without CSS. But boy is it ugly. 

If HTML is like the studs of a house, CSS gives your house a paint job, carpet, furniture and decorations.

So how does it work? Just like HTML, the main concept behind CSS is really simple. A piece of CSS code has two basic parts, a selector and a declaration.

The selector tells the browser what part of the HTML page you are targeting. For instance, if you wanted to target every paragraph on the page, you would simply use this selector:

p


If you wanted to target every paragraph with the class of red, you would use this selector:

p.red


And if you wanted to grab all of the links inside of a paragraph with the class of red you would use this selector:

p.red a


After your selector, you put opening and closing curly braces like this:

p.red a {
}


And then inside of your curly braces, you put declarations. Each declaration declares a property, then has a colon, then you give that property a value and end with a semicolon like this:

p.red a {
color: red;
}


And you can have as many declarations as you want:

p.red a {
color: red;
font-weight: bold;
text-decoration: underline;
}


That is the basics of CSS. It's very easy to understand - but in practice, it takes a long time to learn all of the properties and how they interact on the page.

There is one more basic thing to understand about CSS and that is the C of CSS. CSS aren't just style sheets, they are cascading style sheets—and that's important.

What that means is that any part of your website can have multiple CSS rules that apply to it, and that there is a set cascade for how the rules are applied. I'm not going to get into it, but what this means is that when two pieces of CSS conflict, there are set rules in place for which piece of CSS wins and actually styles the content.

Just like HTML, CSS is a simple technology that we interact with every day of our life and most people never really think about. Most of the content you watch and the information you read has been styled for you by some web developer using CSS. Some people even make CSS artwork. CSS can be a lot of fun to learn and play around with.

If you are thinking about creating a software product and you feel overwhelmed by all of this tech stuff, then I've created a course just for you at softwarecrashcourse.com. It's seven free lessons where I share the best of what I've learned helping many apps get launched. Again, it's totally free, so go over to softwarecrashcourse.com today and sign up.


Receive great content updates from our team to your inbox.

Subscribe and Get our FREE eBook Guide to Planning Your Software Project