Week 16: Website Design

by | Jan 19, 2026 | Website Design Class

Intro to CSS in Divi

Learn the basics of CSS (Cascading Style Sheets) and how to use Divi’s built-in options and custom CSS to style their website beyond the default settings.

https://www.w3schools.com/css

)" class="et_pb_video_overlay et_multi_view_hidden">
)" class="et_pb_video_overlay et_multi_view_hidden">

Scripture

Exodus 31:3-4 (HCSB) – “I have filled him with God’s Spirit, with wisdom, understanding, and ability in every craft to design artistic works in gold, silver, and bronze.”
→ Tie-in: CSS is like the artistic craftsmanship of a website — it takes structure (HTML) and shapes it into something beautiful.

What is CSS?
  • Definition: Cascading Style Sheets — controls the style and layout of web pages.

  • Relationship to HTML:

    1. HTML = structure (content)

    2. CSS = design (colors, fonts, spacing)

  • CSS can be applied in three ways:

    1. Inline CSS (inside HTML tags)

    2. Internal CSS (inside a <style> tag)

External CSS (separate file — not usually needed in Divi)

Basic CSS Syntax

Example:

css

CopyEdit

selector {

  property: value;

}

 

  • Selectors: Choose what element to style (e.g., h1, .classname, #idname).

  • Properties: Describe the style (e.g., color, font-size, margin).

  • Values: The setting for the property (e.g., blue, 20px, center).

Common CSS properties for beginners:

  • color

  • background-color

  • font-size

  • margin and padding

  • border

  • text-align

Using CSS in Divi
  • Live demo:

    1. Apply styles using Divi’s Design tab.

    2. Add custom CSS in the Advanced tab of a module.

    3. Use the Theme Options > Custom CSS area for site-wide styles.

Example: Change button color, add rounded corners to images, adjust spacing.

Class Activity – Style an Element with CSS
  • Students:
    1. Choose one element on their site (button, image, heading, etc.).
    2. Add at least two custom CSS changes to it.

Preview and adjust until it looks good on desktop and mobile.

  • Always test changes on both desktop and mobile.

  • Keep CSS organized and labeled with comments.
  • Avoid overusing CSS for things Divi already does well in its visual editor.
Homework

Homework:

  1. Apply at least 3 CSS changes to different elements across your site.

  2. Write down your CSS code in a document for future reference.

  3. Be ready to share your favorite CSS change next week.