Introduction to CSS

Testimonials (53 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.

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. Microsoft Partner

Syllabus

1

Try it!

Course Introduction

What is CSS and what is it used for?

2

Setting up a Development Environment

What tools do you need to write CSS?

3

CSS Syntax

Understanding the basic CSS syntax.

4

Using CSS 3 Ways

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

1

Try it!

Colors

How to add and change the colors of elements.

2

Backgrounds

Changing background colors, images, and more.

3

Borders

Adding borders to elements, and modifying the border style.

4

Margins and Padding

Understanding the difference between Margins and Padding.

5

Height and Width

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

6

Box Model

Understanding the CSS Box Model for your design and layout.

7

Outline

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

8

Text Formatting

How to change the formatting and alignment of text.

9

Fonts

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

10

Links

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

11

Lists

Styling both ordered, and un-ordered lists.

12

Tables

How to greatly alter the look of HTML tables.

13

Display

Understanding how an element is displayed with CSS.

14

Position

Understanding static, relative, fixed and absolute positioning.

15

Float and Clear

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

16

Inline-Block

Learn how to make floating easier with Inline-Block

17

Align

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

18

Combinators

What are Combinators, and when to use them.

19

Pseudo-Class

Understanding CSS Pseudo-Classes and how to use them.

1

Rounded Corners

Adding cool rounded corners to things.

2

Border Images

Using images for borders instead of lines.

3

Gradients

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

4

Shadows

Adding Shadows to elements.

5

Rounded Images

Adding Rounded features to images with CSS.

6

Buttons

Creating and styling buttons with CSS.

7

Pagination

Creating Pagination with CSS.

1

Intro to Responsive Design

Understanding the concept of responsive design for mobile devices.

2

Grid View

What is the grid view and why is it important?

3

Try it!

Media Queries

Showing different web page designs based on different sized devices.

4

Images

How to resize images responsively for mobile devices.

5

Using Responsive Frameworks

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

1

Setting Up Bootstrap

How to add Bootstrap to your website.

2

Basic Bootstrap Usage

Understanding the basics of Bootstrap

3

Modifying Bootstrap

How to modify the underlying bootstrap CSS code.

1

HTML, CSS, and Javascript Working Together

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

Download syllabus

Get started
Get started

See what our customers are saying...