HTML , CSS & Responsiveness Reference Sheet
This sheet contains all the HTML & CSS references that can be used to keep track of everything on their path. This sheet also has explanation & usage of Responsiveness in a website.
- CHEATSHEET
- All Properties Reference
- Box Model - Explained
- Selectors - All Pseudo Selectors & Common 30 Cheatsheet
- Positioning - Relative, Absolute & Other
- States - Link | Visited | Hover | Active | Focus
- After & Before Elements - Reference | Applications
- Pseudo Class Selectors - :not | :nth-child | others
- Special Functions - calc() | others
- Variables - Reference
- Floats - All About Floats
- Display - block, inline, inline-block, tables
- Flexbox - Explanation , Cheatsheet
- Grids - Explanation , Cheatsheet
- Creating Animations - Reference
- Using Animations -Transition
- Cubic Bezier: Create Your Own or Premade
- Background Images & Gradients - Reference
- Transformation - Transform
- Clipping & Masking - Reference, Clipping Tool
- Styling Inputs - Reference
- Selectors - :input-placholder | :input-placeholder-shown | :valid | :invalid | :focus
- Other Inputs - Radio Button, Checkbox, Toggle Styling
- Dropdown - Reference
- Target - to target an element having ID
- Background-clip - to clip background with text or content
- Perspective - change the perspective of 3d animations
- Backface visibility - for the elements behind
- Overflow - for overflowing content
- Background-blend-mode, Mix-blend-mode - blend background with some color , or blend text with background
- Box Decoration Break - to fix the decoration for multiline text
- Shape Outside - to align paragraph according to the shape of image with it
- Image Filter - to add filters to images
- Object fit - to fit images and videos in containers
- Hyphens - for multiline content
- backdrop-filter - gives filter to the background
-
Meta Tag -
<meta name='viewport' content="width=device-width, initial-scale=1.0">
- Desktop First : use max-width; (higher to lower)
- Mobile First : use min-width (lower to higher)
- base + typography
- general layout
- grid
- page layout
- components
-
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 }
-
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){}
-
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 */ }