/* Selector */

selector {

/* Property: Value; */

/* Basic Styles */

color: #000; /* Text color */

background-color: #FFF; /* Background color */

font-family: Arial, sans-serif; /* Font family */

font-size: 16px; /* Font size */

font-weight: bold; /* Font weight */

text-align: center; /* Text alignment */

line-height: 1.5; /* Line height */

text-decoration: underline; /* Text decoration */

/* Box Model */

width: 100px; /* Width of element */

height: 100px; /* Height of element */

margin: 10px; /* Margin outside the element */

padding: 10px; /* Padding inside the element */

border: 1px solid #333; /* Border around the element */

/* Display and Layout */

display: block; /* Element displays as a block */

display: inline; /* Element displays inline */

display: flex; /* Flexible box layout */

display: grid; /* Grid layout */

float: left; /* Float element left */

clear: both; /* Clear floating elements */

position: relative; /* Relative positioning */

top: 10px; /* Position from the top */

/* Flexbox */

flex-direction: row; /* Main-axis direction (row/column) */

justify-content: center; /* Align items on main-axis */

align-items: center; /* Align items on cross-axis */

/* Grid */

grid-template-columns: 1fr 2fr; /* Define columns */

grid-template-rows: 100px 200px; /* Define rows */

/* Typography */

text-transform: uppercase; /* Uppercase text */

letter-spacing: 2px; /* Space between characters */

white-space: nowrap; /* Prevent text from wrapping */

/* Background */

background-image: url('image.jpg'); /* Background image */

background-repeat: no-repeat; /* No repeat */

background-size: cover; /* Cover entire element */

/* Transitions and Animations */

transition: all 0.3s ease; /* Transition effect */

animation: myAnimation 2s infinite; /* Animation name, duration, and iteration count */

}
/* Text Properties */

font-family: Arial, sans-serif; /* Define font family */

font-size: 16px; /* Set font size */

font-weight: bold; /* Specify font weight (bold) */

color: #333; /* Define text color */

text-align: center; /* Align text (left, center, right) */

line-height: 1.5; /* Set line height */

text-transform: uppercase; /* Transform text to uppercase */

text-decoration: underline; /* Add underline to text */

letter-spacing: 2px; /* Adjust letter spacing */

white-space: nowrap; /* Prevent text from wrapping */

/* Background Properties */

background-color: #FFF; /* Set background color */

background-image: url('image.jpg'); /* Add background image */

background-repeat: no-repeat; /* Prevent image repetition */

background-size: cover; /* Scale image to cover element */

/* Box Model Properties */

width: 100px; /* Set element width */

height: 100px; /* Set element height */

margin: 10px; /* Define margin around the element */

padding: 10px; /* Add padding inside the element */

border: 1px solid #333; /* Create a border around the element */

/* Display and Layout Properties */

display: block; /* Display as a block element */

display: inline; /* Display inline (e.g., in a line of text) */

display: flex; /* Use flexbox layout */

float: left; /* Float element to the left */

clear: both; /* Clear floating elements */

position: relative; /* Positioning relative to normal flow */

top: 10px; /* Offset element from the top */

left: 10px; /* Offset element from the left */

/* Flexbox Properties */

flex-direction: row; /* Set the main-axis direction (row/column) */

justify-content: center; /* Align items on the main-axis */

align-items: center; /* Align items on the cross-axis */

/* Grid Properties */

grid-template-columns: 1fr 2fr; /* Define grid columns */

grid-template-rows: 100px 200px; /* Define grid rows */

/* Transition and Animation Properties */

transition: all 0.3s ease; /* Apply transition effect */

animation: myAnimation 2s infinite; /* Specify animation properties */

/* Positioning Properties */

top: 10px; /* Offset element from the top */

left: 10px; /* Offset element from the left */

/* Text Effects */

text-shadow: 2px 2px 4px #888; /* Add text shadow */

text-overflow: ellipsis; /* Display ellipsis for overflowed text */

overflow: hidden; /* Hide overflowing content */

word-wrap: break-word; /* Allow words to break and wrap */