CSS Basics

Syntax

selector {property : value}


selector1 selector2, selector1 selector3 {
 property:value;
        
}

@direction argument

@direction argument (conditional_argument:value) AND (conditional_argument:value) {

    block_selector {
        property : value;
    }
}

Selectors

DEMO

Reference

Cascading

CSS styles can be specified in many ways, but they will all cascade into one style sheet in the end.

1. Browser default
2. External style sheet
3. Internal style sheet
4. Inline style

Application method matters

Selectors have different weight

1. element
2. .class
3. #id

Cascading order

Combining selectors makes selector more specific, 

div.container {
    z-index:1;
}

body div.container  {
    z-index:10;
}

html body div.conatiner {
    z-index:100;
}

!important

.container {
    z-index:1000!important;
}

Cascading order

Action state or media state add to selectivity

div.container {
    z-index:1;
}

div.container:hover  {
    z-index:10;
}
@media screen {
    div.container{
        z-index:100;
    }
}

Cascading order

Inheritence

During the cascade, property values are resolved tocomputed values. Some of these values are inherited from its parent’s element in the document tree.

<p style="color: red; border: 1px solid #000;"><q><span>red text</span></q></p>

complete reference

Box Model

For each element in the document a "box model" is calculated accounting its size in pixels

Layout Process

For each element in the document a "box model" is calculated accounting its size in pixels

Initial render is always so

But repaints which try to happens 60 times a second, may skip some of the steps if the browser realizes nothing changed

CSS values can be changed via JS, media queries, user actions and animations. some CSS properties require Layout and repaint, some do not 

CSS properties and their "cost"

more info

Box Model

CSS 3 box-sizing property

Box Model

CSS 3 box-sizing property

Layout Properties

Display

display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline.

display: block;

• p, h1-6, div and many others are block by default
  • start and occupy a whole line ( no sibling elements)
  • produce a line break after them
  • can have width,height, margin and padding 

display:block

display:block

display:block

display: inline-block;

• button, select few other others are inline-block
  • they allow sibling elements and child block elements
  • they sit in the line context and are effected by vertical-alignement, text-align, line-height  etc. 
  • their initial dimensions are based on their content 
  • width, height and all margins and padding  properties affect them.
  • they can not break over lines, but do not produce line breaks on their own.

display:inline-block

display:inline-block

display:inline-block

display: inline-block;

• span, img, button, input and many others are inline 
  • they do (should) not contain block elements
  • width or height propeties don not effect them
  • they take only thier content spance

display:inline

display:inline

display

:inline

display: table

• table and its natuaral child tags (tr,td,th) will inherit the relevant table display property - table-row, table-cell but it can be used on any element
• display:table container is in itself similar to :block, but used to contain other :table-row or :table-cell elements
• table-row takes the whole row and produces line break
• table-cell takes as much space as possible of the row dividing the available space in the number of its sibling cells 

display:table

display:table-row

display:table-row

display:table-cell

display:table-cell

Reference for use

display: flex

Learn flexbox interactivly

producing complex layouts with css was difficult and a new model was needed, flexbox is the new way to do layouts, now made even more as browser support is ~96%

• display:flex is added to the container
• its child nodes expand and shrink to share the container space dynamically by their  width/height and some flex related properties

complete reference

Float elements

Floats were initially made to allow text to wrap around an image

but were soon adopted as a layout tool (sidebars, navigation bars etc)

float makes block elements behave more like inline-block,  but there are some differences:

• float nodes do not count for the height the parent container
• float can be disabled via the clear property (1-2 directions)

complete reference article

Margin and center

margin can be used to center elements HORIZENTALY in container

• width needs to be set (max-width is also OK)
• display needs to be block

text-align is used to center internal text

vertical-alignment is used in inline elements only

Values

the simplest unit is obviously the pixel (px) but it is not really absolute screen pixels- some devices have DPR (Device pixel ratio)

we gain better control when using relative units - 

Position Property

Position changes the layout  drastically possible values:

reference

Overflows

Overflow property

reference

• only block elements with height are relevant for overflow property
• the default is visible so content can overflow from set height containers!

text-overflow property

• allows for text overflow with ellipsis (....), requires the text not to break in white space - use with white-space:nowrap

reference

Position and Transform

left,right,top & bottom properties allow to change the element's position in relative and absolute positioning

this affects other elements in the layout

the transform property allows to change element's geometry in the composition stage

so while 

and 

look like they do the same thing they are different

this is particularly important for animations

.demo {left:10px;}

.demo {transform:translate-x(10px);}

Browser's Layout internals

will-change more info

The browser is smart to separate some elements to groups and to re-layout and re-paint only relevant groups. 

we can help the browser know things will be repainted often (and make the browser promote element to a layer) via the will-change: property 

layers more info

Sass

• With the complexity of web pages CSS became cumbersome to maintain, sass and other preprocessors came to help with making css more DRY and maintainable

core features

• variables
• @mixin
• @function
• @extend

Variables

variables are used/assigned with $ prefix, types are interfered.

variables can have default values using !default

//colors.scss
$btnColor:#22ddee;

//button.scss
$btnColor:#ddffee!default;

.btn{
    color:$btnColor

}

///main.css
@import "colors.scss";
@import "button.scss";


//compiled
.btn{
    color:#22ddee;

}

Mixins

simple functions can be declared using @mixin 

//declration
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

//use
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

//compiled

.page-title {
    font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

Mixins and functions

mixins can have arguments and default values

@mixin sexy-border($color, $width:10px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

there are also functions

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

Reuse classes @extend 

one can keep DRY with @extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}


//compiled

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}