Loading...

CSS Properties Complete Reference

This comprehensive CSS properties reference guide is designed to be the ultimate resource for developers seeking quick access to accurate, up-to-date property information. Organized into logical categories such as layout, box model, typography, visual effects, flexbox, grid, transforms, animations, tables, content generation, user interface, and print, it covers every CSS property currently available. Developers can use this guide for fast lookups, practical examples, and browser compatibility checks, enabling efficient styling and responsive design workflows. Each property includes syntax, description, real-world example, and browser support to facilitate reliable, cross-browser development.

📊 Layout & Positioning Properties

Property Syntax Description Example Browser Support
display display: value Controls element display type display: flex All browsers
position position: value Sets positioning method position: absolute All browsers
top top: value Vertical position offset top: 10px All browsers
right right: value Horizontal position from right right: 20px All browsers
bottom bottom: value Vertical position from bottom bottom: 10px All browsers
left left: value Horizontal position from left left: 20px All browsers
z-index z-index: number Stacking order z-index: 999 All browsers
float float: value Element floating direction float: left All browsers
clear clear: value Clears floating elements clear: both All browsers
overflow overflow: value Content overflow handling overflow: hidden All browsers
overflow-x overflow-x: value Horizontal overflow overflow-x: scroll All browsers
overflow-y overflow-y: value Vertical overflow overflow-y: auto All browsers
visibility visibility: value Element visibility visibility: hidden All browsers
clip clip: rect() Clips element content clip: rect(0,50px,50px,0) All browsers
vertical-align vertical-align: value Vertical alignment vertical-align: middle All browsers

📊 Box Model Properties

Property Syntax Description Example Browser Support
width width: value Element width width: 300px All browsers
height height: value Element height height: 200px All browsers
max-width max-width: value Maximum width max-width: 100% All browsers
min-width min-width: value Minimum width min-width: 200px All browsers
max-height max-height: value Maximum height max-height: 500px All browsers
min-height min-height: value Minimum height min-height: 100px All browsers
margin margin: value Outer spacing margin: 20px All browsers
margin-top margin-top: value Top margin margin-top: 10px All browsers
margin-right margin-right: value Right margin margin-right: 15px All browsers
margin-bottom margin-bottom: value Bottom margin margin-bottom: 10px All browsers
margin-left margin-left: value Left margin margin-left: 15px All browsers
padding padding: value Inner spacing padding: 15px All browsers
padding-top padding-top: value Top padding padding-top: 10px All browsers
padding-right padding-right: value Right padding padding-right: 20px All browsers
padding-bottom padding-bottom: value Bottom padding padding-bottom: 10px All browsers
padding-left padding-left: value Left padding padding-left: 20px All browsers
box-sizing box-sizing: value Box model calculation box-sizing: border-box IE8+

📊 Border & Outline Properties

Property Syntax Description Example Browser Support
border border: width style color Complete border border: 2px solid #000 All browsers
border-width border-width: value Border thickness border-width: 3px All browsers
border-style border-style: value Border appearance border-style: dashed All browsers
border-color border-color: value Border color border-color: red All browsers
border-top border-top: width style color Top border only border-top: 1px solid blue All browsers
border-right border-right: width style color Right border only border-right: 2px dotted red All browsers
border-bottom border-bottom: width style color Bottom border only border-bottom: 3px double green All browsers
border-left border-left: width style color Left border only border-left: 1px solid gray All browsers
border-radius border-radius: value Rounded corners border-radius: 10px IE9+
border-top-left-radius border-top-left-radius: value Top-left corner border-top-left-radius: 5px IE9+
border-top-right-radius border-top-right-radius: value Top-right corner border-top-right-radius: 5px IE9+
border-bottom-right-radius border-bottom-right-radius: value Bottom-right corner border-bottom-right-radius: 5px IE9+
border-bottom-left-radius border-bottom-left-radius: value Bottom-left corner border-bottom-left-radius: 5px IE9+
border-image border-image: source slice width outset repeat Border image border-image: url(border.png) 30 round IE11+
outline outline: width style color Element outline outline: 2px solid red All browsers
outline-width outline-width: value Outline thickness outline-width: 3px All browsers
outline-style outline-style: value Outline appearance outline-style: dashed All browsers
outline-color outline-color: value Outline color outline-color: blue All browsers
outline-offset outline-offset: value Outline distance outline-offset: 5px All browsers

📊 Background Properties

