CSS for beginners
Think of it as your friendly guide to making your website look exactly the way you want it to. You’ll start by dipping your toes into the basics—like customizing your own version of Google’s homepage. It’s a fun, hands-on way to get comfortable with CSS right from the start.
Once you’ve got the hang of a few simple concepts, we’ll move on to the good stuff—like learning three different ways to add CSS to your pages. You’ll see how to use colors creatively, whether you’re looking for classic web-safe shades or something a bit more vibrant.
Read more
Think of it as your friendly guide to making your website look exactly the way you want it to. You’ll start by dipping your toes into the basics—like customizing your own version of Google’s homepage. It’s a fun, hands-on way to get comfortable with CSS right from the start.
Once you’ve got the hang of a few simple concepts, we’ll move on to the good stuff—like learning three different ways to add CSS to your pages. You’ll see how to use colors creatively, whether you’re looking for classic web-safe shades or something a bit more vibrant.
Think of it as your friendly guide to making your website look exactly the way you want it to. You’ll start by dipping your toes into the basics—like customizing your own version of Google’s homepage. It’s a fun, hands-on way to get comfortable with CSS right from the start.
Once you’ve got the hang of a few simple concepts, we’ll move on to the good stuff—like learning three different ways to add CSS to your pages. You’ll see how to use colors creatively, whether you’re looking for classic web-safe shades or something a bit more vibrant.
We’ll also dive into how to style specific elements, like headers and lists, using base selectors. Then, we’ll crank things up a notch with Classes and IDs, giving you the power to take your designs to the next level.
One of the most confusing parts of CSS for beginners is the Box Model—but don’t worry, we’ll break it down with simple diagrams and real-world examples. You’ll get to experiment with the code alongside me, using free tools that make the learning process fun and interactive.
If you’ve ever struggled with CSS or just want a gentle introduction, this course is perfect for you. It’s all about making learning enjoyable and accessible. Plus, you can check out the first lecture for free—no strings attached.
Let’s make your website look just the way you’ve imagined. See you in the course.
What's inside
Learning objectives
- Confidently create and edit css to control website design.
- Know the best free tools to help them edit css
- Know the main keywords important to css and how to use them to come across as an experienced css coder
- Know different ways to specify color in css
- Be able to insert css code into a web page in three ways
- Understand measurement units used in css
- Work with font families and understand how they work.
- Format text, links, lists and other html page elements.
- Know the difference between classes and ids and when to use them
- Understand the box model of css to correctly position elements on a page
- Be able to go to any site, inspect the css and even experiment with the css of any site
- Show more
- Show less
- Confidently create and edit css to control website design.
- Know the best free tools to help them edit css
- Know the main keywords important to css and how to use them to come across as an experienced css coder
- Know different ways to specify color in css
- Be able to insert css code into a web page in three ways
- Understand measurement units used in css
- Work with font families and understand how they work.
- Format text, links, lists and other html page elements.
- Know the difference between classes and ids and when to use them
- Understand the box model of css to correctly position elements on a page
- Be able to go to any site, inspect the css and even experiment with the css of any site
- Show more
- Show less
Syllabus
Introduce the CSS language, what it is and why it is so powerful in web development
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.
Read more
Syllabus
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.
A demonstration of CSE HTML Validator and how it can help you create better CSS.
Useful resources
Save this course
Save
Activities
Career center
Web Designer
WordPress Developer
Front-End Developer
Freelance Web Developer
User Interface Designer
Graphic Designer Web
Email Marketing Designer
Full-Stack Developer
Accessibility Specialist
Digital Marketing Specialist
Mobile Application User Interface Designer
E-commerce Specialist
Technical Support Specialist Web
Learning Experience Designer
Content Strategist Web
Reading list
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
