What is css

What Is CSS?

June 07, 2018|CSS, Getting Started with CSS

CSS stands for Cascading Style Sheets. Let’s look at each word and what they each mean.

Let’s start with the “Style” part of Cascading Style Sheets.

Style

In HTML you’re writing what will be on the page. Is there a paragraph there? Add it to your HTML document. An image? Add it to your HTML document.

CSS determines how your content will look. This is what style is referring to in Cascading Style Sheets. That paragraph in your HTML document, the CSS can change the color, size, alignment, and so much more. It can also style the image - should it have rounded corners, have a shadow under the image. If you hover over the image should it move or have a border or maybe a shadow? And this is just scratching the surface, but you get the idea.

Here’s my current home page without CSS (only HTML): My current home page without CSS

And here’s that exact same page with CSS: My home with with CSS

You can see that in the first image you get all the information, the what of the page. In fact, you even get more content than what you see on the styled version because I have some content hidden using CSS. You can see in the second image how the CSS transforms the page.

Cascading

As you’re writing CSS it’s crucial that you understand that if two styles conflict the style lower down will override the styles higher up. The styles cascade as if water flowing down a waterfall. You start at the top and as you go down you grab styles. Let’s say you found a style for the font size of a paragraph at the top of the waterfall (or top of your stylesheet). Lower down you find another style that makes the paragraph much larger. The cascading nature of CSS will take the style lower down. It drops the style at the top of the waterfall and accepts the one lower down. It never goes back up, it only goes down.

Let’s say you have a paragraph. And you have these two lines of styles:

p {
  color: red;
  color: blue;
}

What color will the paragraph be?

You got it. Blue.

You can play with this very basic concept here.

The styles cascade so that if a style lower down conflicts with one higher up it will override the style up. Technically both styles need to have the same level of specificity in order for this to happen, but I’ll cover specificity in another post.

Just remember, that keeping all things equal, styles lower down will override styles higher up in the stylesheet.

Sheets

In most cases, CSS should be in a separate style sheet. What, there are other options? You betcha. Let me walk you through where you can add your CSS styles:

  1. In a stylesheet as is generally recommended.
  2. On the same page as your HTML document.
  3. Inline with your HTML.

Let me walk you through each of these and explain why a separate stylesheet is the recommended path.

Adding Styles Inline

As you’re writing your html you may be tempted to add styles right there with your content. Let’s say you have a paragraph that you’ve just added to your HTML document:

<p>Hello world!</p>

And you decide you need that paragraph to be centered on the page. You may be tempted to do something like this:

<p style="text-align: center;">Hello World!</p>

This is adding styles inline. And it works.

The problem with this doesn’t become apparent immediately. It really only takes a few pages and some changes for you to realize the problem.

Here are the 4 main problems as I see them with inline styling:

  • Much more time consuming to update styles that are inline because you have to hunt through all your HTML documents to find each instance of that style and update it.
  • It can result in much more CSS than necessary. If you need to center your text multiple times you’ll have to write that style multiple times. Instead you could add one class and then write the style once. Then you can add the class as many times as you want and you won’t need to add any more lines of CSS. This isn’t super apparent with this example, but trust me, it results in a lot more CSS.
  • Inline styles add a level of specificity that you may not intend. Once you become more advanced with writing CSS you will begin caring much more about how specific your styles are and how to elegantly override other styles. Inline styles are quite specific and require more specificity in order to override them. This results in bloated CSS.
  • The content (HTML) and presentation (CSS) are getting mixed together. This results in confusion and messiness as the size of your project grows.

Adding Styles on Page

You also have the option of adding a <style> tag inside the <head> of your HTML document. In-between the style tags you would write your CSS just as you normally would. If you were to do this your HTML document might look something like this:

<html>
  <head>
    <style>
      h1 {
        color: black;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>I'm a rock star. Love me.</p>
  </body>
</html>

Do you see how in-between those two <style> tags normal CSS is written?

You can think of that kind of like a mini stylesheet - and only for this page.

It’s better to write your CSS this way than to write it inline. The main reason this still isn’t the preferred method is that the styles you write for this page can only be applied to this page. If you have another page that would benefit from inheriting some of those styles you have to write them again.

Adding Styles in a Separate Stylesheet (Recommended)

That leads us to writing your styles in a separate style sheet. This is the recommended way of writing CSS. Your HTML document might look something like this:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>I'm a rock star. Love me.</p>
  </body>
</html> 

Notice in the head of your document there is a link tag. This has rel="stylesheet" which is a required attribute for the link tag. It is required because it’s explaining the relationship between your current HTML document and the linked document. In this case, it’s a stylesheet that you’re linking together.

The type="text/css" is clarifying what media type the browser should look for in order to read it correctly.

The href="styles.css" is indicating where the document exists inside your project. This suggests it’s in the same directory as your HTML document. The href might also look like this:

<link rel="stylesheet" type="text/css" href="styles.css"> 

So, why is this the recommended way of doing things?Well, there are a few reasons:

  • The content (HTML) and presentation (CSS) are clearly separated. It’s much faster to update either one, even if some time has passed since working on the project. You just know where to look for each one. It’s an established standard.
  • This results in much less CSS being written. You won’t have to repeat yourself as much. For anyone writing code you know the best practice is to keep things DRY or Don’t Repeat Yourself.
  • You can control the level of specificity of your styles. You can also have greater control over what styles will override each other. This reason alone is enough of a reason to separate out your styles.

Summary

CSS stands for Cascading Style Sheets.

  • Cascade: Styles lower down in your stylesheet will override styles higher up.
  • Style: Determines how your content will look.
  • Sheet: Your styles are placed in their own stylesheet within your web project.

Want to level up your CSS skills?

Sign up below to receive a CSS tip each week as well as access to my courses and articles as they become available.

I won't send you spam, promise. If it ever feels that way you can unsubscribe at any time.

Sign Up For Free

×

Sign In

×