Property Syntax Description Example Browser Support
background background: color image repeat position size Complete background background: #fff url() no-repeat center All browsers
background-color background-color: value Background color background-color: #ff0000 All browsers
background-image background-image: url() Background image background-image: url('bg.jpg') All browsers
background-repeat background-repeat: value Image repetition background-repeat: no-repeat All browsers
background-position background-position: value Image position background-position: center top All browsers
background-size background-size: value Image scaling background-size: cover IE9+
background-attachment background-attachment: value Scroll behavior background-attachment: fixed All browsers
background-clip background-clip: value Background painting area background-clip: padding-box IE9+
background-origin background-origin: value Background positioning area background-origin: padding-box IE9+
background-blend-mode background-blend-mode: value Blending mode background-blend-mode: multiply Modern browsers

📊 Typography Properties

Property Syntax Description Example Browser Support
font font: style variant weight size/height family Complete font font: bold 16px/1.5 Arial All browsers
font-family font-family: name Font typeface font-family: 'Arial', sans-serif All browsers
font-size font-size: value Text size font-size: 18px All browsers
font-weight font-weight: value Text thickness font-weight: bold All browsers
font-style font-style: value Text style font-style: italic All browsers
line-height line-height: value Line spacing line-height: 1.6 All browsers
letter-spacing letter-spacing: value Character spacing letter-spacing: 2px All browsers
word-spacing word-spacing: value Word spacing word-spacing: 5px All browsers
text-align text-align: value Horizontal alignment text-align: center All browsers
text-decoration text-decoration: value Text decoration text-decoration: underline All browsers
text-transform text-transform: value Text case text-transform: uppercase All browsers
text-indent text-indent: value First line indent text-indent: 30px All browsers
text-shadow text-shadow: h v blur color Text shadow text-shadow: 1px 1px 2px gray IE10+
white-space white-space: value Whitespace handling white-space: nowrap All browsers
word-break word-break: value Word breaking rules word-break: break-all Modern browsers
word-wrap word-wrap: value Word wrapping word-wrap: break-word All browsers
hyphens hyphens: value Hyphenation hyphens: auto Modern browsers

📊 Flexbox Properties

Property Syntax Description Example Browser Support
display display: flex Enables flexbox display: flex IE10+
flex-direction flex-direction: value Main axis direction flex-direction: column IE10+
flex-wrap flex-wrap: value Item wrapping flex-wrap: wrap IE10+
justify-content justify-content: value Main axis alignment justify-content: space-between IE10+
align-items align-items: value Cross axis alignment align-items: center IE10+
align-content align-content: value Multiple line alignment align-content: space-around IE10+
flex flex: grow shrink basis Item flexibility flex: 1 IE10+
flex-grow flex-grow: number Growth factor flex-grow: 2 IE10+
flex-shrink flex-shrink: number Shrink factor flex-shrink: 1 IE10+
flex-basis flex-basis: value Initial size flex-basis: 200px IE10+
align-self align-self: value Individual alignment align-self: flex-end IE10+
order order: number Display order order: 2 IE10+

📊 Grid Properties

Property Syntax Description Example Browser Support
display display: grid Enables grid display: grid IE10+ (-ms-)
grid-template-columns grid-template-columns: values Column track sizes grid-template-columns: 1fr 2fr IE10+ (-ms-)
grid-template-rows grid-template-rows: values Row track sizes grid-template-rows: 100px auto IE10+ (-ms-)
grid-template-areas grid-template-areas: "names" Named grid areas grid-template-areas: "header header" IE10+ (-ms-)
grid-gap grid-gap: row column Gap between items grid-gap: 20px 10px IE10+ (-ms-)
justify-items justify-items: value Item horizontal alignment justify-items: center IE10+ (-ms-)
align-items align-items: value Item vertical alignment align-items: center IE10+ (-ms-)
place-items place-items: align justify Item alignment shorthand place-items: center Modern browsers
justify-content justify-content: value Grid horizontal alignment justify-content: space-between IE10+ (-ms-)
align-content align-content: value Grid vertical alignment align-content: center IE10+ (-ms-)
place-content place-content: align justify Content alignment shorthand place-content: center Modern browsers

Quick Examples

css
CSS Code 
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}

/* Typography Example */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Animation Example */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}

---

Always specify fallback fonts in font-family declarations and prefer relative units (em, rem, %) for responsive designs. Minimize use of !important to maintain style hierarchy clarity. Test all properties across major browsers, especially newer or experimental ones. Use shorthand properties for conciseness and maintainability. Pay attention to performance for complex animations, filters, and large DOM trees. Leverage CSS custom properties for reusable design values. Include vendor prefixes where necessary for older browser support. Organize related properties together and validate CSS regularly to catch syntax errors early. Group layout, typography, and visual styling logically for maintainable code.

🧠 Test Your Knowledge

Ready to Start

Reference Knowledge Check

Test your knowledge of CSS properties and their usage.

❓
3
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 60 of 65
Css Tutorial