What is Cascading Style Sheets (CSS)? Explained in Detail

CSS

Welcome to your first ever article on CSS and this is a part of an ongoing web development series. Now if you do not have a solid understanding of HTML you should learn it that’s kind of a prerequisite.

Now that we already know basic HTML and if you don’t know anything about HTML then I would strongly recommend that you should learn it. Because understanding HTML is very crucial for learning CSS because we are introducing some new HTML elements in this article and the reason is they go hand in hand together. So it didn’t make sense to discuss the HTML for beginners because they really work hand in hand with CSS so that why you are going to need this.

What is CSS?
Here is the dictionary version: CSS stands for Cascading Style Sheets (CSS). It is a style sheet language used for describing the look and formatting of a document written in a markup language.

It adds style to your HTML.
Can completely control how your web pages look without changing your HTML.
And the nice thing about it is that you can completely control your web page. And how it will look with this CSS.

Let’s discuss an analogy about how changing your HTML into comes handy.
Analogy:- Imagine you build a fence. The fence would be your HTML. But the fence is unpainted. So in order to add color to it, you need paint. So paint would be the CSS in this analogy. It adds style to our Fence.

You can use this same analogy for a house. Imagine you build a house and you require to style it like painting it inside and exterior and you need to add furniture and paintings on the wall and all sorts of things that add style to the house.
So that’s a good way to think about this.

Lets open up a notepad we are going to use some of the source which we have used in HTML:

<!doctype html>
<html>
<head>
</head>
<body>
<h1> The web hosting website</h1>
<p> Welcome to the web hosting website. Everything you want to know about web hosting is in this website.</p>
<h2> This is a section on Shared Hosting</h2>
<p> Shared Hosting is cheap</p>
</body>
</html>

Lets go ahead and add some CSS code to this HTML code and what would we are going to go ahead and use here is the “style” element. It is just :<style> A element that’s simple and you will notice when you put in this in the <head> element. So this is how it goes in the above document

<head>
<style>
</head>

Just remember it is not actually content , actually just styling some of the elements in the body.

Remember we are going to give color to it actually.

So lets go ahead and add a code and it will be:
<head>
<style>
</style>
</head>

The style element is an HTML element we put it in as CSS inside here but this is actually an HTML element.

So all our CSS that we are going to code will go inside <style> and </style> element everything.

Also, it is important that there is another way to do this. Let’s save this document which we have already saved it as an HTML document.

If you look at the page without CSS. Open IE and you will see no color is added there. Now close it and go back to the source code.

Select the element that we want to style and it is <h1> which we are going to select.
Go up to
<style>
h1
</style>

Now, this h1 we need to select and what we are going to do and telling CSS that this is the element which we want to style. So just type in h1. No need to use angle brackets. Only type in h1. We also need an opening and closing curly brackets.

All the style that we are going to do will go within these curly brackets. Now decide the style that we want to apply to h1. Let’s change the background color of it.

We can underline it or change the font or we can do all kinds of things. We are just doing one style in this case. Each style is called the property and the property that we are going to use is :

background-color:Purple;

Now put in a color after it. Now specify the value for that color and in this case, we want this to be Purple.

So that is the value and then we put in a semicolon and this is the way it is going to be for all the CSS you are going to do from this point on. So the complete code will be as follows:
<!doctype html>
<html>
<head>
<style>
h1{
background-color:Purple;
}
</style>
</head>
<body>
<h1> The web hosting website</h1>
<p> Welcome to the web hosting website. Everything you want to know about web hosting is in this website.</p>
<h2> This is a section on Shared Hosting</h2>
<p> Shared Hosting is cheap</p>
</body>
</html>

Semicolon is used as a break. Now move on to the next property. Now all above code is called CSS code. Save this document. Now open this document in IE and there you can see there is a Purple color at the background of the h1 element.

Visit: Hostripples

Best Indian Web Hosting Company

Vishwajit Kale

Vishwajit Kale blazed onto the digital marketing scene back in 2015 and is the digital marketing strategist of Hostripples, a company that aims to provide affordable web hosting solutions. Vishwajit is experienced in digital and content marketing along with SEO. He's fond of writing technology blogs, traveling and reading.