logo-final-curve-version-05_1600851593
Documents |

Important CSS concepts

Table of Content

Box model

All HTML elements are boxes. Every element on your web page is treated as a box (with an invisible boundary around each element). These boxes can be nested, stacked on top of each other depending on their properties.

box-model
Created by Julia Evans


Negative margin

negative-margin


Display

Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves.

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.

NOTE An inline element will not accept height and width. It will just ignore it. An inline element will accept margin and padding but only horizontally, not vertically.

inline-element


Inline Block Display

An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a width and height which will be respected.

inline-block-element


Block Display

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text “blocks” like <p> and <h1>. 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.

block-element


Position

positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)

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.

Relative Position

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

The box will initially be laid out according to normal flow, then depending on the aforementioned box offset values, will be offset relative to its normal position.

position-relative


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.

position-absolute


Sticky Position

A sticky positioned box works similarly to that of a relatively positioned box. The difference is that the offset is computed to the nearest ancestor with a scrolling box, or the viewport if no such ancestor exists.

position-sticky

Note Scrolling elements containing fixed or sticky content can cause performance and accessibility issues.

Float

Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap.

float


Floats can be used to create entire web layouts.

float-2

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.


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.

float-not-cleared

#footer {   clear: both;   }

float-cleared

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.

float-cleared-2


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.

float-cleared-3

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

Z-Index

The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis.

NOTE When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).

If several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained like this

  1. The background and borders of the root element

  2. Descendant non-positioned blocks, in order of appearance in the HTML

  3. Descendant positioned elements, in order of appearance in the HTML

zindex


Transform

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;


Transition

Control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

transition


Web font

When you purchase web fonts licensing, you receive a package of font files that typically include at least some of the following formats:

  • Embedded OpenType (EOT):  is a legacy format developed by Microsoft. Ignore this if you don't want to support old IE browsers.

  • TrueType (TTF):  is a font format developed by Microsoft and Apple in the 1980s. Ignore it if you don't want to support old browsers.

  • Web Open Font Format (WOFF):  was developed in 2009 as a wrapper format for TrueType and OpenType fonts. It compresses the files and is supported by all modern browsers.

  • Web Open Font Format 2 (WOFF2):  is an update to the original format. Developed by Google, this is considered the best format of the bunch because it offers smaller file sizes and better performance for modern browsers that support it.


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

kerning-explainer

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.

Share

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.