Home

Learn the basics of "CSS" in no time



The first question which arises in the minds of fresh developers is What basically CSS is and why do we use it. Can't we design a website only by using HTML ? So, the answer is yes you can develop a website with proper functionality only by using HTML codes.
Then what's the use of CSS ?

CSS termed as "Cascading Style Sheets" is a style sheet language which is used to beautify documents written in a markup language. It makes a document presentable.
CSS technology is used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
So, if you want to attract users to your websites or web applications, then you must have to learn CSS.

Here, I am providing some of the basic and important things which you should have on your fingertips while designing a website (whether it is static or dynamic).

Table Of Contents



Basic syntax for CSS


The CSS rule consists of a Selector and a Declaration part.
Selector is used to select a particular part of the code on which styling is to be done and the declaration part is used to define the properties and their values.
Declaration always ends with a semicolon.

Example:

Here 'p' is the selector and rest comes under the declaration part.
In declaration part, left items are property and right ones are their respective values.

Now, if you are selecting the 'id' part in div block of HTML, then you have to put '#' sign before the selector and when you are selecting a particular 'class' in div block, then you have to put '.' before the selector part.

Example:

for 'id' part:

for 'class' part:


Simple. Isn't it?

Note: You have to make a separate '.css' file to write all the css codes in it. And place that file in the same folder as of your HTML file.

Setting the background properties


For setting the background color, you just have to use "background-color : any color;"

Example:

For setting the background image, you just have to use "background-image : url(".jpg");"


Setting the margins


Margins are the most imaportant part while presentation. Desired Margins can be made by using below properties:
  • Margin-left:10px;
  • Margin-right:10px;
  • Margin-top:10px;
  • Margin-bottom:10px;

Example:

You can also use "margin: 100px 150px 100px 80px;"

Here, the coordinates are like: "top,right,bottom,left" i.e. from top, the margin allocated will be 100px, from right, it will 150px, from bottom, it will be 100px and from left, it will be 80px.

Margin allocation like "margin: 100px 80px;" will be used to denote the coordinates as : { (top and bottom),(right and left) } i.e. the margin for top and bottom part will be 100px whereas for right and left will be 80px.

Now, if simply you are writing it as "margin: 100px;" then it simply indicates that you are setting the universal margin as 100px i.e for all the directions top, right, bottom and left, the margin will be same i.e. 100px.

How to design boxes in CSS


You just have to make any class (with an unique name) in a separate div block in your HTML code file. And then, you just have to decorate it by selecting that class using '.' sign in CSS (as mentioned above).

Taking a simple example to illustrate you the process:

In HTML code, you have to write it as :

(div class="abc")
** your content here....it may be text, images or another div box **
(/div)

Note: Here I am using "(" and ")" instead of "<" and ">". This is just to show you the example, otherwise it will be hidden under the code as they are the keywords in HTML.

Now, coming to the CSS part. So, you created a box having contents and now you want to add basic or desired CSS properties to it, right ?
Then, you just have to take the class 'abc' using '.' before and add the your desired properties to it. It will be like:

" .abc {
** your css properties here **
} "

Creating a hoverable button


You don't have to do much. The syntax for this is " .button_class:hover". And then you have to set the background and text color after hovering.
Here, "button_class" refers to the name of the class, you have given to the button class at the time of button creation.

Example:


Writing alongside images


Actually, its a very simple task. But, many of the beginners stuck at this and move to the internet to find the solution for this matter. I am therefore clearly mentioning this thing in a seperate heading.
Remember, whether you want to write alongside an image, video or any div, you just have to assign a class or id to that image or div and then in css block, you have to assign a property:

" float: left; " or " float: right; "

That's it in this part !


Displaying two or more div inline


Many times while designing a webpage, we want our smaller sized div boxes to be displayed in a single line. This can be done by a css property :

" display: inline-block; "

For example, you want three div boxes (named a,b and c) to be inline. Then the css part will be as follows:

"
 .a,.b,.c { 
display: inline-block;
}
"

Now, if you want to set certain gap between these div boxes, then you just have to add a " margin " property in the above mentioned code.


Posted By: Ankit Kumar