Web pages are built with HTML, but styled with CSS. As with any other coding language, CSS has a learning curve that puts off many beginners. This course aims to change all that and make learning CSS fun. As you work through the tutorials, you can try out the examples, or try your own CSS and see the live preview of your code immediately to check if you got it right.
The course starts with an introduction to CSS where you can get your feet wet by creating your own uniquely styled Google's homepage.
After learning a few key phrases you'll move on to look at the three ways you can implement CSS into your web pages.
You'll look at color, including web safe colors, and the different ways you can add color to your web pages.
We'll look at how you can style any HTML element, from headers to lists using base selectors, before looking at the design power offered by Classes and IDs to really put your CSS designs into overdrive.
With a great working knowledge of the main concepts in CSS, we'll cover the Box Model of CSS, which is a great source of confusion for many CSS beginners. Using a simple diagram as reference, you can roll up your sleeves and explore the Box Model with a simple CSS coding session. Not only can you follow along in real-time using the same free tool that I do, you can also experiment and have fun as you learn.
If you are a beginner to CSS or struggled with the learning curve in the past, then this course is for you, and offers you a fun way to learn CSS, using free tools.
Check out the introductory lecture for free.
CSS is incredibly powerful. By way of introducing this course, I took the Google homepage and changed the look and feel using CSS and a free browser plugin.
This lecture shows you the tools you'll need to install before we move on with the course.
Don't worry what that title means, we're simply going to look at the construction of valid CSS code.
CSS stands for Cascading Style Sheets, but what does the cascading bit mean?
There are three ways we can insert CSS into a page. The first one, called Inline Styles are explored in this video.
The second way of inserting CSS into a web page is with internal CSS. This video looks at Internal CSS:
External Style sheets are the third option. This video looks at how we use them and why they are the best option for most situations.
There are a few ways we can specify a color in CSS. This tutorial looks at them, and where yo find help if you need it.
Color is extremely important in web design. This resource file provides you with links to desktop color pickers that allow you to capture any color on your computer monitor, and online color pickers to help you choose colour schemes for your site.
Here are some examples of using color in CSS code
This lecture looks at the background color of a webpage, but also how to use images in the background.
Length is a numerical value plus a unit, but length can be an absolute or relative measurements. This lecture looks at the diffference.
Let's look at some examples of using the units in CSS.
This lecture looks at font-families, what they are and how you can play around with them on a live website (even if you do not own that website).
In this lecture, we'll look at some other font and text properties that can change the look of the text on a web page.
Without links, the Internet would not work. This lecture looks at how we can format the links on our webpages.
Let's start with a brief refresher on the HTML code used to create lists.
Now let's see how we can control these lists with CSS.
CSS gives us classes and IDs so we can create our own selectors.
The box model in CSS is important to understand because all elements on an HTML page are inside boxes, whether you can see the box or not.
Divisions, or DIVs for short, allow us to define areas of the page to treat as a single unit.
The float property allows us to float boxes to the left or right. When you float a box, the rest of the web page content will flow around it.
A demonstration of CSE HTML Validator and how it can help you create better CSS.
Albert Wiersch, developer of CSE HTML Validator has kindly offered my students of this course a free copy of the tool. Here are the download details.
This document lists desktop CSS editors. They are not needed in this course, but you may find you want one as you progress with your CSS learning.
I run a website called ezSEONews, where I teach my visitors search engine optimization (SEO) skills, and the art of building websites with Wordpress. I have also written and published a number of books that are available on Amazon Kindle and as paperbacks, including best selling books on Wordpress ("Wordpress for Beginners") and SEO ("SEO 2014 & Beyond").
As an ex-schoolteacher, I hope I can make complicated topics simple to understand. I certainly enjoy trying!