Elementor Custom CSS Masterclass For Beginners

Name: Elementor Custom CSS Masterclass For Beginners
Rating: 4.7 (23 reviews)

Learn CSS for Elementor from the scratch!

Created byKarthik Rajanala

Last updated 10/2021

English

English [Auto],

What you'll learn

Learn CSS from the scratch and how it works
Actionable Elementor CSS knowledge that you can apply today
Practical CSS knowledge that you may need for your professional/freelance projects
Learn how to use CSS in Elementor environment to get the best of both worlds

Course content

4 sections • 23 lectures • 2h 18m total length

Course Overview2:26
Get a brief overview of the course.
HTML and Elementor basics10:21
Understand Elementor basics.
Learn what HTML is and how to understand the structure by inspecting Elementor designs in your browser.
Understand various HTML attributes such as class, ID and more.
What is CSS19:49
Understand what CSS is, how it affects your Elementor designs and how to style elements using CSS in Elementor interface.

CSS Text Properties9:05
CSS Backgrounds10:44
CSS Borders5:54
Learn how to style any element in Elementor with borders using shorthand and individual sides, applying solid, dotted, or ridge borders, and targeting elements via class selectors.
CSS Margin & Padding3:44
Explore the CSS box model by applying margin and padding to elements, and use the browser inspector to see padding (green area), border, and margin in action.
CSS Comments1:25
Learn how to add comments in css for reference, placing them above code blocks or after a property value, using two forward slashes and two stars so browsers ignore them.
CSS Height & Width3:44
Explore how to set height and width in Elementor with min-width, max-width, min-height, max-height, and see how the box model, class and id selectors, and flexbox influence element sizing.
CSS Specificity7:50
Learn how CSS specificity determines which styles apply by comparing id, class, and tag selectors. See color and icon styling respond to the cascade, and !important can override specificity.
CSS Units6:27
Explore css units such as rem, px, vw, vh, and percentages, and learn how font sizes inherit from the root element and containers through practical examples.

Special CSS Selectors10:17
Master advanced CSS selectors to target menu items and sub menus using descendant, direct child, and adjacent and general sibling selectors with practical, real-world examples.
CSS Positioning3:37
CSS Pseudo Classes & Elements12:53
Explore CSS pseudo-classes and pseudo-elements to style tabs, accordions, and toggles. Use hover, nth-child patterns (odd and even), and content-based tooltips.
Message Bubbles3:03
Learn to create a chat-style message bubble layout for paragraphs using a text editor widget. Style odd and even paragraphs with blue backgrounds, padding, and border radius to mirror conversation.
CSS Functions1:12
Explore css functions such as calc, max, and min to build flexible styles with expressions like 100% minus 50px or 100% minus 50vw, and apply min and max constraints.
CSS Transitions3:25
Learn to apply css transitions to smooth property changes, covering duration, timing function, and delay, with examples for background and hover effects and cross-browser prefixes.
CSS Transforms4:27
CSS Animations5:14
Master CSS animations by naming animations, setting duration, timing, and delays, plus iteration counts and directions. Create keyframes for scale and rotate and ensure cross-browser prefixes.
Elementor Form Styling4:52
Target Elementor form elements using id, class, or attribute selectors to customize inputs, labels, and placeholders, including text areas and focus states with background and border changes.
CSS Miscellaneous1:25
Explore how display, visibility, and opacity control elements in Elementor, including the default flex layout, hiding with display none, and visibility or opacity adjustments.
Practical Examples4:08

Requirements

No Coding Knowledge Required
Basic Knowledge of Elementor
WordPress Basics

Description

Hi, I am Karthik Rajanala a web developer and educator. With an extensive knowledge in HTML, CSS, Js, PHP, Java and more I will breakdown the technical aspects of CSS and make it easy for anyone to understand it.

This course teaches Custom CSS for Elementor Beginners in a way that has never been done before. Here are some major highlights of this course:

Get started by understanding the basics of HTML and Elementor that you need to understand CSS properly.
In the next section you'll learn what CSS is, how browsers apply their own CSS, the very cascading nature of CSS and how to use Selectors to target any Elementor Section/Column/Widget and style them.
In the next few sections you'll understand CSS text properties and how to target text elements such as Elementor heading widget, Elementor text editor or even text within any Elementor widget such as Elementor tabs, accordions and more.
Learn important CSS properties such as backgrounds, gradients, padding, margin, border and understand the box model of CSS and how it impacts your Elementor designs.
Learn about different CSS units, complex CSS selectors and css transitions, animations, transforms and how they can add a layer of depth to your Elementor designs.

Who this course is for:

Elementor Beginners who want to learn CSS from the scratch
Freelancers/Professionals who want to step up their web design game
Anyone using Elementor to build their websites

Elementor Custom CSS Masterclass For Beginners

What you'll learn

Explore related topics

Course content

Introduction To CSS3 lectures • 33min

CSS Basics8 lectures • 49min

CSS Beyond The Basics11 lectures • 55min

Closing Statements1 lecture • 2min

Requirements

Description

Who this course is for: