Basics of CSS Properties
Learn the fundamental properties that drive web styling, Explore CSS properties for text, colors, and page structure, Master techniques for framing and styling elements, Add interactivity with CSS transitions and animations, and Discover how CSS properties adapt content for various devices.
Color Properties:
Sets the text color.
color: red;
Sets the background color.
background-color: #f0f0f0;
Typography Properties:
Sets the font family for text.
font-family: Arial, sans-serif;
Sets the font size.
font-size: 16px;
Sets the font weight (e.g., bold).
font-weight: bold;
Sets the line height.
line-height: 1.5;
Sets the text alignment (left, right, center, justify).
text-align: center;
Sets text decoration (underline, overline, line-through).
ext-decoration: underline;
Layout Properties:
Sets the width of an element.
width: 300px;
Sets the height of an element.
height: 200px;
Sets the margin around an element.
margin: 10px;
Sets the padding inside an element.
padding: 15px;
Defines how an element is displayed (e.g., block, inline, flex).
display: inline-block;
Sets the positioning of a component (e.g., relative, absolute, fixed).
position: absolute;
`top`, `right`, `bottom`, `left`: Positions an element.
top: 20px;
Floats an element left or right within its container.
float: left;
Clears floated elements.
clear: both;
Defines how an element's size is calculated.
box-sizing: border-box;
Border and Outline Properties:
Sets all border properties at once.
border: 1px solid #ccc;
Rounds the corners of an element.
border-radius: 5px;
Sets an outline around an element.
outline: 2px dashed blue;
Background Properties:
Sets the background image.
background-image: url('image.jpg');
Controls how the background image is repeated.
background-repeat: no-repeat;
Sets the position of the background image.
background-position: center top;
Specifies the size of the background image.
background-size: cover;
Background Opacity:
Apply an RGBA background color for transparency.
background-color: rgba(0, 128, 255, 0.5); /*Semi-transparent blue */
Background Attachment:
Control if the background image scrolls with the content.
background-attachment: fixed;
Background Clip and Origin:
Specify how a background image is clipped and positioned within its box.
background-clip: padding-box;
background-origin: content-box;
Box Sizing:
Specifies how an element's total width and height are calculated.
box-sizing: border-box;
Box Shadow:
Adds a shadow to an element's box.
box-shadow: 2px 2px 4px #888888;
Box Reflect (Advanced):
Create a reflection of an element.
box-reflect: below 5px linear-gradient(transparent, #0004);
Box Decoration Break:
Control how box decorations are split across multiple lines.
box-decoration-break: slice;
Line Clamp (Advanced):
Specify the number of lines displayed within an element.
line-clamp: 3;
Outline Style:
Set the style of an element's outline.
outline-style: dashed;
Outline Width and Color:
Define the width and color of an element's outline.
outline-width: 2px;
outline-color: #ff0000;
Outline Offset:
Specify the space between an element's outline and its border.
outline-offset: 5px;
Overflow X and Y:
Control horizontal and vertical overflow behavior.
overflow-x: auto;
Transition Properties:
Define various aspects of CSS transitions.
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;
Animation Properties:
Create complex animations in CSS.
animation-name: slide-in;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
Visibility (Advanced):
Control the visibility of an element (`hidden`, `visible`, `collapse` for tables).
visibility: collapse;
Transform Origin (Advanced):
Set the point around which a transformation should occur.
transform-origin: center top;
Transform (Advanced):
Apply 2D and 3D transformations to an element (e.g., scale, rotate, translate).
transform: rotate(45deg) scale(1.5);
Animation Keyframes (Advanced):
Define keyframes for complex animations.
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
Pointer Events (Advanced):
Control whether an element responds to pointer events (e.g., clicks).
pointer-events: none;
Filter Effects (Advanced):
Apply filter effects to elements (e.g., blur, brightness, contrast).
filter: blur(5px) brightness(120%);
Backdrop Filter (Advanced):
Apply filter effects to the area behind an element.
backdrop-filter: blur(10px) grayscale(50%);
Scroll Snap Type (Advanced):
Control the behavior of scroll snapping.
scroll-snap-type: y mandatory;
Scroll Padding (Advanced):
Add padding to the scroll snap container.
scroll-padding: 20px;
Scroll Behavior (Advanced):
Define smooth scrolling behavior.
scroll-behavior: smooth;
Scroll Snap Align (Advanced):
Control the alignment of snapped items within a scroll container.
scroll-snap-align: center;
Scroll Margin (Advanced):
Set the margin for triggering scroll snapping.
scroll-margin: 20px;
Scroll Snap Stop (Advanced):
Specify whether an element should be a snap stop during scrolling.
scroll-snap-stop: always;
Hyphens (Advanced):
Control automatic hyphenation of text.
hyphens: auto;
Column Span (Advanced):
Allow an element to span multiple columns.
column-span: all;
Column Fill (Advanced):
Control how content is distributed in multi-column layouts.
column-fill: balance;
Transformations:
Applies 2D or 3D transformations to an element.
transform: rotate(45deg);
Sets the origin of a transformation.
transform-origin: top left;
Transition and Animation:
Creates smooth transitions for element properties.
transition: all 0.3s ease-in-out;
Applies animations to elements.
animation: slide-in 2s ease infinite;
Media Queries:
Defines styles for specific screen sizes or devices.
@media (max-width: 768px) {
/* Styles for screens <= 768px wide */
}
Flexbox Properties:
Defines the direction of flex items within a flex container.
flex-direction: row;
Controls whether flex items wrap to the next row/column.
flex-wrap: wrap;
Specifies how much an item should grow relative to other items.
flex-grow: 1;
Specifies how much an item should shrink relative to other items.
flex-shrink: 0;
Grid Layout Properties:
Defines the grid's row and column tracks.
grid-template-rows: 1fr 2fr; grid-template-columns: 1fr 2fr;
Sets the gap between grid items.
grid-gap: 10px;
Text Properties:
Controls the capitalization of text.
text-transform: uppercase;
Adjusts the space between characters.
letter-spacing: 2px;
Adjusts the space between words.
word-spacing: 4px;
Defines how white space is handled within an element.
white-space: nowrap;
Opacity and Visibility:
Sets the transparency of an element.
opacity: 0.5;
Controls the visibility of a component.
visibility: hidden;
Positioning and Z-Index:
Specifies the stacking order of elements.
z-index: 1;
Cursor:
Defines the type of cursor displayed when hovering over an element.
cursor: pointer;
Overflow:
Determines how content that overflows an element's box is handled.
overflow: auto;
List Styling:
Specifies the type of list marker.
list-style-type: square;
Sets an image as the list marker.
list-style-image: url('sqpurple.gif');
Table Styling:
Defines the algorithm used to layout table cells.
table-layout: fixed;
Controls the collapsing of table borders.
border-collapse:collapse;
border-collapse:separate;
Opacity and RGBA Colors:
Allows you to use RGBA colors for transparency.
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
Multi-column Layout:
Control the number and width of columns in a multi-column layout.
column-count: 2;
Outline Offset:
Sets the space between an outline and the border edge of an element.
outline-offset: 5px;
User Interface:
Allows users to resize elements like text areas.
resize: both;
Font Properties:
Sets the font style (italic, oblique, normal).
font-style: italic;
Controls the use of small capitals in text.
font-variant: small-caps;
Font Optical Sizing (Advanced):
Enable or disable optical sizing of fonts.
font-optical-sizing: auto;
Font Synthesis (Advanced):
Control font synthesis (e.g., style, weight).
font-synthesis: weight;
Font Size Adjustment:
Adjusts the font size based on the available height of lowercase letters.
font-size-adjust: 0.5;
Font Feature Settings (Advanced) :
Enable or disable font-specific ligatures and features.
font-feature-settings: "liga" on, "dlig" off;
Font Variation Settings (Advanced):
Adjust variable font settings.
font-variation-settings: "wght" 600, "wdth" 75%;
Font Kerning and Ligatures:
Defines the use of kerning.
font-kerning: normal;
Controls the use of ligatures.
font-variant-ligatures: common-ligatures;
Text Combine Upright (Advanced):
Combine characters in vertical writing mode.
text-combine-upright: all;
Text-shadow:
Adds a shadow to the text.
text-shadow: 1px 1px 2px #333333;
Text Shadow (Inset):
Apply an inset text shadow for special effects.
text-shadow: 2px 2px 4px #333 inset;
Text Shadow (Multiple Shadows - Advanced):
Apply multiple text shadows.
text-shadow:1px 1px 1px #000, 2px 2px 2px #333;text-shadow:1px 1px 2px #333,-1px -1px 2px #555;
Text Overflow:
Specifies how overflowing text is displayed.
text-overflow: ellipsis;
Text-Align:
Set the horizontal alignment of text within an element.
text-align: right;
Text Rendering:
Specifies how text should be rendered.
text-rendering: optimize legibility;
Text Alignment:
Specifies the alignment of the last line of text in a block.
text-align-last: center;
Text Justification:
Controls text justification and alignment within a block container.
text-justify: inter-word;
Text Direction:
Defines the text direction (ltr for left-to-right, rtl for right-to-left).
direction: rtl;
Text Orientation (Advanced):
Control the orientation of characters within the text.
text-orientation: upright;
Text Combine (Advanced):
Combine characters in vertical writing mode.
text-combine-upright: all;
White-Space:
Defines how white space inside an element is handled.
white-space: normal; white-space: nowrap; white-space: pre;
Word Break:
Controls where to break lines within words.
word-break: break-all;
Overflow Wrap:
Specifies how words should be wrapped when they exceed the container's width.
overflow-wrap: break-word;
List Properties:
Controls the position of the list marker (inside or outside the list item).
list-style-position: inside;
Box Shadow (Advanced):
Allows multiple shadows with different settings.
box-shadow: 2px 2px 4px #888888, 4px 4px 6px #333333;
Multiple Columns:
Create multi-column layouts.
column-count: 3; column-width: 200px;
Column Gap and Rule:
Set the gap between columns and add a rule between them.
column-gap: 20px; column-rule: 2px solid #ccc;
Perspective and Transform Style:
Used for 3D transformations.
perspective: 1000px; transform-style: preserve-3d;
Columns Span:
Allows an element to span multiple columns in a multi-column layout.
column-span: all;
Vertical Alignment:
Align inline or inline-block elements vertically.
vertical-align: middle;
List Style Image:
Use an image as a list marker.
list-style-image: url('marker.png');
Image Opacity:
Change the opacity of an image.
opacity: 0.7;
User Select (Advanced):
Control user selection of elements' content.
user-select: none;
Content (Advanced):
Insert generated content before or after an element.
content: " →";
Mix Blend Mode (Advanced):
Define how an element should blend with its background.
mix-blend-mode: multiply;
Shape Outside (Advanced):
Define a non-rectangular shape that the text should flow around.
shape-outside: circle(50%);
Shape Image Threshold (Advanced):
Control the threshold for alpha values in a shape image.
shape-image-threshold: 0.5;
Backdrop Filter (Advanced):
Apply filter effects to the area behind an element.
backdrop-filter: blur(10px) brightness(120%);
Grid Column and Row:
Define the grid item's location within the grid.
grid-column: 2 / span 3;
grid-row: 1 / 3;
Grid Area:
Set a grid item's size and location within the grid.
grid-area: 2 / 1 / 4 / 4;
Grid Gap (Advanced):
Set the gap between grid rows and columns.
gap: 10px;
Flexbox Order (Advanced):
Specify the order of flex items within a container.
order: 2;
Grid Template (Advanced):
Define grid templates for more complex grid layouts.
grid-template:
"header header" 50px
"sidebar main" 1fr / 200px 1fr;
Animation Delay (Advanced):
Delay the start of an animation.
animation-delay: 2s;
Transform Origin (Advanced):
Set the origin of a transformation.
transform-origin: top right;
Flexbox Alignment (Advanced):
Properties like justify-content and align-items have advanced values like space-between, space-around, and stretch for more control.
justify-content: space-between;
Text Overflow (Advanced):
Control how text is truncated when it overflows.
text-overflow: ellipsis;
Border Image (Advanced):
Use an image for the border.
border-image: url('border.png') 20 round;
Counter Increment (Advanced):
Increment or decrement a counter.
counter-increment: section;
Counter Reset (Advanced):
Set the value of a counter to a specified number.
counter-reset: section 0;
Backdrop Filter (Advanced):
Apply filter effects to the area behind an element.
backdrop-filter: blur(10px) brightness(120%);
Column Rule Style (Advanced):
Set the style of the rule between columns in a multi-column layout.
column-rule-style: dotted;
Column Rule Color (Advanced):
Define the color of the rule between columns.
column-rule-color: #999;
Column Rule Width (Advanced):
Set the width of the rule between columns.
column-rule-width: 2px;
Text Decoration Style (Advanced):
Set the style of text decorations (underlines, overlines, line-through).
text-decoration-style: wavy;
Text Decoration Color (Advanced):
Define the color of text decorations.
text-decoration-color: red;
Text Decoration Line (Advanced):
Specify which text decorations to apply.
text-decoration-line: underline overline;
Text Decoration Thickness (Advanced):
Set the thickness of text decorations.
text-decoration-thickness: 2px;
Content Visibility (Advanced):
Control the visibility of an element's content.
content-visibility: auto;
Content Size (Advanced):
Define the size of generated content.
content-size: 50px;
Content Position (Advanced):
Position generated content within its container.
content-position: 10px 20px;
Content Fallback (Advanced):
Provide fallback content for generated content.
content: " (PDF)";
Counter Increment (Advanced):
Increment or decrement a counter.
counter-increment: section;
Counter Reset (Advanced):
Set the value of a counter to a specified number.
counter-reset: section 0;
Grid Column Gap and Row Gap (Advanced):
Set the gap between grid columns and rows.
grid-column-gap: 10px;
Initial Letter (Advanced):
Style the initial letter of a block element.
initial-letter: 3;
Inline Size and Block Size (Advanced):
Set the width and height of an element in CSS Logical Properties.
inline-size: 200px;
block-size: 300px;
Writing Mode (Advanced):
Define the direction of writing mode (horizontal, vertical).
writing-mode: vertical-rl;
Rich Finley's book, based on his 'Mastering CSS' training, is a comprehensive guide for web designers.It covers fundamental CSS concepts, CSS3 properties, responsive design, fonts, and more. With a training-centric approach, it equips designers with modern web development skills.
