CSS for beginners

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.

Here are some examples of using color in CSS code

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.

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.

An overview of how we can change or add CSS in WordPress.

A look at the theme file editor and how to use it.  We'll talk about the advantages and disadvantages of this approach.

We'll look at the pros and cons of using the Additional CSS option for both older themes and the new block themes.

How to modify block appearance using CSS.

You may want to add custom CSS to a single post or page.  Using a plugin, we can easily do that.

This video looks at hiding an element on the web page using the Display property.

This video looks at changing the CSS in Astra to remove that large gap between header and opening headline.

This video shows the solution to a problem that a student sent in.  The CSS published on another site for changing the background of a web page didn't work as expected.