How CSS Works

A closer look behind the scenes.

    Three Pillars of Writing HTML and CSS

    What happens to CSS when a webpage is loaded?



    • 1) Load HTML: Carrega o documento HTML.
    • 2) Parse HTML: Decodes the code, line by line.
    • 3) DOM: Com esse processo, o browser cria o Document Object Model (DOM). This describes the intire web document, basically like a family tree, with parents, children and sibling elements. So this is where de decoded HTML code is stored.
    • 4) Load CSS: Loads the CSS files.
    • 5) Parse CSS: Nessa parte, temos dois steps.
      a) Resolve conflitos de declarações de CSS através de um processo chamado de cascade.
      b) Processar valores finais de CSS. Por exemplo, converter uma margin definida em porcentagem para pixels.
    • 6) CSS Object Model (CSSOM): Após tudo isso, o final CSS é armazenado em uma estrutura parecida com uma árvore.
    • 7) Render Tree: DOM + CSSOM = tudo o que precisamos para render the page.
    • 8) Website rendering: Agora o browse usa o algorítimo Visual Formatting Model para calcular algumas coisas como box model, float e posições.
    • 9) Final rendered website: Website é desenhado na tela e o processo é terminado.


    The CSS Parsing Phase

    Step One - Cascade
    • Process of combining different stylesheets and resolving conflicts between different CSS rules and declarations, when more than one rule applies to a certain element.
    • CSS Sources:
      a) Author: declarações colocadas em nosso CSS são chamadas de Author Stylesheets.
      b) User: CSS coming from the user (quando ele muda algo default do browser).
      c) Browser (user agent): CSS set by the browser. Por exemplo, o azul default da anchor tag.
    • Como o CSS resolve os problemas de conflito:
      a) A primeira ordem de importância é por quem é o autor do CSS.

      b) Caso não resolver pela ordem, ele irá analisar por specificity, ou seja, pelo resultado de uma conta com a quantidade de inline styles, ids, classes e elements e pseudo-elements.
      Elements: a, div.
      Pseudo-elements: :hover, ::after.

      c) Caso todos os níveis de specificity serem iguais, ele irá levar em consideração o último CSS escrito. Por isso é importante que o CSS do author sempre fique em baixo dos externos, para que ele não seja overwritten.


    Step Two - Calculating Values
    • 1.5rem = 1.5 x tamanhoAtualDaFonte


      • Value Processing


    The Visual Formating Model
    How CSS renders a Website.

    Step One - The Box Model

    Heights and Widths:
    • Caso esses valores não sejam definidos, valerá o tamanho do content da box para calcular seu tamaho.


    • Veja que nesse caso, o valor final será 140px, não exatamente o que queriamos.

    The Box Model with box-sizing: border-box
    • Ao definir border-box, o width e height que informarmos serão utilizados para o tamanho total da caixa, e não somente da área do conteúdo.
    • This means that the borders and paddings that we specify, will of course reduce the inner width of the content area, intead of adding them to the total height or width of an element.
    • (Provavelmente significa que ao adicionar paddings e borders, elas irão diminuir o tamanho da box interna, permanecendo com o tamanho de 100px.
    • If we look at the height and width calculations now, in this case, the actual total width of a box a equal to the specified width and height.
    • So, if we now define some paddings or borders, they will not get added to the dimensions of the box.
    • If we look at the example image, the final height will be 100px, just as was specified for the height of the element.

    Box Types: inline, block-level and inline-block
    • Block-Level boxes
      a) display: block.
      Exemplo: divs em configuração default.
      b) Ocupam 100% do width do parent.
      c) Cria line-breaks antes e depois dela, por isso elas são alinhadas verticalmente.

    • Inline-boxes
      a) display: inline.
      b) Somente ocupa o espaço da box, mas não deixa passar texto em cima dela.
      c) The height and width proprierties do not apply.
      d) Somente podemos adicionar horizontal paddings and margins on inline-elements.

    • Inline-block boxes
      a) display: inline-block.
      b) Somente usam o content deles, não pulam linhas.

    Positioning Schemes: Normal flow, absolute positioning and floats.
    • Normal flow
      a) default.
      b) É o que ocorre com um elemento no caso de você não fazer nada com ele.

    • Floats
      a) float: left, float: right.
      b) Elemento é retirado do normal flow e enviado para a esquerda ou direita, até encostar na borda of its containing box ou de outro elemento float.
      c) Textos e inline elements (display: inline) irão ficar ao redor do element com float.
      d) The container will not adjust its height to the element. O que pode ser problemático.

    • Absolute Positioning
      a) position: absolute, fixed.
      b) Elemento é retirado do normal flow, porém nesse caso, ele pode ser enviado para fora da área de conteúdo e até ficar em cima de conteúdos.
      c) Para não deixar o absolute ficar em cima de outros conteúdos, utilizamos o stacking context.

    Staking Contexts
    • This is what determinates in which order elements are rendered on the page.
    • Stacking são layers, criados por propriedades como z-index.