Thread by @selemondev

CSS CheatSheet For Beginners ✨

Thread 🧵

1. Selectors

✅️ * {} - Universal Selector
✅️ #id {} - ID Selector
✅️ .class {} - Class Selector
✅️ h1, h2() - Type Selector
✅️ h1+p Adjacent Sibling Selector
✅️ ul > li Child Selector
✅️ h1 - p {} General Sibling Selector
✅️ p a{} Descendant Selector

✅ div[att="val"]) Attribute Selector

2. Pseudo Selectors

✅️ :hover - Mouse hover Selector
✅️ :active - Active link Selector
✅️ :focus - Focus Selector
✅️ :visited - Visited Link Selector
✅️ :link - Link Selector
✅️ :after - After Element
✅️ :before - Before Element

✅ :first-child - First Child Selector
✅️ :first-line - First Line Selector
✅️ :first-letter - First Letter Selector
✅️ :checked - Checked Element Selector

3. Units

✅️ px - Pixels
✅️ cm - Centimeter
✅️ mm - Milimeter
✅️ in - inches
✅️ pt - 1pt = 1/72in
✅️ pc - 1pc = 72pt
✅️ % - Percentage
✅️ em - 1em = Font size of parent em
✅ rem - Root em
✅️ vh - viewable screen's height
✅️ vw - viewable screen's Width

4. Position

✅️ position: static | relative | absolute fixed sticky - Position
✅️ top | right | bottom | left - Position Properties
✅️ float: left | right | none - Float Element
✅️ z-index: 3 | auto | none - Z Index
✅️ clear: none | left | right I both - Clear Floating

5. Text Styling

✅️ font-style: normal | italic | oblique - Font Style
✅️ font-variant: normal small-caps - Font Varient
✅️ font-size: 13px | 0.8rem | 80% - Font Size
✅️ font-weight: normal bold | bolder | ligher 108-988 - Font Weight

✅ letter-spacing: normal | 4px - Character Space
✅️ line-height: normal | 3rem | 34% - Line Height
✅️ font-family: "Open sans', sans-serif - Font Family
✅️ text-align: left | right | justify center | - Horizontal Alignment

✅ text-transform: capitalise | lowercase uppercase - Text Transform

✅️ vertical-align: baseline | bottom text-bottom | 10px | sub | super | top text-top | middle - Vertical Alignment

✅️ text-decoration: none | underline | overline | lint-through - Text Decoration

✅ text-justify: auto | inter-word | inter-character | none | initial | inherit - Text Justify

That's all for today , if you like the thread retweet and drop a like ✨

Hi! I'm Selemon 👋.

 I Tweet About:

✅ Web Development
✅ My Learning Journey
✅ JavaScript Tips and Tricks
✅ CSS Tips and Tricks.
✅ Tech stories.

Follow me on my journey to greatness 💎