Scribd
Upload
7 views

CSS_Cheat_Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS_Cheat_Sheet

Uploaded by

amitsh2523
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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