Scribd
Upload
2 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

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
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