CSS Basic to Advanced learning series for web developer Part 1:

It is a learning series for CSS, In this series each article will have information related to CSS that I feel every web developer should know.
We as a developer, always struggle to move an element from one place to another. Being a developer, I feel that we should know some basics of CSS.
By learning of  some basics you can make your page beautiful. So whoever wants to learn, the basics of CSS, like how to position an element, what is inline CSS, what are the inline elements and block level elments, when we use inline or block level elements, how to decide priority of a CSS etc. then this CSS series would definitely help you. I hope that after reading this series, you also will start loving CSS, as I did.
In this tutorial you are going to learn what is inline elements, block level elements, what they mean for a developer.
Inline elements: This means when you use inline elements they add in a line, for example,  span is an inline elements. If I write
<span >CSS </span>
<span> is awesome </span>   then they will appear in a line like  ” CSS is awesome”.
Below is the list of  inline elements:
span, em, lable, input, B, Img, TextArea etc..

Block elements: This means that if you use block level elements they are placed as a stack, means they are placed row by row. For example, div is a block level elements. If I write:
<div> CSS </div>
<div>is awesome </div>    then result would be : CSS
<                                                                                       > : is awesome
Below is the list of block level elements:
<div>,<p>,<H1…6>,<li>,<ul> etc.

Remember one thing that never use block level elements inside inline elements. Block elements can contain block and/or inline elements while inline elements can only contain other inline elements.

That’s it for now. In my next article, I will write about how positioning of elements work and how you can position your elements in Page. Thanks for reading this article.

Advertisements

About learningtechstuffs

I'm Ansu Jain. I have 1.5 years of experience in iPhone development and 1.5 years of experience in web technology. I have worked on a number of web framework including Drupal, Django, Moodle, Pinax, NodeJs. This blog is dedicated to things I feel that each developer must know.
Gallery | This entry was posted in CSS, Web Developement and tagged , , , , , , . Bookmark the permalink.

3 Responses to CSS Basic to Advanced learning series for web developer Part 1:

  1. Rajeev Ranjan says:

    Good Work Ansu Jain 🙂 These are really very useful html/css tips which should be considered while writing html, specially knowing the difference between inline and block elements.
    ….
    waiting for your next article.

  2. Nice work ansu.:) Its a very good move to show your knowledge on a platform like this…
    hope will see many learning series like this going forward……..

  3. Rahul says:

    Nice article Ansu :). Waiting for the whole series.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s