CSS for beginners
Tags: html, css, webdev, programming
Published: 2020-11-23 09:29:47

CSS defines the way things look on a website and to further add interactivity to a website we use JavaScript. When we start building any website we usually start by writing HTML first, which is the actual content that is being displayed on the website. But, we also need to style our website so that it catches the attention of the person visiting the website. This is where CSS comes into action. 

CSS stands for __Cascading Style Sheets__ and is a very powerful tool for designing our website. It can instantly beautify a website to a whole new level. So in this post I'll walk you all through the basics of CSS to introducing all the things you need to know to style your website. 

So first lets look at the syntax.

__SYNTAX__

CSS consists of a __selector__ and a __declaration block__. The selector points to the HTML element which we want to style whereas the declaration block contains one or more declarations separated by semicolons. The declaration consists of a CSS property name and a value separated by a colon. See the image below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tyj8876aah12d1m6hi3v.png)

In the above image we can see that p tag is a selector and everything that's inside the curly braces is declaration which consists of color as a property and red as a value. On using the above styling into our CSS file will convert all the content enclosed within the p tag into red color.

__SELECTORS__

Selectors in CSS specify which HTML elements we want to style. For example, when we write h1 as a selector and then assign a declaration to it which consists of a property and value. Then all the h1's which are present in our html file are being modified based on property and value.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mczmov50d0ggs6slnyhs.png)

We can also use multiple selectors separated by a comma and then assigning a declaration which will make an effect on all of them at once. See the code snippet below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0gj5ir8e89g58dssdx5w.png)

__PROPERTIES__

So now lets explore the properties in CSS which are most important to style our website. Based on the properties used, the styles are being applied to that particular selector. Some of the most used properties are:

__Color__

In CSS, by using the color property and assigning it to a predefined color we can change the color of the content enclosed in that particular selector. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w7z38k859j870z62cuq6.png)

We can also assign the values in following ways:
1. By Specifying the __RGB__ value of the color we need.
2. By Specifying the __HEX__ value of the color we need.

__1. RGB Value__

An RGB value is a combination of 3 values i.e red, green & blue. Here, each parameter defines the intensity of the color between 0 and 255. 

If we set all the parameters to 0 i.e. by setting rgb(0,0,0) we get black color. While if we set all the parameters to 255 i.e. by setting rgb(255,255,255) we get white color. Also, setting any one parameter to 255 and rest all to 0 will give us the color of the parameter that is being set to 255. 
For example. rgb(255,0,0) will give us red. 

To read more about setting RGB values [Click Here] (https://www.w3schools.com/css/css_colors_rgb.asp)


__2. HEX Value__

Similar to rgb, an HEX value is also a combination of 3 values i.e. red, green & blue but in hexadecimal format which is #rrggbb. Here, rr refers to red, gg refers to green & bb refers to blue with their values ranging between 00 and ff, ff being the highest and 00 being the lowest. 
For example. hex(#ff0000) will give a red color.

__Text__

Using CSS we can also style our text, we can change the font size, font style, add spacing between the words & letters and many more stuff. We can use different font styles based on our requirement, some of the best font styles can be found at [Google Fonts] (https://fonts.google.com/)

For font sizes we can use pixels(px), rem , em units.
rem is relative to font-size of the root element, em is relative to the font-size of the element. If size of the root element is not set then by default it is 16px. 
To read more [CLICK HERE] (https://www.w3schools.com/cssref/css_units.asp)

__CSS BOX MODEL__

The CSS box model is like a box which is wrapped around each & every HTML element. It mainly consists of margins, borders, padding & actual content. 
See the diagram below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tlidiad5h5x8crfyvrl0.png)

In the above image, we can see that to add the spacing around the actual content we need to use padding, and to add a spacing around the padding and the content we need to use border spacing, and finally to add the spacing outside the element i.e. to add spacing between two elements we use margin. Also, we can use __margin: auto__ to center the elements.


__DISPLAY__

The CSS display property is widely used to control the layouts. It specifies how an element must be displayed. Elements usually have their default display values set to either inline or block.

__Inline Elements__

We can set the display property to inline by declaring display: inline. Inline removes the line breaks after an element due to which each element occupies the space equivalent to the content or text present inside it. Some of the default inline elements are span, a, img.
See the image below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uavmt12kh99d09x92z22.png)

To see entire code [Click Here] (https://codesandbox.io/s/inline-k1hqg?file=/index.html)

__Block Elements__

We can set the display property to block by declaring display: block. Elements whose display property is set as block always start on a new line and take the full width available. Two elements won't be placed next to each other. Some of the default block elements are: div, h1 ... h6, p etc.
See the image below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t06jfy4xr995vqaw2vk0.png)

To see entire code [Click Here] (https://codesandbox.io/s/block-6uhq6?file=/index.html)

__Classes & Id's__

To select a group of elements we use classes and ids in our html. Classes are used when we want to reuse the same class name in other elements as well, while id's are used when we want to assign an id to an element which won't be reused again for other elements. 

Classes are included in css file using dot and then followed by assigned classname (.className) while ids are included using # and then followed by assigned idName (#idname).

Below we have put class as center into two p tags. So, now by using the class name we can style the way we want. 
See the code snippet below: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m63c0mqi36sxr1nb4rom.png)

So now by using class we can style those two p tags as per our need. Let's align them to center.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pzbe8f536105t1kpbpsb.png)

Output will be: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/15071mxiu2fo2xn22tet.png)

So as you can see using class we have centered group of elements together. 

To see entire code [Click Here] (https://codesandbox.io/s/class-3nce2?file=/index.html)

Similarly we can do this using ids using # 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jtvhp6s4pzgk5thnw2ns.png)


To see code for ids [Click Here] (https://codesandbox.io/s/id-bwbju?file=/index.html).

Hope, I was able to cover most of the topics of CSS to get a beginner started, but there's still a lot of topics in CSS to learn if you want to become a pro at it. 

Some resources which you can look at: 
1. [MDN Docs] (https://developer.mozilla.org/en-US/docs/Web/CSS)
2. [CSS Tricks] (https://css-tricks.com/)
3. [w3schools] (https://www.w3schools.com/css/default.asp)