What is CSS and how does it work?

Cascading Style Sheets (CSS) is a rules-based programming language developed by the World Wide Web Consortium (W3C) in 1996 for a simple reason. The HyperText Markup Language (HTML) that is used to format and link to content on web pages was not intended to allow for advanced styling or layout capability.

For example, the introduction of the <font> tag with HTML version 3.2 was an attempt to allow for the styling of text, but amateur web designers abused it, and there were no fallback options like what is now available in CSS. The current best practice is thus to keep formatting (HTML) and styling (CSS) separate.

CSS is not technically a necessity, but a web page that features only HTML elements would look very plain and out of date. Read on to find out more about CSS.

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.

At some point, you might have seen a website that has failed to load completely but a plain white background with black text and blue underlined links. This means that the CSS part of the web page didn’t load correctly or it doesn’t exist altogether.

Before using CSS, all styling had to be included inline in the HTML markup. This means web developers had to describe the color, font size, alignments, and everything else for each block of text on the page.

CSS lets you stylize a list of design rules in a separate file that are referenced in the HTML markup. This makes the actual HTML markup much cleaner and easier to maintain.

In short, CSS removes the need to repeatedly describe how each individual element is supposed to look. This saves time, shortens the code, and makes it less prone to errors.

CSS also lets you prioritize multiple styles on each HTML page and even throughout an entire website, with exceptions for different screen sizes, making the possibilities for customization almost endless.

How Does CSS Work?

CSS uses a simple human-readable syntax with a set of rules that govern it. Like we’ve mentioned before, HTML was never intended to use style elements, it was only intended to describe the formatting of the text. 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.

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

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

p {
   text-align: center;
   font-size: 16px;
   color: pink;
}

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 – in fact, it is much like the inline HTML styles that CSS was intended to replace. 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 apply to all the pages on a site.
• You won’t go far without seeing some kind of CSS implementation these days – it’s almost 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