"Touching base with CSS"


Definition of CSS: 

CSS stands for Cascading Style Sheet. 

By now you know that HTML is used to create the structure of the website. Basically, it is a backbone of a website. 

If you create a website using HTML then it would like like: 


It would like like a sheet with sentences written on it with no design and crafting. It's boring right? 

To make it look interesting, we use the help of CSS. It helps us design and decorate the website in any possible way we want to. For example, you want a website with animations, you got it!, you want a website with a lot of colors and images and fonts, you got it!

This is how a CSS website combined with HTML code look like: 


A little better right? 😁

Now many of you will be wondering how did be achieve that, let's talk about it:

How did we do that? 

So CSS basically uses a simple syntax with a set of rules to follow with it. We know that HTML was created to give a backbone structure to the website. For instance: This is a paragraph - <p>Hello World</p>.

But how do you style the paragraph?

Here we will take the help of the syntax. So the syntax of CSS language has a selector and deciding block. You select an element and then decide what you want to do with it. Pretty easy, right? 

But remember, you need to follow the rules with this as well. So the rules are realy easy to remember. 

- The selector points to the HTML elements you want to style.

- The decision block contains one or more decisions separated by semicolons.

- Each decision name includes a CSS property name and a value, separated by a colon.

- A CSS decision always ends with a semicolon.

- Decision blocks are always surrounded by curly brackets. 

Too much information? Don't worry, it will be easier once we see an example:

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

So in this example:

- The block opens with a selector which selects the HTML element we are going to design. In this case it is p. 

- We then see that we have a set of curly brackets around the decision block. Inside the brackets there can be a multiple decisions but here we have two. They want to select the color of the paragraph as black and the style should be bold.

- Notice the colons and semi-colons.

You have made it till the end, congratulations!

We basically talked about the basics of CSS in this article.

In order to learn in-depth about CSS, visit: W3Schools

Happy styling!  

Comments

Popular posts from this blog

"Design Wizardry Without the Wand (Seriously!)"

"Data Analysis 101"

"Where to start learning Java?"