Studytonight is now part of the GUVI universe. Explore GUVI →
🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
  Signup/Sign In
Tests
MCQs to test your knowledge.
Compilers
Compilers to execute code in browser.
Home All Courses CSS

CSS course

  4.6  (492+ ratings) | 4969 students

CSS or CSS3 is part of the foundation on top of which a Website is built. Without CSS, websites would look ugly as hell. SASS, SCSS, etc are built on top of CSS, to enable UI developers write better styling code. For a UI developer, knowing CSS is a must.

This Course is FREE forever 🥳

FREE

Chat with us on WhatsApp
FREE 🥳

Why learn CSS?

CSS stands for Cascading stylesheets. It is used to style Web pages. Every single webpage that you see on the Internet, is styled using CSS. Knowledge of CSS is required to understand and use the popular CSS frameworks like Bootstrap, Tailwind CSS, etc.

Learning CSS is mandatory if you want to become a Web developer or a Frontend Developer. CSS is used to create responsive webpages, which look good on different devices with different screen sizes.

Why learn CSS Why learn CSS

Who can do the CSS course?

School Student
College Student
Fresh Graduate
Web Developer
Frontend Developer
CURRICULUM

The entire course is divided into Levels, with each level having multiple Lessons. Each lesson has a coding exercise.

Level 0

Start with Fundamentals

LEVEL 1

Level 1

What are Selectors?

LEVEL 2

Introduction to Selectors
Universal Selector
Element Selector
CSS id Selector
CSS class Selector
The input element as a selector
CSS grouping Selector
CSS pseudo-class Selector
That's all for Selectors
Level 2

Playing with Colors

LEVEL 3

Adding Colors to Webpage
Give Color to Text
Specifying colors using the color name
Specifying color using HEX value
Specifying color using RGB
Make colorful backgrounds
Quick Revision
Level 3

Styling the text

LEVEL 4

Introduction to Text styling
Changing the Font type (font-family)
CSS Font style (font-style)
Changing Font size (font-size)
Make fonts bold (font-weight)
Letter and Word Spacing
Text Direction (text-direction):
Aligning the Text (text-align)
Decorating the Text (text-decoration)
Handling text overflow (text-overflow):
And Text styling is complete!
Level 4

Understanding Box Model

LEVEL 5

What is Box Model?
The Content box
Setting height and width of Element
Margin around Element
Padding inside Element
Border around Element
Understanding Box Sizing
Quick Revision
Level 5

CSS Borders

LEVEL 6

Give your HTML elements a Border
Control the border-style
Thin/Thick borders using border-width
Change Border color using border-color
Border Shorthand Property
Rounded Corners using border-radius
End of Borders
Level 6

CSS Display property

LEVEL 7

CSS display Property
CSS Display Inline
CSS Display Block
CSS Display None
CSS display Inline-block
CSS Visibility hidden
Quick revision
Level 7

Styling Images

LEVEL 8

CSS Properties to style Images - Introduction
Set Height and Width
Make Image Corners round or Image Circular
CSS float Property
Centering an Image
Making Image Transparent - opacity
CSS Background Images
CSS filter property
Making Images Responsive
That's all for Images
Level 8

CSS Shadows

LEVEL 9

Be my Shadow - Introduction
Adding Shadow effect to the text
Multiple Text Shadows
Adding shadow effect using box-shadow
Applying shadow effect on Cards
Bye Bye! Shadows
Level 9

Controlling the Position

LEVEL 10

Introduction to Positioning
CSS Static Position
CSS Relative Position
CSS Absolute Position
CSS Fixed Position
CSS Sticky Position
Quick Revision
Level 10

Media Queries

LEVEL 11

What are Media Queries?
Adding breakpoint for different screen size
Hiding elements using media queries
Changing Font-size using media queries
Quick Revision
Level 11

CSS Transition

LEVEL 12

What is CSS transition?
CSS transition-property property
CSS transition-duration property
CSS transition-timing-function property
CSS transition-delay property
CSS transition property
End of Transition!
Level 12

CSS Transform

LEVEL 13

CSS transform
CSS 2D Transform
CSS 2D Transform continued...
CSS 3D Transform
CSS transform-origin property
CSS transform-style property
CSS perspective Property
CSS perspective-origin Property
The backface-visibility property
End of Transformations
Level 13

CSS Animation

LEVEL 14

CSS Animation - Introduction
The @keyframes Rules
CSS animation-name Property
CSS animation-duration Property
CSS animation-delay Property
CSS animation-iteration-count property
CSS animation-direction property
CSS animation-timing-function property
CSS animation-fill-mode property
CSS animation property
The End of Animation
Level 14

