What Is CSS and How Does It Work?

CSS was developed by W3C (World Wide Web Consortium) in 1996 for a rather simple reason. HTML element was not designed to have tags that would help format the page. You were only supposed to write the markup for the web page.

Tags like <font> were introduced in HTML version 3.2, and it caused quite a lot of trouble for web developers. Due to the fact that web pages have different fonts, colored backgrounds, and multiple styles, it was a long, painful, and expensive process to rewrite the code. Thus, CSS was created by W3C to solve this problem.

CSS is not technically a necessity, but you probably wouldn’t want to look at a web page that features only HTML elements as it would look completely bare-boned.

Download complete CSS cheat sheet

Cascading Style Sheets Explained In a Video Tutorial

Find out more about CSS and how it works by watching this video tutorial.

CSS Advantages on Web Pages

The difference between a web page that implements CSS and one that doesn’t is massive and surely noticeable.

You might have seen a website that fails to load completely and has a white background color with most of the text being blue and black. This means that the CSS part of the web page didn’t load correctly or it doesn’t exist altogether.

That’s what web pages with only HTML look like, and I think you’d agree that that’s not very appealing.
Before using CSS, all of the stylizing had to be included into the HTML markup. This means web developers had to separately describe the background color, font size, alignments, etc.

CSS lets you stylize everything on a different file, thus creating the design there and later on integrating the CSS files on top of the HTML markup. This makes the actual HTML markup much cleaner and easier to maintain.

In short, with CSS features you don’t need to repeatedly describe how individual elements look. This saves time, shortens the code, and makes it not as prone to errors.

CSS lets you have multiple styles on one HTML page, therefore making the customization possibilities almost endless. Nowadays, this is becoming more a necessity than a commodity.

How Does CSS Work?

CSS uses a simple English based syntax with a set of rules that govern it. Like we’ve mentioned before, HTML was never intended to use style elements, only the markup of the page. It was created to merely describe the content. For example: <p>This is a paragraph.</p>.

But how do you style the paragraph? The CSS syntax structure is pretty simple. It has a selector and a declaration block. You select an element and then declare what you want to do with it. Pretty straightforward, right?

However, there are rules you have to remember. The structure rules are pretty simple, so don’t worry.

The selector points to the HTML elements you want to style. The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Let’s look at an example:

All of the <p> elements will be colored blue and bolded.

<style>

p {
 color: blue;
 text-weight: bold;
}

<style>

In another example, all <p> elements will be center-aligned, be 16x wide and pink.

<style>
p {

   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>

See our CSS cheat sheet for more examples.

Now let’s talk about the different styles of CSS. They are Inline, External and Internal.

Internal, External and Inline CSS Styles

We’ll go over each style briefly, for an in-depth explanation of each method, there will be a link below the overview.

Let’s start by talking about the Internal style. CSS styles done this way are loaded each time an entire website is refreshed, which may increase loading time. Additionally, you won’t be able to use the same CSS style on multiple pages as it’s contained within a single page. However, this also comes with benefits. Having everything on one page makes it easier to share the template for a preview.

The External method might be the most convenient one. Everything is done externally on a .css file. This means you can do all the styling on a separate file and apply the CSS to any page you want. The External style might also improve loading times.

Lastly, we will talk about the Inline style of CSS. Inline works with specific elements that have the <style> tag. Each component has to be stylized, so it might not be the best or fastest way to handle CSS. But it can come in handy. For example, if you want to change a single element, quickly preview changes, or maybe you don’t have access to the CSS files.

For more information about the different styles of CSS, see our in-depth article here.

Conclusion

Let’s sum up what we have learned here about CSS and how it helps with the aesthetic of web pages:

• CSS was created to work in conjunction with other markup languages like HTML. It is used to stylize a page.
• There are three styles of implementing CSS, and you can use the External style to accord multiple pages at once.
• You won’t go far without seeing some kind of CSS implementation nowadays since it’s as much of a requirement as the markup language itself.

All in all, we hope you found this article helpful, and if you have any questions, please leave them in the comments section below.

What Is CSS FAQ