Introduction to CSS

(44 reviews)


Premium video tutorials

Award-winning instructors

Personalized learning

Get certified

Learn at your own pace

Mobile (learn on-the-go)

Unlimited tests and quizzes

Regularly updated content


If you have ever wanted to build and design stylish, responsive websites, this introductory CSS training course can help you get started learning CSS for web design and development. Designed for beginners, no prior experience with CSS is required to get the most out of this online course.

You will start with the basics and apply the practical knowledge you learn through hands-on application and examples every step of the way. By the end of the course, you will have learned to apply fundamental design elements in CSS to create a beautiful and functional user experience.


  • 39 practical tutorials.
  • Learn how to add and change colors of elements.
  • Add background colors, images and borders.
  • Understand the difference between margins and padding.
  • Change the formatting and alignment of text.
  • Style links, lists and manipulate fonts.
  • Understand CSS pseudo-classes and how to use them.
  • Use gradients, shadows and rounded corners.
  • Add buttons and pagination for easy navigation.
  • Make your design responsive for mobile devices.
  • Setting up, using and modifying Bootstrap.
  • Understand how HTML, CSS and JavaScript work together.

Once enrolled, our friendly support team and tutors are here to help with any course related inquiries.

Focus video player for keyboard shortcuts
  • 720p
  • 540p
  • 360p
  • 0.50x
  • 0.75x
  • 1.00x
  • 1.25x
  • 1.50x
  • 1.75x
  • 2.00x


Skill level





Accredited by




Video duration

2h 38m

Estimated study time

19h 30m for all materials

Accreditations and approvals

CPD - The CPD Certification Service.


Course Introduction

What is CSS and what is it used for?

Try it!

Setting up a Development Environment

What tools do you need to write CSS?

CSS Syntax

Understanding the basic CSS syntax.

Using CSS 3 Ways

Learn the three main ways to use CSS on a web page.


How to add and change the colors of elements.

Try it!


Changing background colors, images, and more.


Adding borders to elements, and modifying the border style.

Margins and Padding

Understanding the difference between Margins and Padding.

Height and Width

How to change the height and width properties of an element.

Box Model

Understanding the CSS Box Model for your design and layout.


Learn how to change the style, color, and width of an outline.

Text Formatting

How to change the formatting and alignment of text.


How to manipulate the font family, boldness, style, and size, of text.


Learn to style links. Understanding active, hover, and visited formatting as well as text decoration.


Styling both ordered, and un-ordered lists.


How to greatly alter the look of HTML tables.


Understanding how an element is displayed with CSS.


Understanding static, relative, fixed and absolute positioning.

Float and Clear

Understanding Float left, Float right, and the clear statement.


Learn how to make floating easier with Inline-Block


Aligning elements horizontally and vertically, as well as centering objects.


What are Combinators, and when to use them.


Understanding CSS Pseudo-Classes and how to use them.

Rounded Corners

Adding cool rounded corners to things.

Border Images

Using images for borders instead of lines.


Using Gradients with nothing more than CSS (no images needed).


Adding Shadows to elements.

Rounded Images

Adding Rounded features to images with CSS.


Creating and styling buttons with CSS.


Creating Pagination with CSS.

Intro to Responsive Design

Understanding the concept of responsive design for mobile devices.

Grid View

What is the grid view and why is it important?

Media Queries

Showing different web page designs based on different sized devices.

Try it!


How to resize images responsively for mobile devices.

Using Responsive Frameworks

How to use a framework like Bootstrap to shortcut your responsive programming.

Setting Up Bootstrap

How to add Bootstrap to your website.

Basic Bootstrap Usage

Understanding the basics of Bootstrap

Modifying Bootstrap

How to modify the underlying bootstrap CSS code.

HTML, CSS, and Javascript Working Together

How do HTML, CSS, and Javascript work together to make up front-end web development

Download syllabus