CSS Flexbox

LEVEL 15

Introduction to Flexbox Layout
Flex Container and Items
Flex Direction
Flex Wrap
Flex Flow
Flex Items Order
Flex Item flex-grow property
Flex Item flex-shrink property
Flex Item flex-basis property
Flex Item flex property
Flex Container justify-content Property
Flex Container align-items Property
Flex Item align-self property
End of FlexBox!
Level 15

CSS Grid

LEVEL 16

Introduction to Grids
Creating a Grid Container
Define Grid Template
Placing a Grid Item
Placing a Grid Item - Part 2
Grid Area Property
Grid Template Areas
Grid Template
Grid Gaps
justify-items and align-items Property
justify-self and align-self Property
Alignment of the complete Grid
Alignment of the complete Grid - Part 2
Final Conclusion

Skills you will gain

Basics of CSS, Various CSS Selectors and how to use them.
Basic styling properties like color, background, border, font, etc.
CSS Box Model
CSS Display properties
Creating Responsive Webpages
Animation, Transform, and Transition using CSS
CSS Flexbox
Concept of Grids using CSS Grid

🤯   Studytonight X Factor

Self paced
Take your own time to learn and complete the course. We want you to enjoy your learning journey.
Learn & Practice
Each lesson comes with a small coding exercise. You have to complete the exercises to progress.
AI smart guide
Our application guides you, as you write code to complete the coding exercises, just like a tutor.
No Installations
No App. No local compiler setup. Nothing! You can open our website in the browser and enjoy the course.
Fun Exercises
Fill in the blanks, missing parts, choose correct options, we have all sorts of fun coding exercises.
World-class Content
Our courses are curated by experts with years of experience.

User Review & Rating

Here is what our users say about our application and the courses.

annefaith

I learn a lot in your website, more than I learn in school, peace!

Abhisheke3yvz

Amazing Course. Love doing the mini-exercises in each lesson. Just WOWW!

subhransusekhar

The best website to learn. The learning process is too good. You should able to earn coin through get right answers and you use these in the projects. Am very happy to learn here.

Prashaycoder

Easy way to Learn.....CSS courses and also HTML Courses I have done...HTML Courses...and I get ideas and practices...Thank You StudyTonight upgrading my skills.

jarwiz

when using " " for this ' ' the code cant submit, but provides same output. i can only submit as i put same as u define in code to compare my output.

arnohoho

Hello from France ! Thank you for helping me to create my first code !

Deeh

No cliche' but its the best site to learn anything on tech

nirajjha

I have get to learn so much from your website. Thank you for such valuable content.

iamabhishek

Amazing project to understand how default UI components like Audio player work in browsers and how to style them. Loved it!

skafroz

it's very efficent to use,and it make learning programming very easy

See More →
Lessons (with exercise)
141 lessons
Time to complete
Approx. 16 hours
Skill level
Beginner
Reward on completion
Digital Certificate
CSS Course
  4.6  (492+ ratings) | 4969 students
You are just one step away from starting your journey of learning CSS.
FREE 🥳
Chat with us on WhatsApp.
Scan the QR code and start the chat to share your queries with us.

CSS Projects

Please complete the Course first and then work on Projects.

My Portfolio
#Advanced

My Portfolio

Code a single page responsive Portfolio, using modern CSS Flexbox techniques.

Explore
Required coins
900 Coins
Style a Button
#Beginner

Style a Button

Learn how to style a simple Button or Anchor Links using CSS.

Explore
Required coins
300 Coins
CSS Combinators
#Beginner

CSS Combinators

Learn all about the CSS combinators to have a better control over the Selectors.

Explore
Required coins
300 Coins
Stylish Audio Player
#Intermediate

Stylish Audio Player

Learn how to style the default Audio player created by the browser.

Explore
Required coins
600 Coins
Don't have enough coins? Buy Coins

Digital Certificate!

Once you have completed the CSS course, you can generate your certificate of completion.

Add it to your LinkedIn profile, resume, or CV. Share it on social media or anywhere else.
Every digital certificate is verifiable and unique.
The certificate has lifetime validity.

FAQs

Frequently asked questions related to CSS. Here we have answers to some of the commonly asked questions.

CSS stands for cascading style sheets. It is used to style webpages. HTML is used to create basic structure of webpages, whereas CSS is used to add styling to it. You can watch this video on Youtube to understand CSS - What is CSS? (Youtube video).

Yes, for becoming Frontend developer or UI developer, you should have a good understanding of CSS. If you know CSS, you can build modern, user-friendly, and responsive user interfaces.