Important CSS concepts

TL;DR / Overview

In Nilead, every element on your site follows the CSS box model, which defines how space is calculated and how layout is affected. From margins and padding to positioning, float behavior, and z-index layering, understanding these foundational CSS concepts is key to controlling your layout and avoiding unexpected behavior.

Prerequisites

• Basic familiarity with HTML and CSS

• Access to Nilead's Visual Website Builder

• Working knowledge of element selection and style panels

Walkthrough

What Is the Box Model?

All HTML elements are treated as boxes. The box model defines the structure of each element as having:

• Content (e.g., text or image)

• Padding (space around content)

• Border (visible line around the element)

• Margin (space outside the element that separates it from others)

These boxes stack and nest visually, and their dimensions can be controlled via the Style Panel.

Negative margin

Display Types

Display controls how an element behaves in layout. Common values include:

💡 Tip: Use inline-block if you want inline behavior with custom dimensions.

div {
  display: inline;        /* Default of all elements, unless UA stylesheet overrides */
  display: inline-block;  /* Characteristics of block, but sits on a line */
  display: block;         /* UA stylesheet makes things like <div> and <section> block */
  display: run-in;        /* Not particularly well supported or common */
  display: none;          /* Hide */
}

Inline Display

The default value for elements. Think of elements like <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn’t break the flow of the text.

Inline Block Display

An inline element that you can set width and height.

Block Display

Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

Position

Positioning Elements

CSS position defines how an element is placed on the page.

⚠️ Sticky and fixed elements may cause performance issues in complex scroll setups.

Relative Position

The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.

Static Position

The default position value of any box. This results in the box being laid out in normal flow and the properties of top, bottom, left and right (also known as box offset values) will have no effect because the box is considered not positioned.

Absolute Position

An absolutely positioned element is an element whose computed position value is absolute or fixed. An absolutely positioned box is explicitly offset with respect to its containing block, and the box does not participate in the normal flow at all. Its later siblings will not know about its existence in the greater layout.

Float & Clear

Float moves elements to the left or right, allowing text and other inline elements to wrap around.

• Use float: left/right to align elements

• Use clear: both (or left/right) to prevent overlap from preceding floats

⚠️ Floats can cause parent containers to collapse in height. Use clearfix techniques or avoid floats in modern layouts by using Flexbox or Grid.

Floats can be used to create entire web layouts.

Float’s sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires but will move down past the float.

NOTE While floats can still be used for layout, these days, we have much stronger tools for creating layouts on web pages. Namely, Flexbox and Grid.

#footer {   clear: both;   }

Clear has four valid values as well. Both are most commonly used, which clear floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively.

One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). If this parent element contained nothing but floated elements, its height would literally collapse to nothing.

Note Be careful with float. It can be difficult to debug errors.

Z-Index & Layering

z-index determines stacking order (which element appears on top).

• Higher values = closer to the viewer

• Default is 0

• Only works on positioned elements (e.g., not static)

Example:

.header { z-index: 10; position: relative; } 
.modal { z-index: 1000; position: fixed; }

Transform

Use transform to rotate, scale, skew, or move elements.

Examples:

transform: rotate(45deg); transform: translateX(20px); 
transform: scale(1.2);

Combine transforms:

transform: translateX(10px) rotate(15deg);

Use transform for animation, hover effects, or layout tweaks.

Transition

transition allows smooth changes between style states.

button { transition: background-color 0.3s ease-in-out; }

This adds animation when the background changes on hover or click.

Fonts, Spacing, and Performance

• Letter-spacing adjusts the space between all characters

• Font-kerning adjusts spacing between specific pairs

  font-feature-settings: "kern" 1; 
  font-kerning: normal;

• Web font formats:

  • WOFF2 = modern, small size

  • WOFF = compatible with most browsers

  • TTF, EOT = older, fallback only

• FOIT (Flash of Invisible Text) can occur if font-display is not set. Use:

  font-display: swap;

Advanced Typographic Features

There are two settings inside font files that define the space between characters:

1. Letter spacing: This is defined as side bearings on the left and right sides of each character.

2. Font kerning: This refers to specific adjustments between two characters

Spacing cannot be turned off at all. Kerning, on the other hand, is turned off by default in browsers and has to be turned on by you in your CSS.

p {
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

Flash of Unstyled Text

When using a custom font via @font-face, browsers used to display a fallback font in the font stack until the custom one loaded.

Flash of Invisible Text

Recently, browsers started to detect if the text was set in a custom font that hasn’t loaded yet, and made it invisible until the font did load (or X seconds had passed). This behavior can lead to permanently invisible content.

FAQs

1. Why is my container collapsing in height when I float elements inside?
Floats don’t expand the parent height. Use overflow: auto or clearfix.

2. Why won’t my inline element respect width and height?
Inline elements ignore those properties. Use inline-block or block.

3. How can I layer modal dialogs over other elements?
Set a high z-index (e.g., 1000) and use position: fixed.

4. Can I apply transform and transition together?
Yes — you can animate transforms using transitions.

5. When should I use position: absolute vs. fixed?
Use absolute for layout inside a container; use fixed for elements like sticky headers or modals.