logo-final-curve-version-05_1600851593
Menu Menu
Document Introduction to CSS

Introduction to CSS

Understand how CSS conflicts are resolved through cascade rules, specificity, inheritance, and style location—crucial for managing visual styles in Nilead.

Table of content

TL;DR / Overview

In CSS, conflicts happen when multiple style rules target the same element. The cascade defines how the browser decides which rule wins — based on rule order, specificity, inheritance, and !important. Understanding this hierarchy is essential for effective styling in Nilead’s Visual Editor and custom CSS.

Prerequisites

  • Familiarity with HTML and basic CSS syntax

  • Access to Nilead’s Style Panel or Custom Code panel

  • Some experience applying classes, IDs, and selectors

Walkthrough

What Is the Cascade?

The Cascade is the system by which the browser determines which CSS rule applies when multiple rules target the same element.

Example:

h1 { color: red; } 
h1 { color: blue; }
<h1>This is my heading</h1>
css-example-1
It's blue! Why?????

The text appears blue because the second rule comes later and has the same specificity.

Specificity: Who Wins?

Specificity measures how “targeted” a selector is:

  • Element selectors (h1, p) are least specific

  • Class selectors (.title) are more specific

  • ID selectors (#hero) are most specific (excluding !important)

Example:

h1 { color: blue; } 
.main-heading { color: red; }
<h1 class="main-heading">This is my heading</h1>
css-example-2
It's red! Why?????

It will be red, because .main-heading has higher specificity than h1.

The Nuclear Option: !important

The !important declaration overrides all other rules — even if they’re more specific or declared later.

Example:

#winning { background-color: red; } 
.better { background-color: gray !important; }
<p class="better" id="winning">One selector to rule them all!</p>

css-example-3

This paragraph will be gray, not red — because !important overrides everything else.

Use !important sparingly — it makes CSS harder to debug and override.

Inheritance: Styles That Cascade Naturally

Some properties (like color, font-family) are inherited by child elements.

body { color: blue; }

All nested text will be blue, unless another rule overrides it.

To control inheritance, CSS offers universal values:

Keyword

Behavior

inherit

Forces property to match parent

initial

Resets to browser default

unset

Behaves like inherit for inheritable properties, initial otherwise

revert

Reverts to browser/user styles (limited support)

Where You Write CSS Matters

CSS can be written in three places:

Method

Priority

Example

Inline CSS

Highest (except !important)

<h1 style="color: red;">

Internal CSS

Medium

Inside <style> in <head>

External CSS

Lowest

Linked .css files

🔥 Order matters — later rules can override earlier ones if they have equal specificity.

Cascade Order Summary

Final style = combined result of all applicable rules, resolved in this order (highest to lowest):

  1. Inline styles

  2. Internal stylesheets (in <style> tag)

  3. External stylesheets (linked in <head>)

  4. Browser defaults

Add !important to force a rule to override everything else.

FAQs

1. What happens if two rules have the same specificity?
The one declared later wins.

2. Does !important beat specificity?
Yes — it overrides specificity and order.

3. Can I override inherited styles?
Yes — just apply a more specific rule or use initial, unset, or inherit.

4. What’s the safest way to organize CSS in Nilead?
Use classes for reusability, and manage overrides via Style Panel or external CSS, not inline.

5. Can I use multiple style sheets?
Yes, but be mindful of load order — stylesheets loaded later can override earlier ones.

From this category

Responsive & Breakpoints

Important CSS concepts

Introduction to CSS Selector

Important HTML elements

Introduction to HTML

Discord chat

We're available Monday–Friday, security and critical bug fixes are available 24/7.

Facebook page

Get the latest news and updates regarding Nilead platform and services.

Company

plus-icon_1609925972 minus-icon_1609925972
What we do Career Contact Us

Use Cases

plus-icon_1609925972 minus-icon_1609925972
For Business Owners For Marketing Teams For Advanced Users

Industries

plus-icon_1609925972 minus-icon_1609925972
See More...

Resources

plus-icon_1609925972 minus-icon_1609925972
Blog Documentation Features FAQs Choose Right Website Solutions

Tools

plus-icon_1609925972 minus-icon_1609925972
Website Cost Calculator Website Platform Discovery Website Launch Action Plan Analytics Tool Discovery AI Model Discovery Tool Color Palette Generator

Social

plus-icon_1609925972 minus-icon_1609925972
facebook-2x_1611744290 behance-2x_1611744289 instagram-2x_1611744290
Terms of Use

|

Privacy Policy
© Copyright © 2022 Nilead. All rights reserved.