What is CSS and why it matters

CSS stands for Cascading Style Sheet. Not so illuminating as you had hoped? Well, let’s take a look if we break the definition down to the important elements:

“Style sheets have actually been around longer than the internet.”

So this is about Style Sheet – CSS. This is useful as a starting point, since we have known style sheets already at the time when the web still had to be created.

Back in the old and golden days of the world of business, style sheets were quite literally sheets (or more often, documents) that were describing, in excruciating detail, how all documents created by, or used for, a specific company should look.

A style sheet dictated exactly the typefaces that need to be used in press releases, what specific colors must be used in the masthead, where the logo must be placed, and whatever other elements you could imagine (including many you even couldn’t imagine).

If you use CSS, you can, for example, say something like ‘All of my paragraphs must be indented one inch’, and ‘All must be in 12-point double-spaced Comic Sans’, and ‘Have all lime-green backgrounds’.

A Style Sheet was the best way to maintain consistency in a wide range of applications and documents created by whatever number of writers. The production of individual documents was of course disparate, but style sheets created a cohesive, consistent whole.

Style Sheets in the internet sense of the word are serving exactly the same purpose. CSS is existing in a document (or a number of documents) for the sole purpose of creating cohesiveness and consistency across a number of posts or pages.

Sure, I wouldn’t really like you to all this stupidity, but that’s not the point. The point is just that the potential to do it is there. You just set up the rules you want in your CSS, and there you go! All paragraphs across your website can now instantly look exactly the same, regardless of how many posts and pages there are. Now that’s what I call a powerful tool!

So you see that CSS is a very powerful tool with some very powerful functionalities. CSS lets you create one single style sheet and implement, from that document, a seamless great brand consistency throughout your website, and across any number of pages and documents.

And CSS’s functionality comes with some more has hidden benefits! When you, for example, have a website that runs CSS, and all of a sudden you think: ‘Comic Sans is not the typeface I want to use for my legal documents’, all you need to do is make just one change in just one document, and the problem is gone.

How Does CSS Work?

When using and writing CSS, there will be many times that some rules that are written conflict with one another. For example, when you style headers, all of the following rules may be applying to an h1 element:

  • An element-level rule that creates a consistent h1 rendering on all posts and pages of the website.
  • A class-level rule that defines the rendering of h1 elements that occur in certain locations, for example, all titles of the blog posts.
  • An id-level element that defines the rendering of an h1 element that’s used in only one place on one or several web pages – for example, the name of the website.

How can developers write rules that will be general enough to be covering every h1 but that are specific enough to be able to define that the styles only will appear in specific situations, or on specific instances, of any given element?

CSS styles are following two distinct rules that you really must understand if you want to write effective CSS. If you understand these specific rules, you may be able to write CSS that will be broad when you need to want it to be, yet highly specific at times when you want it to be.