Summary CSS Complete Properties Guide

CSS Complete Properties Guide
CSS, or Cascading Style Sheets, is a cornerstone technology in web development that
defines the visual presentation of a website. It allows developers to control the layout, colors,
fonts, and overall design of web pages, ensuring a consistent and appealing user experience
across different devices and screen sizes. This guide provides a comprehensive overview of
CSS properties, offering insights and practical examples to help you master the art of styling
web content effectively. Whether you’re a beginner or an experienced developer, this guide
serves as a valuable resource for creating visually engaging and responsive designs.


@
@charset
Definition: Specifies the character encoding used in the CSS file.
Examples:
1. Setting UTF-8 encoding:


@charset "UTF-8";


2. Using ISO-8859-1 encoding:


@charset "ISO-8859-1";




@container
Definition: Used to define styles for elements inside a container, depending on the
container's size or style.
Examples:
1. Setting a size query:


@container (min-width: 600px) {
.box {
background-color: lightblue;
}
}


2. Combining multiple conditions:

, @container (min-width: 400px) and (orientation: landscape) {
.box {
background-color: lightgreen;
}
}




@counter-style
Definition: Allows you to define custom counter styles.
Examples:
1. Creating a custom numeric counter:


@counter-style numeric {
system: numeric;
symbols: "①" "②" "③";
}


2. Using the counter in a list:


ol {
list-style: numeric;
}




@font-face
Definition: Specifies custom fonts to be used in the CSS file.
Examples:
1. Adding a custom font:


@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
}


2. Applying the font:


body {
font-family: 'MyFont', sans-serif;
}




@font-palette-values

, Definition: Customizes the default values of a font-palette.
Examples:
1. Defining a font palette:


@font-palette-values myPalette {
base-palette: 1;
override-colors: 1 orange;
}


2. Applying the palette:


p {
font-palette: myPalette;
}




@import
Definition: Allows importing of external CSS files.
Examples:
1. Importing a stylesheet:


@import url('styles.css');


2. Importing with media queries:


@import url('print.css') print;




@keyframes
Definition: Defines the animation keyframes.
Examples:
1. Creating a simple animation:


@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);

, }
}


2. Using the animation:


.box {
animation: slideIn 2s ease-in-out;
}




@layer
Definition: Controls the CSS cascade layers.
Examples:
1. Defining a cascade layer:


@layer reset {
* {
margin: 0;
padding: 0;
}
}


2. Importing a layer:


@import url('styles.css') layer(reset);




@media
Definition: Sets style rules for specific media types/devices.
Examples:
1. Applying styles for small screens:


@media (max-width: 600px) {
.container {
background-color: lightblue;
}
}


2. Targeting print media:


@media print {
body {