HTML&CSS basics

Let's start from practice

Basics

Inside the page

HTML tags

Doctype

HTML5

Already historical

XHML Strict XHMTL Transitional

CSS selectors

CSS reset

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Historically *-reset was considered less-effecient, but for now there is no considerable difference.

Specificity

Which one will apply?

What about here? What is more specific?

Specifity Calculation

0001 Element, Pseudo Element
0010 Class, Pseudo class, Attribute
0100 Id
1000 Inline Style

Id is more specific than a class is more specific than an element.

In our example

To make our life easier - it's better to avoid the complex sequences and random overrides in general.
Noone actually does this math in practice.

Cascade

Specifity is only one part of the puzzle named Cascade. How it all works in together:

  1. All declarations to the element are found
  2. They are sorted by origin
    • Author Style Sheets
      • External style sheet
      • Internal style sheet
      • Inline style
    • User Style Sheets
    • User Agent Style Sheets
  3. Specificity is calculated (this one we already know)
  4. If two rules are equal in all of the above, the one declared last wins.

Directive "important!"

Jumps out of the cascade to the highest level of priority.

It's better to aviod the situations where it's needed.

Inheritance

The idea behind inheritance is simple: elements inherit styles from their parent container. However, not all css properties are inherited.

Css properties that don't inherit

To force the inheritance of a certain property one can use:

Box model

box-sizing: content-box;

Has been standard for many years.

box-sizing: border-box;

Box-sizing: border-box now makes our life much easier! IE8 and up.

Box rendering

Positioning

Positioning

Positioning

Measurements

Absolute

Relative

% and ems are the best for responsible designs and flexible grids.

Layouts

Fixed

Fluid

Elastic

Fluid layout with min-width and max-width defined.

Useful Photoshop shortcuts

Don't forget to turn on the Auto-select: Layer in the top menu!

/

#