Scribd
Upload
12 views5 pages

Merged CSS Reference

This document is a comprehensive reference for CSS properties, covering text, background, border, layout, padding, margin, height, width, flexbox, grid, animation, and advanced CSS features. It includes examples for pseudo-elements, hover and focus states, nth-child selectors, keyframes, media queries, and CSS variables. Each property is detailed with possible values and usage scenarios to aid in CSS styling and layout design.

Uploaded by

azer11624
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
12 views5 pages

Merged CSS Reference

This document is a comprehensive reference for CSS properties, covering text, background, border, layout, padding, margin, height, width, flexbox, grid, animation, and advanced CSS features. It includes examples for pseudo-elements, hover and focus states, nth-child selectors, keyframes, media queries, and CSS variables. Each property is detailed with possible values and usage scenarios to aid in CSS styling and layout design.

Uploaded by

azer11624
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/ 5

Complete CSS Properties Reference

Text Properties
- color: red, #ff0000, rgb(255,0,0), hsl(0,100%,50%)
- font-family: Arial, Times New Roman, Courier New
- font-size: 16px, 1.2em, 120%
- font-weight: normal, bold, lighter, bolder, 100-900
- text-align: left, right, center, justify
- text-decoration: none, underline, overline, line-through
- text-transform: none, capitalize, uppercase, lowercase
- letter-spacing: normal, 2px, -1px
- line-height: normal, 1.5, 120%
- word-spacing: normal, 4px
- white-space: normal, nowrap, pre, pre-line, pre-wrap
- direction: ltr, rtl
- writing-mode: horizontal-tb, vertical-rl, vertical-lr

Background Properties
- background-color: red, #ff0000, rgb(255,0,0), transparent
- background-image: none, url('image.jpg'), linear-gradient(red, blue)
- background-size: auto, cover, contain, 100px 200px
- background-repeat: repeat, no-repeat, repeat-x, repeat-y
- background-attachment: scroll, fixed, local
- background-clip: border-box, padding-box, content-box
- background-position: top left, center, 50% 50%
- background-origin: border-box, padding-box, content-box
- background-blend-mode: normal, multiply, screen

Border Properties
- border: 2px solid red, 1px dashed blue, 3px double black
- border-width: thin, medium, thick, 5px
- border-style: none, solid, dashed, dotted
- border-color: red, #ff0000, transparent
- border-radius: 0, 5px, 50%, 1em
- outline: none, 2px solid red
- outline-offset: 0, 5px

Layout Properties
- display: block, inline, inline-block, flex, grid, none
- position: static, relative, absolute, fixed, sticky
- z-index: 0, 1, 999, -1
- visibility: visible, hidden, collapse
- overflow: visible, hidden, scroll, auto
- overflow-x / overflow-y: visible, hidden, scroll, auto
- clip-path: circle(50%), inset(10px), polygon(...)
- object-fit: fill, contain, cover, none, scale-down
- object-position: center, top, left 20px

Padding & Margin Properties


- margin: 10px, auto
- margin-top / margin-right / margin-bottom / margin-left: 10px, auto
- padding: 10px
- padding-top / padding-right / padding-bottom / padding-left: 10px

Height & Width Properties


- width: 100px, 50%, auto
- height: 200px, 100vh, auto
- min-width / max-width: 100px, 50%
- min-height / max-height: 100px, 50vh

Flexbox Properties
- display: flex, inline-flex
- flex-direction: row, column, row-reverse, column-reverse
- justify-content: flex-start, flex-end, center, space-between
- align-items: flex-start, flex-end, center, stretch
- flex-wrap: nowrap, wrap, wrap-reverse
- flex-grow / flex-shrink: 0, 1, 2
- align-self: auto, flex-start, flex-end, center, baseline, stretch

Grid Properties
- display: grid, inline-grid
- grid-template-columns: 100px 200px, 1fr 2fr, repeat(3, 1fr)
- grid-template-rows: 50px 100px, auto auto, repeat(2, minmax(100px, auto))
- grid-column / grid-row: span 2, 1 / 3
- grid-area: 1 / 2 / 3 / 4
- place-items: center, start, end
- place-content: center, space-between

Animation & Effects


- opacity: 0.5, 1, 0
- box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5)
- text-shadow: 2px 2px 5px red
- transform: rotate(45deg), scale(1.5), translate(10px, 20px)
- transition: all 0.5s ease-in-out, opacity 1s linear
- animation: myAnim 3s infinite ease-in-out
- animation-delay: 1s
- animation-direction: normal, reverse, alternate
- animation-fill-mode: none, forwards, backwards, both
- filter: blur(5px), brightness(150%), contrast(200%)
- backdrop-filter: blur(10px), brightness(120%)
- mix-blend-mode: normal, multiply, screen
Advanced CSS Properties & Usage

::before & ::after


Used to insert content before or after an element without modifying HTML.

:hover
Applies styles when the user hovers over an element.

:focus
Styles an element when it is selected, like an input field.

:nth-child(n)
Targets specific children of an element based on their order.

@keyframes
Defines animations with different states over time.

animation
Applies an animation to an element.

@media
Creates responsive designs based on screen size.

CSS Variables (--var)


Allows defining reusable variables in CSS.

Examples:
::before & ::after
button::before { content: "* "; color: red; font-size: 20px; }

:hover
button:hover { background-color: blue; color: white; }

:focus
input:focus { border: 2px solid green; outline: none; }

:nth-child(n)
li:nth-child(odd) { background-color: lightgray; }
@keyframes
@keyframes moveRight { 0% { transform: translateX(0); } 100% { transform:
translateX(200px); } }

animation
div { animation: moveRight 2s ease-in-out infinite; }

@media
@media (max-width: 600px) { body { background-color: lightblue; } }

CSS Variables (--var)


:root { --main-color: #ff5733; } button { background-color: var(--main-color); }

You might also like