Scribd
Upload
4 views4 pages

Css Sheet

This document is a comprehensive guide to CSS, covering basic syntax, types of CSS, selectors, color systems, text properties, units, box model, display and visibility, positioning, backgrounds, flexbox, media queries, transitions, transforms, and animations. It provides examples and shorthand notations for various CSS properties and techniques. The information is structured for easy reference, making it a useful resource for web developers.

Uploaded by

Ankit Kumar Singh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views4 pages

Css Sheet

This document is a comprehensive guide to CSS, covering basic syntax, types of CSS, selectors, color systems, text properties, units, box model, display and visibility, positioning, backgrounds, flexbox, media queries, transitions, transforms, and animations. It provides examples and shorthand notations for various CSS properties and techniques. The information is structured for easy reference, making it a useful resource for web developers.

Uploaded by

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

🎨 CSS COMPLETE SHEET

🔹 BASIC SYNTAX

 selector { property: value; }

 Example:
h1 { color: red; }

🔹 TYPES OF CSS

 Inline → style=""

 Internal → <style> tag

 External → .css file (best)

🔹 SELECTORS

 * → Universal

 h1 → Element

 #id → ID

 .class → Class

🔹 COLOR SYSTEM

 Named → color: red;

 RGB → color: rgb(255,0,0);

 HEX → color: #ff0000;

 RGBA → color: rgba(255,0,0,0.5);

🔹 TEXT PROPERTIES

 color → text color

 text-align → left / right / center

 text-decoration → underline / overline / line-through / none

 text-transform → uppercase / lowercase / capitalize

 font-weight → 100–900 / bold

 font-family → arial, roboto

 line-height → spacing between lines


🔹 UNITS

 px → pixels

 % → relative to parent

 em → relative to parent font

 rem → relative to root

 vh → viewport height

 vw → viewport width

🔹 BOX MODEL

 height → element height

 width → element width

Border

 border-width

 border-style → solid / dotted / dashed

 border-color

 Shorthand → border: 2px solid black;

 border-radius → round corners

Padding (inside)

 padding-top/right/bottom/left

 Shorthand → padding: t r b l;

Margin (outside)

 margin-top/right/bottom/left

 Shorthand → margin: t r b l;

🔹 DISPLAY & VISIBILITY

 display → block / inline / inline-block / none

 visibility: hidden; → hides but keeps space

🔹 POSITION

 position: static (default)


 position: relative

 position: absolute

 position: fixed

 position: sticky

Extra

 top, right, bottom, left

 z-index → layering

🔹 BACKGROUND

 background-color

 background-image: url()

 background-size → cover / contain / auto

🔹 FLEXBOX

Container

 display: flex

 flex-direction → row / column / reverse

 justify-content → main axis

 align-items → cross axis

 flex-wrap → wrap / nowrap

 align-content

Items

 align-self

 flex-grow

 flex-shrink

🔹 MEDIA QUERIES

 Responsive design

@media (max-width: 600px) {


div { color: red; }
}
🔹 TRANSITIONS

 transition-property

 transition-duration

 transition-timing-function → ease / linear

 transition-delay

Shorthand

 transition: property duration timing delay;

🔹 TRANSFORM

 transform: rotate(45deg);

 transform: scale(2);

 transform: translate(20px);

 transform: skew(30deg);

🔹 ANIMATION

Keyframes

@keyframes name {
from {}
to {}
}

Properties

 animation-name

 animation-duration

 animation-delay

 animation-timing-function

 animation-iteration-count

 animation-direction

Shorthand

 animation: name duration timing delay count;

You might also like