Introduction to CSS

Testimonials (48 reviews)

Features

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

Overview

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.

Highlights:

  • 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.

Introduction to CSS
Focus video player for keyboard shortcuts
Auto
  • 720p
  • 540p
  • 360p
1.00x
  • 0.50x
  • 0.75x
  • 1.00x
  • 1.25x
  • 1.50x
  • 1.75x
  • 2.00x
cc

Summary

Skill level: Beginner
Certificate: Yes
Lessons: 39
Accredited by: CPD
Pre-requisites: None
Video duration: 2h 38m
Estimated study time: 19h 30m for all materials

Accreditations and approvals

CPD - The CPD Certification Service.

Syllabus

1

Course Introduction

What is CSS and what is it used for?

Video time: 03m 54s

Try it!

2

Setting up a Development Environment

What tools do you need to write CSS?

Video time: 06m 07s

3

CSS Syntax

Understanding the basic CSS syntax.

Video time: 04m 29s

4

Using CSS 3 Ways

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

Video time: 05m 02s

1

Colors

How to add and change the colors of elements.

Video time: 04m 07s

Try it!

2

Backgrounds

Changing background colors, images, and more.

Video time: 05m 12s

3

Borders

Adding borders to elements, and modifying the border style.

Video time: 03m 34s

4

Margins and Padding

Understanding the difference between Margins and Padding.

Video time: 03m 44s

5

Height and Width

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

Video time: 03m 10s

6

Box Model

Understanding the CSS Box Model for your design and layout.

Video time: 03m 03s

7

Outline

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

Video time: 04m 11s

8

Text Formatting

How to change the formatting and alignment of text.

Video time: 05m 09s

9

Fonts

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

Video time: 03m 19s

10

Links

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

Video time: 04m 14s

11

Lists

Styling both ordered, and un-ordered lists.

Video time: 04m 08s

12

Tables

How to greatly alter the look of HTML tables.

Video time: 04m 51s

13

Display

Understanding how an element is displayed with CSS.

Video time: 03m 19s

14

Position

Understanding static, relative, fixed and absolute positioning.

Video time: 03m 31s

15

Float and Clear

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

Video time: 03m 30s

16

Inline-Block

Learn how to make floating easier with Inline-Block

Video time: 03m 03s

17

Align

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

Video time: 04m 42s

18

Combinators

What are Combinators, and when to use them.

Video time: 04m 31s

19

Pseudo-Class

Understanding CSS Pseudo-Classes and how to use them.

Video time: 03m 45s

1

Rounded Corners

Adding cool rounded corners to things.

Video time: 04m 48s

2

Border Images

Using images for borders instead of lines.

Video time: 03m 38s

3

Gradients

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

Video time: 04m 18s

4

Shadows

Adding Shadows to elements.

Video time: 03m 38s

5

Rounded Images

Adding Rounded features to images with CSS.

Video time: 03m 13s

6

Buttons

Creating and styling buttons with CSS.

Video time: 03m 35s

7

Pagination

Creating Pagination with CSS.

Video time: 03m 38s

1

Intro to Responsive Design

Understanding the concept of responsive design for mobile devices.

Video time: 04m 04s

2

Grid View

What is the grid view and why is it important?

Video time: 04m 18s

3

Media Queries

Showing different web page designs based on different sized devices.

Video time: 04m 10s

Try it!

4

Images

How to resize images responsively for mobile devices.

Video time: 03m 47s

5

Using Responsive Frameworks

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

Video time: 04m 26s

1

Setting Up Bootstrap

How to add Bootstrap to your website.

Video time: 03m 52s

2

Basic Bootstrap Usage

Understanding the basics of Bootstrap

Video time: 04m 31s

3

Modifying Bootstrap

How to modify the underlying bootstrap CSS code.

Video time: 04m 29s

1

HTML, CSS, and Javascript Working Together

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

Video time: 03m 42s

Download syllabus

Get started

See what our customers are saying...