Advanced Concepts – CSS

How to Create a Successful Website Design Business Advanced Concepts – CSS

Watch This Lesson

Lesson Overview

In this advanced web design lesson, we will consider the basics of CSS (Cascading Style Sheets) and see how this coding language adds design and style to your websites.

Lesson Transcription

Welcome! I’m Leighton, your webmaster. In today’s lesson, let’s talk about an advanced yet essential layer of a website: CSS. We briefly talked about CSS in the Coding Lesson of Section 1. As you recall, CSS standards for Cascading Style Sheet. CSS is a web programming language that focuses on giving design and style to raw content like text and images. To make a page title BLUE, add CSS. To change the web page’s background, add CSS. To make the fonts bigger, add CSS. To add more or less spacing between elements, add CSS. As a web designer, you will absolutely need to work with CSS to polish off your designs.

But didn’t we learn that Divi gives you a platform to visually design websites? Doesn’t that negate the need for coding CSS? What do you think? Well… Divi certainly helps. Divi gives you tons of freedom to fine-tune your designs through font options, spacing, sizing, backgrounds, transitions, transformations and so much more. In fact, Divi and other modern themes have come a long way in this department. But most themes also give you a place to drop in your own custom CSS. So as we look at a brief overview of CSS, here’s what we’ll see:

An example of what CSS does
Where to learn CSS
Where to add snippets of CSS to the Divi theme
The beauty of your browser’s inspector
How responsive web design works.

And of course, with CSS, please understand that this is a coding language. Have you ever tried learning to speak another language? Are languages learned in just a few minutes? Generally not. So I encourage you to continue your education outside of this course by watching online videos, reading tutorials, and most importantly, trying this out yourself on your own server. CSS can be a little particular sometimes, especially when you’re looking for advanced design effects, so sometimes hands-on trial-and-error is the best way to learn it. With that being said, let’s dive in!

Demonstrate CSS: Edit Wikipedia’s colors, W3Schools Articles, Divi > Theme Options, Appearance > Theme Customizer > CSS, Visual Builder > Advanced > CSS, Visual Builder > Page Settings > CSS, Browser Inspector, Responsive Web Design (Media Queries)

And that’s a solid start to your CSS knowledge! Let’s recap what we’ve learned about CSS:

CSS is a necessary web programming language.
CSS adds design and style to your web page elements.
Divi has built-in design options, but CSS can help achieve effects that Divi cannot.
CSS media queries enable you to fine-tune your design for various screen sizes.