HTML/CSS Cheat Sheet

html-css-cheat-sheet.markdown

HTML/CSS Cheat Sheet

A Pen by Dalibor Gogic on CodePen.

License.

index.jade

.container
  h1 Table of contents
  ol
    li HTML
    li #[a(href="#css") CSS]
      ol
        li #[a(href="#selector-types") Selector Types]
    li #[a(href="#examples") Examples]
  
  #css
    h2 CSS
    h3#selector-types Selector Types

    p #[strong Universal] #[br]
      small Any element
    pre * { font: 10px Arial; }

    p #[strong Type] #[br]
      small Any element of that type
    pre h1 { text-decoration: underline; }

    p Grouping #[br]
      small Multiple elements of different types
    pre.
      h1,
      h2, 
      h3 { 
        font-family: Verdana;
      }

    p Class #[br]
      small Multiple elements of different types when you don't want to affect all instances of that type
    pre .sampleclass { text-decoration: underline; }
  #examples
    h2 Examples
    h3 Float Left
  
  img.img-float-left(src="//placehold.it/150x150", alt="")
  p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias optio ducimus ipsa vitae animi nemo facere doloribus similique sed numquam, natus quasi quae quam totam quo soluta pariatur aperiam quaerat itaque quibusdam voluptatibus vero. Eaque ullam nemo pariatur earum voluptas ea maxime vel rem adipisci obcaecati repellat nisi modi...
  
  h3 Float right
  
  img.img-float-right(src="//placehold.it/150x150", alt="")
  p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias optio ducimus ipsa vitae animi nemo facere doloribus similique sed numquam, natus quasi quae quam totam quo soluta pariatur aperiam quaerat itaque quibusdam voluptatibus vero. Eaque ullam nemo pariatur earum voluptas ea maxime vel rem adipisci obcaecati repellat nisi modi...
  
  h3 Float Left / Center / Float Right
  
  .tac
    img.img-float-left(src="//placehold.it/150x150", alt="")
    img.center(src="//placehold.it/150x150", alt="")
    img.img-float-right(src="//placehold.it/150x150", alt="")
  
  h4 With flexbox
  
  .lcr
    img(src="//placehold.it/150x150", alt="")
    img(src="//placehold.it/150x150", alt="")
    img(src="//placehold.it/150x150", alt="")
  
  h4 Position absolute
  
  .modal
    svg.icon-close(fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg")
      path(d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z")
      path(d="M0 0h24v24H0z" fill="none")
    button.button Button
    
  .avatar
    header
    h1.tac Luis Bailey*
    small * https://randomuser.me/
    

script.js

// "Talk is cheap. Show me the code." - Linus Torvalds

// ToDo: Restart CSS animation

style.stylus

// https://fonts.google.com/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic)
/* Apply a natural box layout model to all elements, but allowing components to change
  http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*/
html
  box-sizing border-box
*
*:before
*:after
  box-sizing: inherit
body
  margin 16px 0 100px
  font-family Roboto, sans-serif
  font-weight 400
.container
  max-width 512px
  margin 0 auto
// https://developer.mozilla.org/en/docs/Web/CSS/float
.img-float-left
  float left
  padding-right 16px
.img-float-right
  float right
  padding-left 16px
.center
  display inline-block
  margin 0 auto
.tac
  text-align center
.lcr
  display flex
  flex-direction row         
  flex-wrap nowrap              
  justify-content space-between
.modal
  height 150px
  border 1px solid rgba(black,.12)
  position relative
  margin-bottom 16px
  .button
    color white
    font-size 14px
    padding 4px 8px
    background-color rgba(black, .87)
    border-radius 2px
    text-transform uppercase
    border 1px solid transparent
    font-family Roboto, sans-serif
    font-weight 500
    position absolute
    right 16px
    bottom 16px
.icon-close
  margin 16px
  position absolute
  top 0
  right 0
  transition all .25s ease-in
  &:hover
    fill red
    cursor pointer
    transform rotate(180deg)
.avatar
  width 100%
  & header
    height 150px
    background-color rgba(black, .12)
  img
    border-radius 50%
    border 3px solid rgba(black, .12)
    display block
    margin -75px auto 0
  small 
    font-size 12px
    color rgba(black, .54)
  pre 
    color rgba(black, .54)
ol
  counter-reset item
li 
  display block
  &:before 
    content counters(item, ".") " "
    counter-increment item

How to view compiled HTML and CSS