Below is a categorized list of CSS properties and sample values, grouped according to their primary uses. This will help beginners understand which properties are essential for different aspects of styling a web page.

1. Positioning and Layout

Property Sample Values Description Illustrative Example
position static, relative, absolute, fixed, sticky Determines how an element is positioned in the document. position: absolute; top: 20px; left: 50px;
top, right, bottom, left 10px, 50%, auto Specifies the position of an element relative to its parent. top: 10px; left: 20px;
z-index 1, 10, 100 Controls the stacking order of elements. z-index: 10;
display block, inline, inline-block, flex, grid, none Defines how an element is displayed. display: flex;
float left, right, none Floats an element to the left or right within its container. float: left;
clear left, right, both Clears floated elements on the left or right sides. clear: both;
overflow visible, hidden, scroll, auto Controls what happens when content overflows its container. overflow: auto;
margin 10px, auto, 5% Sets the space outside an element’s border. margin: 10px 20px;
padding 10px, 5%, 1em Sets the space inside an element’s border. padding: 15px;
width, height 100px, 50%, auto Defines the width and height of an element. width: 100px; height: 50px;
max-width, max-height 500px, 100%, none Sets the maximum width or height an element can have. max-width: 200px;
min-width, min-height 200px, 50%, none Sets the minimum width or height an element must have. min-height: 300px;
flex-direction row, column, row-reverse, column-reverse Sets the direction of the main axis in a flex container. flex-direction: column;
justify-content center, flex-start, flex-end, space-between, space-around Aligns items along the main axis in flex or grid layouts. justify-content: space-around;
align-items center, stretch, flex-start, flex-end, baseline Aligns items along the cross axis in flex or grid layouts. align-items: flex-start;
grid-template-columns 1fr 2fr, repeat(3, 1fr), 200px auto Defines the column structure in a grid layout. grid-template-columns: 1fr 2fr;
grid-template-rows 100px 1fr, repeat(2, 200px) Defines the row structure in a grid layout. grid-template-rows: 100px auto;

2. Font Styling

Property Sample Values Description Illustrative Example
font-family "Arial", "Georgia", "Times New Roman" Sets the font of the text. font-family: 'Arial', sans-serif;
font-size 16px, 1.5em, 100% Sets the size of the font. font-size: 18px;
font-weight normal, bold, bolder, lighter, 100, 400, 700 Sets the weight (thickness) of the font. font-weight: bold;
font-style normal, italic, oblique Specifies whether the font should be italicized. font-style: italic;
text-align left, right, center, justify Sets the horizontal alignment of the text. text-align: center;
text-decoration none, underline, overline, line-through Adds decoration to the text. text-decoration: underline;
text-transform none, capitalize, uppercase, lowercase Controls the case of the text. text-transform: uppercase;
letter-spacing 1px, 0.05em, normal Sets the space between letters. letter-spacing: 0.1em;
line-height 1.5, 20px, normal Sets the height of a line of text. line-height: 1.8;
color #333333, rgb(255, 0, 0), hsl(0, 100%, 50%) Specifies the color of the text. color: #ff0000;
text-shadow 2px 2px 4px #000000 Adds shadow to the text. text-shadow: 1px 1px 2px #888888;

3. Background Styling

Property Sample Values Description Illustrative Example
background-color #f0f0f0, rgba(255, 255, 255, 0.8) Sets the background color. background-color: #f0f0f0;
background-image url('image.jpg'), linear-gradient(to right, red, blue) Sets a background image or gradient. background-image: url('bg.jpg');
background-repeat repeat, no-repeat, repeat-x, repeat-y Controls how the background image is repeated. background-repeat: no-repeat;
background-position center, top left, 50% 50% Sets the position of the background image. background-position: center top;
background-size cover, contain, 100%, 50px auto Specifies the size of the background image. background-size: cover;
background-attachment scroll, fixed, local Determines whether the background scrolls with the page. background-attachment: fixed;

4. Borders and Outlines

Property Sample Values Description Illustrative Example
border 1px solid #000, 2px dashed red Sets the width, style, and color of the border. border: 2px dashed blue;
border-width 1px, 2px, 0 Specifies the thickness of the border. border-width: 4px;
border-style solid, dashed, dotted, none Sets the style of the border. border-style: dotted;
border-color #333, rgba(0, 0, 0, 0.5) Defines the color of the border. border-color: #00ff00;
border-radius 5px, 50%, 1em Rounds the corners of the border. border-radius: 10px;
outline 2px solid #000, none Sets the outline around an element. outline: 3px solid red;
outline-offset 4px Sets the space between the outline and the border. outline-offset: 5px;

 

5. Navigation Styling

Property Sample Values Description Illustrative Example
list-style none, disc, circle, square Defines the type of list item marker. list-style: none;
text-decoration none, underline, overline Controls the text decoration applied to links. text-decoration: none;
cursor pointer, default, move Sets the type of mouse cursor when hovering over elements. cursor: pointer;
background-color #0088cc, rgba(0, 136, 204, 0.8) Defines the background color of navigation items. background-color: #0088cc;
padding 10px, 1em Sets the padding around navigation links. padding: 15px 20px;
border-bottom 2px solid #fff, none Adds a border to the bottom of a navigation item. border-bottom: 2px solid #fff;
hover N/A Applies styles when the element is hovered over. a:hover { color: #ff0000; }

6. Animation and Transition

Property Sample Values Description Illustrative Example
transition all 0.3s ease, opacity 0.5s linear Controls the animation when a property changes state. transition: background-color 0.3s ease-in-out;
transition-duration 0.5s, 200ms Specifies how long the transition should take. transition-duration: 0.5s;
transition-delay 0s, 100ms Sets a delay before the transition starts. transition-delay: 0.2s;
animation-name slide, fadeIn, none Specifies the name of the keyframes to use for the animation. animation-name: slideIn;
animation-duration 2s, 1.5s Defines how long the animation lasts. animation-duration: 3s;
animation-timing-function ease, linear, ease-in-out Specifies the speed curve of the animation. animation-timing-function: ease-in-out;
animation-delay 0s, 1s Sets a delay before the animation starts. animation-delay: 0.5s;
keyframes N/A Defines keyframe animations. @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

7. Flexbox

Property Sample Values Description Illustrative Example
display flex, inline-flex Enables flexbox layout for the container. display: flex;
flex-direction row, column, row-reverse, column-reverse Sets the main axis direction. flex-direction: column;
justify-content center, flex-start, space-between Aligns items along the main axis. justify-content: space-between;
align-items center, flex-start, stretch Aligns items along the cross axis. align-items: stretch;
align-self center, flex-start, auto Allows individual items to override the align-items setting. align-self: flex-end;
flex-wrap nowrap, wrap, wrap-reverse Controls whether items wrap to the next line. flex-wrap: wrap;
flex-grow 0, 1, 2 Determines how much a flex item will grow relative to others. flex-grow: 2;
flex-shrink 0, 1, 2 Determines how much a flex item will shrink relative to others. flex-shrink: 1;
order 0, 1, -1 Controls the order of flex items. order: -1;

This breakdown provides a useful reference for understanding CSS properties and applying them effectively with practical examples.