What is CSS ? | Some Basic Properties in CSS to get started

CSS is very important as it is the framework that deals with the styling portion and appearances and how webpage will look after it is deployed. The full form of CSS is Cascading Style Sheet.

There is also an alternative available now, that is, SCSS (CSS Map) in which we need not to specify all the properties instead we take a property and specify all its descendants. 

Let's learn about some basic CSS properties and with these properties you would be able to develop a web page with customized style.

Basically, CSS is one of the web frameworks among HTML, CSS, JS and PHP.
                        

CSS can be written in three ways-

1). External CSS – It is the CSS specified in the different .css file and it is used to give similar styling to more than one page and so it is mostly used by the developers.

It is included in the page like this:
<link rel="stylesheet" href="path/filename.css">

2). Internal CSS – It is the form of css which is used internally inside a webpage and this type of css is basically used for giving style to the single page.

It is included in the web page in the head tag of the html file, as shown below:
<style>

        /* CSS Statements here */

 </style>

3). Inline CSS – Inline css is the form of css and used directly in line and it is basically used for testing purpose by the developers by applying specific properties to a specific portion of the web page and the style attribute decides the styling in this case.

It is included in the webpage, like shown below:
<tagname  style="CSS statements(properties)">Some text here</tag name>

We can also use comments in CSS and these comments are not executed and also these statements does not affects the appearance of web page. The comment in CSS is same as the comments in the JavaScript multiline comment statement.
/*
Write comments here
The potion inside the /* */ will not be executed
*/

The Basic syntax of writing css is like this:

Stand {

    property1: value;
    property2: value;

}

Here, Stand is the value of the html tag or id or class, and the property are the properties that we are going to read in this blog  next to this paragraph and values are the custom values provided by thedeveloper. Values can be different for different properties.

In case of colors we use these formats - rgb () (red-green-blue), rgba () (red-green-blue-opacity) and hex #abcdef (colors are written in hex format) whereas, in case of other property we represent values in px, em, rems, etc.

Here are some basic properties used in CSS -

1. Color - color property is used to change the color of the text of the text written inside a webpage.

2. Background-color - background-color is used to specify the background color of the webpage portion.

3. Padding - It is the spacing of element inside element or with its
descendent elements, like we want some spaces around the hyperlink but inside the border.

4. Margin - This property is used to specify the space between the outer boundary and the internal element like the spacing of body from the webpage edge.

5. Border - border property is used to specify the border and the thickness of border and specifying the color of border inside it.

6. Border-radius - This is the property used to make the corner of  element round or circular like we can use this property to make the  image to with circular border.

These are some properties you can practice and next we will be creating a basic project using HTML and CSS.