Scribd
Upload
7 views

CSS_Cheat_Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS_Cheat_Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Cheat Sheet

CSS Cheat Sheet

===============

1. Selectors

------------

- Universal: *

- Type: element

- Class: .classname

- ID: #id

- Grouping: selector1, selector2

- Attribute: [attr=value]

2. Box Model

------------

- Margin: space outside the border

- Border: edge around the padding

- Padding: space inside the border

- Content: area where content is displayed

3. Colors

---------

- Name: red, blue

- Hex: #RRGGBB

- RGB: rgb(255, 0, 0)
- HSL: hsl(0, 100%, 50%)

4. Text

-------

- color: #333;

- font-size: 16px;

- font-family: Arial, sans-serif;

- font-weight: bold;

- text-align: center;

- line-height: 1.5;

5. Background

-------------

- background-color: #f0f0f0;

- background-image: url('image.jpg');

- background-size: cover;

- background-repeat: no-repeat;

- background-position: center;

6. Positioning

--------------

- Static: position: static;

- Relative: position: relative;

- Absolute: position: absolute;

- Fixed: position: fixed;

7. Flexbox
----------

- display: flex;

- justify-content: center;

- align-items: center;

- flex-direction: row;

- gap: 10px;

8. Grid

-------

- display: grid;

- grid-template-columns: 1fr 1fr;

- gap: 10px;

- grid-column: 1 / span 2;

9. Animation

------------

- animation-name: slideIn;

- animation-duration: 2s;

- animation-timing-function: ease-in-out;

- animation-iteration-count: infinite;

@keyframes slideIn {

from { transform: translateX(-100%); }

to { transform: translateX(0); }

10. Media Queries


-----------------

@media (max-width: 768px) {

body { font-size: 14px; }

You might also like