Auto

The auto keyword in CSS has different effects depending on the property it is applied to. For width, it typically lets the browser calculate the width, and for margin, it is often used to center elements.

Example 1: Centering a Block Element

/* In this example, we are centering a div within its container. */
.container {
  width: 100%;
  border: 1px solid black;
}

.centered-element {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid red;
}

Explanation By setting margin-left and margin-right to auto, the browser automatically calculates and applies equal margins on both sides of .centered-element, effectively centering it horizontally within .container.

Example 2: Automatic Width

/* Here, the width of the div is automatically determined by its content. */
.auto-width {
  width: auto;
  border: 1px solid blue;
  display: inline-block; /* Or float: left; */
}

Explanation When width is set to auto, the element's width will adjust to the width of its content. If the element is a block-level element, it would normally take up the full available width.

Example 3: Flexbox Sizing

/* This example shows auto margins in a flex container. */
.flex-container {
  display: flex;
  height: 100px;
  border: 1px solid green;
}

.flex-item {
  width: 50px;
  height: 50px;
  margin-top: auto;
  margin-bottom: auto;
  background-color: lightgreen;
}

Explanation In a flex container, an auto margin on the cross-axis (in this case, margin-top and margin-bottom) will absorb any extra space, centering the flex item vertically.

Example 4: Grid Placement

/* Demonstrates automatic grid item placement. */
.grid-container {
  display: grid;
  grid-template-columns: 100px auto 100px;
  gap: 10px;
  border: 1px solid purple;
}

.grid-item {
  background-color: lavender;
  padding: 20px;
}

Explanation Here, the second column of the grid is set to auto. This means it will take up the remaining available space in the grid container after the fixed-width columns are accounted for.

Example 5: Table Layout

/* An example of auto table layout algorithm. */
.auto-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

.auto-table td {
  border: 1px solid orange;
  padding: 10px;
}

Explanation With table-layout: auto, the width of the table and its cells is determined by the content within the cells. The browser will adjust column widths to fit the content.

None

The none keyword is used to specify that a property should have no value or that a feature should be turned off. It's commonly used with properties like display, border, and background.

Example 1: Removing a Border

/* This CSS removes the default border from an element. */
.no-border {
  border: none;
  padding: 10px;
  background-color: lightgray;
}

Explanation Setting border: none; explicitly removes any border that might be applied to an element by default or by another style rule, resulting in an element with no visible border.

Example 2: Hiding an Element

/* This example completely hides an element from the page. */
.hidden-element {
  display: none;
}

Explanation When display is set to none, the element is completely removed from the document flow. It takes up no space and is not visible to the user or screen readers.

Example 3: No Background Image

/* Here, we ensure an element has no background image. */
.no-background-image {
  background-image: none;
  background-color: lightblue;
  padding: 20px;
}

Explanation The background-image: none; declaration prevents any background image from being displayed. This is useful for overriding inherited background images.

Example 4: Disabling Pointer Events

/* This makes an element unresponsive to mouse clicks or hovers. */
.no-pointer-events {
  pointer-events: none;
  padding: 20px;
  background-color: salmon;
  color: white;
}

Explanation pointer-events: none; prevents the element from being the target of pointer events, such as clicks and hover effects. The cursor will pass through it to elements underneath.

Example 5: Removing List Styling

/* This example removes the default bullets from an unordered list. */
.no-list-style {
  list-style-type: none;
  padding-left: 0;
}

Explanation By setting list-style-type: none;, the default markers (bullets for <ul>, numbers for <ol>) are removed from the list items, creating a plain list of items.

Initial

The initial keyword sets a CSS property to its default value as defined by the CSS specification. This value is the same for every element.

Example 1: Resetting Color

/* This resets the color of a paragraph to the browser's default. */
p {
  color: blue; /* Set a color */
}

.initial-color {
  color: initial; /* Reset to the default color (usually black) */
}

Explanation Even though the paragraph's color is set to blue, the .initial-color class resets the color property to its initial value, which is typically black for most browsers.

Example 2: Reverting Display Property

/* Resetting the display property of a list item. */
li {
  display: inline-block; /* Change the display type */
}

.initial-display {
  display: initial; /* Reset to the default display (list-item) */
}

Explanation Here, the display of list items is changed to inline-block. The .initial-display class reverts it to display: list-item, its default value in the CSS specification.

Example 3: Default Background Color

/* Setting the background color back to its default. */
div {
  background-color: lightgreen;
}

