Glossary

What is CSS

CSS is what’s called a Cascading Style Sheet language, and is used to stylize elements written in a markup language such as HTML. It separates the content from the visual representation of the site.

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

Tags like <font> were introduced in HTML version 3.2, and it caused quite a lot of troubles for developers. Since websites had different fonts, colored backgrounds, and styles, it was a long, painful, and expensive process to rewrite the code. Thus, CSS was created by W3C to solve this problem.

The relation between HTML and CSS is strongly tied together. Since HTML is a markup language (the very foundation of a site) and CSS emphasizes style (all of the aesthetics of a website), they go hand in hand together.

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

CSS Advantages

The difference between a website which 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 with most of the text being blue and black. This means that the CSS part of the site didn’t load correctly or it doesn’t exist altogether.

That’s how a site with only HTML looks 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 you had to separately describe all the background, font colors, alignments, etc.

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

In short, with CSS 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 CSS Works

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 element 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.

Once you’re planning a website, make sure you’ve chosen the right website builder for it. Hostinger has to offer an easy builder with drag & drop tool. Create a website that looks great on any device, use one of the free templates we’ve collected in our base and go online with a blast!

Get Started

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 a 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:

  • CSS was created to work in conjunction with 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.

 

About the author

Artūras B.

Artūras is an experienced content writer that is working for Hostinger. Bringing in a lot of knowledge about WordPress and web hosting to the team, he strives to write pristine content about any IT related subject. He also loves dogs!

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in Glossary
What are WordPress Widgets And How to Use Them

Close