Advanced CSS

Cascading Style Sheets, used to specify the layout of web pages.

    • Write the style.css on the order it will appear on the page.

    • Write the elements that we want to be visible, specify their corners.
    • Sintax: polygon(x y, x y, x y, x y)
      a) superior left corner.
      b) superior right corner.
      c) inferior right corner.
      d) inferior left corner.
    • It is also possible to create other figures, using 3 or more points.
    • Some figure examples:

    Centering things
    • You can create an element div and write: transform: translate(position, position).
      Example: transform: translate(-50%, -50%).
      With this, the element will base itself on the browser size, and not on the elements that it is inside of.
      On this case, -50% will shift half of the width to the left, and the other -50% will shift 50% of the element's height to the top, centralizing it.


How to select all divs with a certain class, ID and more.


Animation, animation-name, transform examples, repeting animations. Outdoor project example.

Animated Button (from Outdoors project)

Display inline, inline-block and block, pseudo-elements, ::after, hover transitions, difference between position absolute and relative


transition(), scale(), rotate()


ease, ease-in, ease-out, linear


rem, em, vh, vw



Background Properties


CSS Properties

CSS Properties

Media Queries

Mobile-first, desktop-first, max-width, min-width