.initial-background {
  background-color: initial; /* Resets to transparent */
}

Explanation The initial value for background-color is transparent. This will make the background of the .initial-background div transparent, showing the background of its parent element.

Example 4: Restoring Font Size

/* Resetting the font size to the browser's default. */
body {
  font-size: 20px;
}

.initial-font-size {
  font-size: initial; /* Resets to the browser's default font size (often 16px) */
}

Explanation The font-size is reset to the browser's default, which is typically 16px. This overrides the 20px font size inherited from the body.

Example 5: Initial Border Style

/* Reverting border style to its initial state. */
.custom-border {
  border-style: dashed;
}

.initial-border {
  border-style: initial; /* Resets to 'none' */
}

Explanation The initial value for border-style is none. Applying border-style: initial; will remove the dashed border from the .initial-border element.

Unset

The unset keyword acts as either inherit or initial depending on whether the property is inherited by default or not. For inherited properties, it behaves like inherit, and for non-inherited properties, it behaves like initial.

Example 1: Unsetting Color (Inherited)

/* Unsetting an inherited property like color. */
.parent {
  color: green;
}

.child-unset {
  color: unset; /* Inherits 'green' from .parent */
}

Explanation Since color is an inherited property, unset makes .child-unset inherit its value from the parent element, resulting in green text.

Example 2: Unsetting Border (Non-Inherited)

/* Unsetting a non-inherited property like border. */
.element-with-border {
  border: 2px solid red;
}

.unset-border {
  border: unset; /* Resets to the initial value (none) */
}

Explanation border is not an inherited property, so unset will reset it to its initial value, which is none. The red border will be removed.

Example 3: Unsetting All Properties

/* A common use case is to reset all properties. */
.everything-unset * {
  all: unset;
}

Explanation Using all: unset; on all descendants of .everything-unset will reset all inherited properties to their inherited values and all non-inherited properties to their initial values.

Example 4: Unsetting Margin

/* Unsetting the margin property. */
div {
  margin: 10px;
}

.unset-margin {
  margin: unset; /* Resets to initial value of 0 */
}

Explanation margin is not an inherited property, so unset will reset it to its initial value of 0, removing any margin from the .unset-margin element.

Example 5: Unsetting Font Weight

/* Unsetting the font-weight property. */
strong {
  font-weight: unset; /* Inherits the font-weight from its parent */
}

Explanation font-weight is inherited. If a <strong> tag with this style is inside a paragraph with a normal font weight, it will also have a normal font weight, overriding the browser's default bold styling for <strong>.

Revert

The revert keyword reverts a property to the value it would have had if no styles from the current author's style origin were applied. It effectively rolls back to the browser's default stylesheet or user-agent styles.

Example 1: Reverting Color

/* Reverting a color back to the user-agent's default. */
a {
  color: red; /* Author style */
}

a.revert-color {
  color: revert; /* Reverts to the browser's default link color */
}

Explanation The .revert-color link will ignore the author's style of red and revert to the browser's default color for links, which is typically blue.

Example 2: Reverting Display Property

/* Reverting the display of a block element. */
div {
  display: inline; /* Author style */
}

.revert-display {
  display: revert; /* Reverts to the default 'block' for a div */
}

Explanation Even though the author's stylesheet sets div elements to display inline, the .revert-display class will cause the div to revert to its user-agent default display value, which is block.

Example 3: Reverting Font Size

/* Reverting font-size to the browser's base size. */
body {
  font-size: 12px; /* Author style */
}

.revert-font-size {
  font-size: revert; /* Reverts to the user-agent's default font-size (usually 16px) */
}

Explanation This will make the text inside .revert-font-size ignore the 12px font size from the body and revert to the browser's default base font size.

Example 4: Reverting List Style

/* Reverting list-style-type for an unordered list. */
ul {
  list-style-type: square; /* Author style */
}

.revert-list-style {
  list-style-type: revert; /* Reverts to the default 'disc' */
}

Explanation The .revert-list-style unordered list will use the default disc bullets instead of the square bullets defined in the author's stylesheet.

Example 5: Reverting All Properties

/* Reverting all properties of an element. */
blockquote {
  background: lightyellow;
  border-left: 5px solid gold;
  font-style: italic;
}

.revert-all {
  all: revert; /* Reverts all properties to the browser's defaults */
}

Explanation The .revert-all blockquote will lose its yellow background, gold border, and italic styling, reverting to the browser's default rendering for a <blockquote> element.