Search for Courses, Topics
MODULE - 1
Module Img
MODULE -1

Introduction to CSS

MODULE - 2
Module Img
MODULE -2

HTML Basics

Coming Soon!
MODULE - 4
Module Img
MODULE -4

Dev Superpower in CSS

Coming Soon!
MODULE - 5
MODULE - 8
Module Img
MODULE -8

Dev Superpower 2 in CSS

Coming Soon!
MODULE - 9
Module Img
MODULE -9

SASS in CSS

Coming Soon!
MODULE - 10
Module Img
MODULE -10

Transitions and Animations in CSS

MODULE - 11
Module Img
MODULE -11

Flexbox+Grid in CSS

MODULE - 12
Module Img
MODULE -12

Dev Superpower 3 in CSS

Coming Soon!
MODULE - 13
MODULE - 14
Module Img
MODULE -14

Fun Section (Advanced)

What is CSS?

HTML alone is just some information. Information alone can’t stand in this world where people want easier accessibility. So, here comes the CSS technology to make that information attractive and easily accessible.

CSS stands for Cascading Style Sheets. As the name suggests, it is a kind of styling that is applied to our plain boring information, HTML.

CSS gives our HMTL all the creative and designing stuff, be it color, alignment, positioning, making the web page responsive (Responsive means making the same website fit different screen sizes without making a completely separate website for each screen size), font styles, animations, and many more. Whatever creativity you can think of can be done with CSS.

Why learn CSS?

Well, let me give you just ONE picture. That itself will make everything clear.

Below is your favorite Google homepage with almost all of the CSS removed. It has got every “information” you need to perform your search operation. It doesn’t look very usable, does it? Neither does it look very organized.

Well, that picture was a good example to show why CSS is so important to learn and what a huge difference CSS can make to your websites :).

It is evident, CSS is not only needed to beautify your webpage but also to make the user experience (UX) and user interface (UI) enriched. It becomes a good website only when it has all the information one needs and is, as well, easily accessible.

Applications of CSS

  • Amazing designs & animations: With all other advantages CSS provides you with the best designs you can get for your websites. Starting with basic designs to animations, CSS has got you covered!
  • Reusability: CSS code once written can be applied to multiple HTML files thus making templating easy. We can apply the same class names and ids to the HTML element when we want to make another similar-looking page, thus saving a lot of our time.
  • Responsiveness: Without CSS the responsiveness of the webpages would have only been an imagination! The media queries, the several CSS frameworks like bootstrap, the dynamic units, etc make the webpages responsive and accessible to several devices without making completely separate pages for desktop and mobiles.
  • World wide standards for web design: HTML and CSS have been globally accepted for making wonderful websites. Thus to make your website futureproof, CSS and HTML are a must skill to have.
  • Faster loading of websites: A single CSS property can be applied to multiple elements using the same class name or same id. This saves us from writing the same styles for each element, making the amount of code less and less code means faster loading of the webpage!

CSS Examples

Let us take an example: HTML:

<body>
    <div class="div1">
        <h1>Hello World!</h1>
    </div>
    <div class="div2">
        <p>This is my first time experience in CSS!</p>
        <h2>Feeling excited!!</h2>
    </div>
</body>

Let us have a look at what a site without CSS looks like:

That’s it, just some plain text stacked one on top of another.

Now let’s apply some basic CSS to the above HTML:

.div1{
    text-align: center;
    color: darkslategray;
    background-color: #FFE162;
    padding: 10px;
}
.div2{
    background-color: #FF6464;
    color: #EEEEEE;
    font-size: larger;
    padding: 1%;
    color: midnightblue;
}

Now let’s see how it looks after applying some very basic CSS.

That’s looking much better with some colors and some padding and styling. Well, you can do many more cool things, let’s look at the various CSS properties.

CSS Properties

These are some of the basic CSS properties that are very frequently used:

  • height
  • width
  • margin
  • padding
  • background-color
  • Positioning properties:
    • Absolute
    • Relative
    • Fixed
    • Static
    • Sticky
  • Font properties:
    • font-color
    • font-size
    • font-family
    • font-style

There are multiple more CSS properties that you will learn as you go through more practical experiences and face hurdles while some real development. Cause, in the end, we developers learn the best only while developing! :)

Career Opportunity of Learning CSS

Let us give you a hint of the career opportunities one can get after learning CSS.

You can be a UI/UX designer or a front-end developer in any software company. Your main task will be to stylize the websites and work on the front-end of the website enriching the UX and UI.

Well, considering the fact that there’s a lot of competition in the industries, knowing only CSS won’t be enough for becoming a front-end developer. Along with CSS, you need to know HTML and JavaScript as well, the two most in-demand technologies in front-end development.

CSS is one of the 3 basic building blocks for becoming a front-end engineer. And the demand for a truly good front-end engineer is much higher than that back-end engineer in the current industry.