Courses

CSS Tutorials for beginners in Hindi

This course covers fundamentals of CSS - adding CSS to HTML, various selectors, specificity, important properties, layout designs, flex, animations and more.

Learning CSS is one of most rewarding experience for a designer. CSS is very simple language to learn. However, there are so many properties a newbie can be overwhelmed initially. You have to understand that you can't learn every properties at a time. One should be focused on most important and most used properties of CSS initially.

#1 What is CSS ?

In this part of tutorial we check how experience of user changes by adding to a simple HTML page. you may not understand all properties of CSS in this part. It is just a demo to show you power of CSS. Don't worry we will learn all these properties in next videos of this series.

#2 Learn CSS Selectors

One of the most important part in CSS is to select right elements to Style. You want to style an image, or a para, or all images or something in page - you need some way to select that part of page. CSS selectors are simply the way to select one or many element at a time - using some kind of pattern matching. Do you recall ID and CLASS from HTML course ? They will be super useful to understand the concepts given in this video.

#3 How to Attach CSS to HTML page

How we can attach an external CSS file to any HTML page ? This question will be answered in this video. The power of external CSS is un-matchable. You can use many standard design libraries available on internet and attach to your HTML page.

#4 CSS : Specificity

How CSS will decide which CSS properties to apply on an image, if you have 2 or more definitions available. Which means all these are matching the ID or CLASS but changing same property of element. Which should be given higher priority and what are the rules ? Check out the video here

#5 Chrome DevTools - How to change CSS

Sometimes you want to adjust things little bit to left or right, or may be top ? How you decide how the element will look like without write and saving and reloading the code again and again. You can use DevTools Elements Tab to change CSS also and see the live changes. Checkout this video to understand this concept.

#6 CSS : Color Codes

What blue is the Facebook Logo ? You need to have various combination of Red/Green/Blue to make a color on web. This is represent using HEX values with RR (red) GG (Green) BB (Blue) values given in #RRGGBB. Check out this video to know more.

#7 CSS : Text Properties

How to change Text is one of the most important skill to learn in CSS. As most of content on web is text and you have many variations - Heading, title, italics and underline.

#8 CSS : Font Properties

Font styles are used to vary style like - comic fonts, formal fonts, stencil like font or different ones. If you see Google logo they have written Google in a particular font which has become the brand. Just by changing this style you can do a lot of magic.

#9 CSS : Width, Height and Overflow

CSS width and height properties help you control the dimensions of elements on HTML page. This becomes very important in many cases where you only have limited space available on your site. These properties can be in fixed pixels(px), percentage(%) or em/rem which are more responsive way. Overflow controls how the content inside a HTML element behaves, if the content is more than the given space. Can it overflow, or hide or a scrollbar appears. Checkout the video to know more.

#10 CSS : Background property

CSS background properties are way to put a colored background OR a picture in background. Backgrounds can be full-width, can be tiled, or may covering the whole area. Also you can specify where the background should align to. All these things you can explore in this video.

#11 CSS : Box Model

Every element in HTML is not just the part which you see on screen (example a text or image), it is also some spacing and border - which are in many case invisible. These spacing and border are very important to understand for a designer to understand - how to design a perfect layout. In this video we explain the CSS Box model which is a very crucial point to understand layout designing.

#12 CSS : Box Shadow

Sometimes we have seen a small shadow below the pictures or Button on a web page. How an object can cast a shadow & how to control size and location shadow ? We will answer these question in this video.

#13 CSS : Border Radius

How a rounded-rectangle is made rounded on corners ? How will you make an image circular ? you can find the answers in this video of CSS border-radius.

#14 CSS : Opacity

If you want to make something transparent or little translucent (an image or a text) - you can use the opacity property of CSS to adjust level of transparency.

#15 CSS : Pseudo-Classes

Pseudo classes are not actual classes. They are temporarily created during a state such as when you are hovering on a button (:hover). Such classes are useful to program the behaviour of CSS according to such state changes. Like when you want to change color of a button on hovering or making a list more interactive

#16 CSS : Transform Properties

One can perform many kind of transformation using only CSS. Like rotation of things, translation of things in linear directions, scaling up or down few things on your page. These things can be combined with some events or states to show some animated effects also.

#17 CSS : Position - Absolute

HTML elements can behave in various manner according to their arrangements. One of popular arrangement is Absolute - where you can specify absolute position according to the parent container. The element will conform to this arrangement and you can precisely position that element with respect to parent.

#18 CSS : Position - Fixed

In fixed positioning you can make some element Fixed with respect to Parent element/ even body element. This is very commonly used in menu or popup/chat - which remain fixed in viewport even when you are scrolling.

#19 CSS : Position - Relative

In relative positioning you can adjust according to your neigh-boring HTML element and adjust relative to them- in any particular direction.

#20 CSS : Display

Display property is used to change way HTML element will appear in page. It can become Block element - which occupies full length, or Inline (occupy space as big as element) or may be None - which makes the element disappear.

#21 CSS : Flex-box

One of the most popular display property is Flex. As flex is relatively new in CSS world - it is not understood by most of the developers. However it is much fun to learn and once you can apply it. You can arrange various element in horizontal/vertical direction according to your will. It is, as name suggests, very flexible way to arrange multiple elements in your web page.

#22 CSS : Advanced Selectors

We have seen till now simple selector but if you want to specify relation like - direct parent, sibling , next element only. These kind of selections you can make using some advanced CSS selectors.

#23 CSS : Pseudo Elements (::after / ::before)

Pseudo elements are dummy elements which can be put directly before or after an HTML elements. These are mostly useful to insert some design in each element of a collection like a List (sometime dynamically after list creation)

#24 CSS : z-index

z-index is an element which is useful to arrange one element on top or other/or below other. With z-index you can make the 3D experience in 2D browser world and arrange things in z-axis.

Video releasing Soon.