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.
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:
- HTML = structure (content)
- CSS = design (colors, fonts, spacing)
- CSS can be applied in three ways:
- Inline CSS (inside HTML tags)
- 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:
- Apply styles using Divi’s Design tab.
- Add custom CSS in the Advanced tab of a module.
- 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:
- Choose one element on their site (button, image, heading, etc.).
- 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:
- Apply at least 3 CSS changes to different elements across your site.
- Write down your CSS code in a document for future reference.
- Be ready to share your favorite CSS change next week.