Home / Cheatsheets / CSS3 / HTML, CSS and Responsiveness Reference Sheet

HTML, CSS and Responsiveness Reference Sheet

140 Views
html css sheet

Here is my collection of all references of HTML & CSS that can be used as a reference while studying them as a path, explanation to use responsiveness is also available here.

HTML

Basic HTML

Useful Elements

CSS

Basic CSS

Positioning

Animations

Images & Transformation

Styling Forms

Useful Properties

Responsiveness

  • Media Queries
  • Meta Tag – <meta name='viewport' content="width=device-width, initial-scale=1.0">

Screen Width Usage

  • Desktop First : use max-width; (higher to lower)
  • Mobile First : use min-width (lower to higher)

Order to apply Media queries

  1. base + typography
  2. general layout
  3. grid
  4. page layout
  5. components

Handling Images

  • Density Switching – high-res (2px for 1px) & low-res(1px for 1px)
    • <img srcset="img1x.png 1x, img2x.png 2x" alt="Image">
  • Art directions – different images for different screen
 <picture>
      <!-- when lower than 600px -->
    <source srcset="imgsmall1x.png 1x, imgsmall2x.png 2x" media="(max-width: 37.5em)"> 
      <!-- using density switching with art directions -->
      <img srcset="img1x.png 1x, img2x.png 2x" alt="img">
  </picture>
  • Resolution Switching – large & small screen
<!-- in srcset , the images are specified with their original width-->
  <img srcset="img1.png 300w, img1-large.png 1000w" 
       sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px">
  <!-- in sizes , the screen size is speicified with the image width to be used, last one being the default size -->
  • Handling Images in CSS – media queries combined with screen res & width
 // for resolution greater than 1px and 600px width or webkit is for safari browser
  @media (min-resolution: 192pi) and (min-width:600px) ,
      (-webkit-min-device-pixel-ratio: 2) and (min-width:600px){
      // image you want to set
      }

Feature Queries

  • Browser
 @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
    -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      //use only if the browser supports these properties
  }
  • Touch Capability – This will apply for small screen OR non hover screen.Β @media only screen and (max-width: 56.25em), only screen and (hover:none){

Other Useful Concepts

  • Optimizing Images – By cropping or using Optimizilla
  • Search Engine Optimization – By using Meta tags
  • Class Naming Convention – BEM
  • Global Reset
* {
      margin: 0;
      padding: 0;
      box-sizing: inherit; //from body element
  } 
  html{
      font-size: 62.5%; //defines 1rem everywhere as 10px
  }
  body{
      box-sizing: border-box;
      /*
      Define project wide font family and size in body selector
      */
  }

also read  What are CSS Variables? and How to Use Them?


Post author

Hi, I am Adnan Ashraf from Okara Pakistan. I am a Content Writer, and SEO Expert.

  Tweet It