CSS GUIDE

1. Animations: Animations allow you to create dynamic and interactive effects on web pages. Here's an example code for a basic animation:

/* define the animation */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* apply the animation to an element */
div {
  animation-name: example;
  animation-duration: 2s;
}

1. Backgrounds and Borders: CSS offers a range of options to style the backgrounds and borders of elements. Here's an example code for a simple border:

div {
  border: 1px solid black;
}

1. Box alignment: Box alignment lets you control the placement and alignment of elements within a container. Here's an example code for centering a box horizontally and vertically:

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

1. Box model: The box model defines how the size of an element is calculated and how its content, padding, border, and margin are positioned. Here's an example code for setting the box model:

div {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
}

1. Columns: CSS offers column-based layout options for text and other content. Here's an example code for creating columns:

div {
  columns: 2;
  column-gap: 20px;
}

1. Conditional rules: Conditional rules let you apply styles to elements based on certain conditions, such as the device type or screen size. Here's an example code for applying different styles to a element based on screen size:

@media (min-width: 768px) {
  div {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  div {
    font-size: 16px;
  }
}

1. CSSOM view: CSSOM view provides a range of options for controlling the layout and appearance of web pages, such as scroll behavior and page zoom. Here's an example code for disabling page zoom:

body {
  touch-action: pan-x pan-y;
  user-scalable: no;
}

1. Flexbox: Flexbox is a powerful layout system that allows you to create flexible and responsive layouts. Here's an example code for using Flexbox to create a row of items:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex-basis: 30%;
  height: 100px;
}

1. Flow layout: Flow layout is the default layout mode for HTML elements, in which elements flow in the order they appear in the HTML code. Here's an example code for setting the display property to inline:

span {
  display: inline;
}

1. Fonts: CSS offers a range of options for controlling the font type, size, and style of text. Here's an example code for setting the font family and size:

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

1. Images: CSS offers options for styling and manipulating images on web pages, such as setting the size and position of an image. Here's an example code for setting the size and position of an image:

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

1. Lists and counters: CSS offers options for styling and manipulating lists, such as setting the type of bullet points and adding counters. Here's an example code for adding counters to a list:

ol {
  counter-reset: my-counter;
}

li {
  counter-increment: my-counter;
}

li::before {
  content: counter(my-counter) ".";
}

1. Logical properties: Logical properties are a new addition to CSS that allow you to use logical directions (start, end, inline, and block) instead of physical directions (left, right, top, and bottom). Here's an example code for using logical properties:

div {
  padding-inline-start: 20px;
  margin-block-end: 10px;
}

1. Media queries: Media queries let you apply different styles to elements based on certain conditions, such as the device type or screen size. Here's an example code for applying different styles to an element based on screen size:

@media (min-width: 768px) {
  div {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  div {
    font-size: 16px;
  }
}

1. Positioning: CSS offers options for positioning elements on web pages, such as setting the position, top, left, right, and bottom properties. Here's an example code for positioning an element:

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1. Scroll snap: Scroll snap is a CSS feature that lets you create snap points for scrolling containers. Here's an example code for setting scroll snap points:

.container {
  scroll-snap-type: y mandatory;
}

.item {
  scroll-snap-align: center;
}

1. Shapes: CSS offers options for creating and styling shapes on web pages, such as circles and triangles. Here's an example code for creating a circle:

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

1. Text: CSS offers options for styling and manipulating text on web pages, such as setting the font type, size, and color. Here's an example code for setting the font color:

body {
  color: #333;
}

1. Transforms: CSS offers options for transforming elements on web pages, such as rotating or scaling them. Here's an example code for rotating an element:

div {
  transform: rotate(45deg);
}

1. Transitions: CSS offers options for creating smooth transitions between styles on web pages. Here's an example code for creating a transition on hover:

div {
  transition: all 0.3s ease;
}

div:hover {
  background-color: red;
  color: white;
}