CSS Basic

Cascading Style Sheets (CSS) - style sheet language used for specifying the styling of an HTML document

a { color: blue; } - CSS rule example

• color - property
• blue - value

Styles Connection

style="CSS properties" - inline CSS

• e.g. <a style="color: blue;">

<style>CSS rules</style> - internal CSS

• e.g. <style>a { color: blue; }</style>

<link rel="stylesheet" href="stylesFilePath.css"> - external CSS

Fonts

@font-face - at-rule which specifies available fonts for texts

• separate font-face is required per each font and weight

@font-face {
  font-family: 'Quicksand';
  src: url('/fonts/Quicksand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('/fonts/Quicksand-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Mono';
  src: url('/fonts/PTMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

font-family - specifies a font name, which will be used by font properties
src - required. it references either locally installed font, or font on remote server

• it also specifies font format and technology

font-display

• swap - avoid blank text during font load

Formats

TrueType Font (TTF) - universal format, suitable for both desktop and web

• font-face format: truetype

Web Open Font Format (WOFF) - preferred for web, due to smaller file size

• font-face format: woff
• WOFF2 - new version with better compression
• font-face format: woff2

Optimization

1. preload font using rel="preload"
2. prefer WOFF2 format
3. enable aggressive caching for font files. this is safe as they are static and never change

Icon Font

icon font - a font which contains icons. icons can be used within text equally with all other characters

• each icon has assigned custom Unicode value. so it can be used in HTML as HTML entity, or even in CSS within content property

Measuring

Units

px - pixel units. they are most common

percentages - are relative to the size of the parent container element

• in rare cases are relative to the size of an element to which property is applied. e.g. background-position

viewport units - are relative to the viewport dimensions of a device

• vw - viewport's width. e.g. 10vw - would be 10% of the viewport's width
• vh - viewport's height
• vmin - viewport's smaller dimension, width or height
• vmax - viewport's bigger dimension, width or height

mobile viewport units

• lvh - refers to the height of the largest possible viewport, i.e. with toolbar collapsed. this is equivalent to simple vh
• svh - refers to the height of the smallest possible viewport, i.e. with toolbar fully shown
• dvh - refers to the dynamic viewport height. so underlying value in pixels will change as soon as toolbar is collapsed or shown back

container query units

• cqw - relative to container query width
• cqh - relative to container query height

em - relative unit, based on the element's font size
rem - relative unit, based on the font size being set for html selector (r - root)

Pixel Density

pixel density
pixels per inch (ppi)

device pixel ratio (DPR) - amount of device pixels per 1 CSS pixel

intrinsic size - natural dimension of an element

• for text: dimension is defined by the amount of text
• for HTML elements: dimension is defined based on content and browser default styles
• for images: dimension is defined by amount of pixels. intrinsic size should not be confused with rendered size
• for devices: dimension is defined by the size of device screen size in pixels. intrinsic size should not be confused with screen size in CSS pixels

Box Model

block box - is used for most elements

• block element takes the whole width of the parent element by default
• each new block element is rendered under the previous sibling

inline box - is used for elements with text content

inline-block box - a combination

• inline-block element has all the properties of inline element, but is fully affected by "width", "height", "margin", "padding", "border"

margin collapse - special occasion when vertical margins of elements overlap instead of being added up

• margin collapse happens only for vertical margins. it is possible for sibling elements or for child with parent
• in order to overcome this behaviour for child and parent, padding or border can be added to parent element
• margin collapse doesn't occur inside flex container
• margin collapse doesn't occur for inline-block elements

Inline vs Block

1. inline element is not affected with "width" and "height"
   width and height of element are same as the size of inner content
2. is rendered at the same line near the previous sibling
3. is partly affected with "margin" and "padding". it receives only horizontal spacing
   in case of padding vertical spacing increases visually, but element does not push off other elements
4. is partly affected with "border"
   likely to padding case, vertical borders do not increase the area occupied with an element

Cascade

cascade - is a core algorithm in CSS (C - Cascading), defining which styles, among several conflicting ones, should be applied to an element

• cascade resolves styles based on:
• relevance - only relevant rules are considered in cascade. if rule's selector doesn't target an element, it’s considered irrelevant for this element
• origin and importance - origin refers to where styles come from, i.e. author, user or user-agent styles. importance refers the presence of !important
• specificity - see Specificity
• scoping proximity - locally scoped styles (e.g. defined in media queries or shadow DOM) overwrite global styles
• order of appearance - those styles which are declared lower in a stylesheet override those which are declared higher

!important - keyword, used to mark CSS property which should override all selectors and inline styles

Specificity

specificity - selector-based algorithm for choosing one CSS property among several conflicting ones

• the fewer elements a selector can potentially select, the more specific it is
• media query does not affect specificity

Selector Specificity From Weakest to Strongest

1. by element or pseudo-element
2. by class, pseudo-class or attribute
3. by id
4. inline style specificity is higher then any style set with selector

Inheritance

inheritance - principle when element automatically gets CSS property set on the parent element

• properties which can be inherited are mostly related to text, i.e.:
• font-family, font-weight, font-size, font-style
• text-align, text-transform, text-indent
• color, line-height, letter-spacing, word-spacing, white-space, direction
• other inherited properties are:
• cursor, visibility, list-style, border-collapse

Responsive Design

responsive design - approach for making website UI good looking and functional on various device types and screen sizes

Media Query

@media (breakpoint) { CSS rules } - syntax

• e.g.
• @media (min-width: 800px) { .footer { flex-direction: row; } } - styles are triggered, if browser window is 800px or more
• @media screen and (min-width: 600px) and (max-width: 900px) - several conditions

breakpoint - screen width at which styles change

• common breakpoints are: 640px, 768px, 1024px, 1280px, 1536px
• 320px - is usually the lowest supported screen width

media type

• screen
• print

Container Query

container query - allows to adjust styles when element changes its size

.form {
  container-type: inline-size;
  container-name: form;
}

@container form (min-width: 768px) {
  .field {
    width: 240px;
  }
}

At-rules

@import - is used to import styles from other file

• e.g. @import url("./global.css");
• should be defined at the top of file

@font-face - Fonts
@media - see Responsive Design
@container - see Responsive Design

@support - is used for fallback styles for old browsers

@supports not (height: 100svh) {
  .h-svh {
    height: 100vh;
  }
}

Global Values

inherit - get the property from the parent element. it forces inheritance

initial - set the default value for the property. that is browser default

unset - acts as inherit if the property naturally inherits from its parent, otherwise acts as initial

• all: unset - disable all styles

revert

revert-layer

Value Functions

calc()

min()

max()

clamp()

• e.g. clamp(50%, 700px, 90%)
• clamp can be used instead of media queries

CSS Variables

--penguin-skin: gray;
background-color: var(--penguin-skin);

Useful

Block Element Modifier (BEM) - methodology, which is used to keep CSS modular and avoid class name conflicts

• BEM is based on CSS classes which follow special syntax: block__element--modifier
• block - universal component used throughout a website. e.g. card - such class is put on block root element
• element - HTML element within block. e.g. card__heading
• modifier - is optional. it defines the appearance, state, or behavior of a block or an element. e.g. card__heading--sm