10 کد CSS کاربردی برای طراحی وب | آموزش کامل و مثال‌ها

1-کد cssتغییر رنگ متن

این کد رنگ متن با کلاس my-text را به آبی تغییر می‌دهد.

				
					.my-text {
    color: blue;
}

این کد رنگ پس‌زمینه عنصری با کلاس my-box را به خاکستری روشن تغییر می‌دهد

				
					.my-box {
    background-color: lightgray;
}

این کد فونت متن با کلاس my-heading را به Arial یا یک فونت sans-serif مشابه تغییر می‌دهد.

				
					.my-heading {
    font-family: Arial, sans-serif;
}

این کد اندازه فونت متن با کلاس my-paragraph را به 16 پیکسل تغییر می‌دهد

				
					.my-container {
    border: 1px solid black;
}

این کد یک حاشیه 1 پیکسلی جامد به رنگ مشکی برای عنصری با کلاس my-container ایجاد می‌کند

				
					.my-paragraph {
    font-size: 16px;
}

این کد یک فاصله داخلی 10 پیکسلی از بالا و پایین و 20 پیکسلی از چپ و راست به عنصری با کلاس my-button می‌دهد

				
					.my-button {
    padding: 10px 20px;
}

این کد یک فاصله خارجی 15 پیکسلی از هر چهار طرف به عنصری با کلاس my-item می‌دهد

				
					.my-item {
    margin: 15px;
}

این کد عنصری با کلاس hidden را مخفی می‌کند.

				
					.hidden {
    display: none;
}

این کد متن با کلاس center-text را در وسط محفظه خود تراز می‌کند.

				
					.center-text {
    text-align: center;
}

این کد گوشه‌های عنصری با کلاس rounded-box را 10 پیکسل گرد می‌کند

				
					.rounded-box {
    border-radius: 10px;
}