CSS CheatSheet

CSS (Cascading Style Sheets) is a language used to describe the presentation of an HTML or XML document, controlling its visual layout.

It provides a way to apply styles such as colors, fonts, margins, and more to HTML elements.

Selectors in CSS

Selectors in CSS are essential for targeting the HTML elements to which we want to apply styles.

Basic Selectors

Type Selector (element)

Selects all elements of a specific type.

p {
  color: blue;
}

Class Selector*

Selects any element with a specific class. Classes are identified with a dot (.) followed by the class name.

.button {
  background-color: green;
}

<div class="button primary large"></div>

ID Selector

Selects a single element that has a specific ID. IDs are identified with a hash symbol (#).

#header {
  background-color: red;
}

Universal Selector

Selects all elements in the document.

* {
  margin: 0;
  padding: 0;
}

Group Selector

Allows grouping multiple selectors to apply the same style to multiple elements.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Combinator Selectors

Descendant Selector (indirect child)

Selects all elements that are inside another element (descendants).

div p {
  color: blue;
}

This selector selects all paragraphs (<p>) that are descendants of a <div> container.

Direct Child Selector

Selects only the elements that are direct children of an element.

ul > li {
  list-style-type: none;
}

This selector only affects <li> elements that are direct children of a <ul>, ignoring deeper descendants.

General Sibling Selector

Selects any element that is a sibling of another, meaning they share the same parent and appear afterwards.

h1 ~ p {
  color: green;
}

This selector selects all paragraphs (<p>) that are siblings of an <h1> and appear after it in the HTML.

Adjacent Sibling Selector

Selects the immediate sibling of an element.

h1 + p {
  color: red;
}

This selector affects the first paragraph (<p>) that appears immediately after an <h1>.

Attribute Selectors

Attribute selectors allow selecting elements based on specific HTML attributes and their values.

Basic Attribute Selector

Selects elements that have a specific attribute.

input[type="text"] {
  border: 1px solid black;
}

This selector will affect any <input> that has the attribute type="text".

Partial Value Attribute Selector

• [attr^="value"]: Selects elements whose attribute value starts with “value”.
• [attr$="value"]: Selects elements whose attribute value ends with “value”.
• [attr*="value"]: Selects elements whose attribute value contains “value”.

a[href^="https"] {
  color: green;
}

In this example, any link (<a>) whose href attribute starts with "https" will be displayed in green.

Space-separated Value Attribute Selector

Selects elements whose attribute contains a list of space-separated values, where one of the values matches.

[class~="highlight"] {
  background-color: yellow;
}

This selector will affect any element whose class includes “highlight” within a list of classes.

Hyphen-separated Value Attribute Selector

Selects elements whose attributes contain hyphen-separated values, and selects those that start with the specified value.

[lang|="en"] {
  font-style: italic;
}

This selector selects elements whose lang attribute starts with “en”, such as en-US or en-GB.

Pseudo-classes

Dynamic Pseudo-classes

Dynamic pseudo-classes affect elements based on their interactive state.

Applies styles when the user hovers over the element.

button:hover {
  background-color: blue;
}

Applies styles when the element has received focus, typically in forms.

input:focus {
  border-color: green;
}

Applies styles while the element is being activated (for example, when clicked).

a:active {
  color: red;
}

Structural Pseudo-classes

Selects the first child of its container.

p:first-child {
  font-weight: bold;
}

Selects the last child of its container.

li:last-child {
  color: red;
}

(n)

Selects the nth child, where n can be a number, a formula, or a keyword.

tr:nth-child(odd) {
  background-color: #eee;
}

This selector affects the odd rows (odd) of a table.

(n)

Selects the nth child of the same type of element.

p:nth-of-type(2) {
  font-size: 20px;
}

This selector affects the second paragraph within a container, regardless of other types of elements.

Negation Pseudo-class

(selector)

Selects elements that do not match the specified selector.

input:not([type="submit"]) {
  border: 1px solid grey;
}

This selector affects all input fields (<input>) that do not have the type="submit" attribute.

Here is the paragraph for the pseudo-class :has() in a CSS cheatsheet:

(selector)

Selects elements that contain at least one element that matches the specified selector.

div:has(> p) {
  background-color: lightblue;
}

This selector applies a light blue background to all <div> elements that contain at least one paragraph (<p>) as a direct child.

Pseudo-elements

::before and ::after

Allow inserting content before or after the content of an element.

h1::before {
  content: "★ ";
  color: gold;
}

This selector adds a star before the content of all <h1> elements.

p::after {
  content: " ➜";
  color: blue;
}

This selector adds an arrow after the content of all <p> elements.

::first-letter and ::first-line

::first-letter: Selects the first letter of a block element.

p::first-letter {
  font-size: 2em;
  color: red;
}

::first-line: Selects the first line of text in an element.

p::first-line {
  font-weight: bold;
}

Units and Measurements

Common Units

Viewport Units

Sure! Here is the section on how to use colors in CSS, organized in tables:

Colors in CSS

Color Formats

Color Mixing

color-mix() allows mixing two colors in a specific proportion, generating a new color from them.

element {
  color:  color-mix(in srgb, var(--my-color), #0000 75%); 
}

Defining Color from Another

color(from) defines a color from a specific color model (like srgb, hsl, etc.).

element {
  color: hsl(from var(--my-color) h 52% 45%);
}

Box Model

The box model in CSS defines how an element’s dimensions and spacing are calculated.

Using CSS Resets

They are used to eliminate inconsistent default styles across browsers.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Positioning

Static (default)

The default positioning. Elements flow in the document.

div {
  position: static;
}

Relative

Positions an element relative to its original position.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

Absolute

Positions an element relative to its nearest container that has a position other than static.

div {
  position: absolute;
  top: 0;
  right: 0;
}

Fixed

Positions an element relative to the browser window.

div {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Sticky

Allows an element to be treated as relative until a specific scroll position is reached, then behaves like fixed.

div {
  position: sticky;
  top: 10px;
}

Spacing

Margins

Margins define the outer space of an element.

h2 {
    margin: 20px;
}

Padding

Padding defines the inner space of an element.

div {
    padding: 10px;
}

Flexbox

Flex Container

To use Flexbox, define a container as display: flex.

.container {
  display: flex;
  justify-content: center; /* Aligns items horizontally */
  align-items: center; /* Aligns items vertically */
}

Axis Direction (flex-direction)

.container {
  flex-direction: column; /* Changes flow direction to column */
}

Space Distribution

.container {
  justify-content: space-between; /* Equal space between items */
}

Individual Alignment

.item {
  align-self: flex-end; /* Aligns a single item */
}

Grid

Grid Container

To use Grid, define a container as display: grid.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal size columns */
  grid-template-rows: auto; /* Automatic rows */
}

Spaces Between Items

Defines space between columns and rows.

.grid-container {
    gap: 10px;
}

Positioning in the Grid

.item {
  grid-column: 1 / 3; /* Occupies from column 1 to 3 */
  grid-row: 2 / 4; /* Occupies from row 2 to 4 */
}

Colors and Backgrounds

Can be defined in different formats: names, RGB, HEX, HSL.

h1 {
  color: #ff5733; /* Using hexadecimal */
  background-color: rgb(255, 99, 71); /* Using RGB */
}

Text Color

The color property is used to define the color of the text.

h1 {
    color: #ff5733;
}

Background Color

The background-color property sets the background color of an element.

div {
	background-color: lightgray;
}

Transparency and Opacity

div {
  background-color: rgba(255, 0, 0, 0.5); /* Transparent */
  opacity: 0.8; /* Applies transparency to the entire element */
}

Background Images

body {
  background-image: url('background.jpg');
  background-size: cover; /* Scales the image to cover the entire background */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}

Shadows and Borders

Borders

Customize borders with different styles, thicknesses, and colors.

div {
  border: 2px dashed red;
  border-radius: 10px; /* Rounded borders */
}

Shadow on Elements

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Text Shadow

h1 {
  text-shadow: 2px 2px 5px grey;
}

Z-index and Layers

Layer Control with z-index

Defines the order in which elements are stacked.

div {
  position: relative;
  z-index: 10; /* This element will be placed on top of others */
}

Typography

Default Font

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

Font Style and Size

h1 {
  font-size: 24px;
  font-style: italic;
  font-weight: bold;
}

Text Transformations

p {
  text-transform: uppercase; /* Changes text to uppercase */
  text-align: center; /* Centers the text */
  letter-spacing: 2px; /* Adjusts spacing between letters */
}

Animations and Transitions

Transitions

button {
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: red;
}

Animations

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

div {
  animation: slidein 2s forwards;
}

CSS Variables

Defining Variables

Allow defining reusable values. They must start with --.

:root {
  --main-color: #3498db;
}

Accessing Variables

Use the var() function.

h1 {
  color: var(--main-color);
}

Responsive Media

Media Queries

Change styles based on screen size.

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

Relative Sizes

Use units like em, rem, % for flexible designs.

p {
  font-size: 2rem; /* Scales based on the root of the document */
}

CSS Methodologies

BEM (Block Element Modifier)

BEM is a methodology that improves CSS structure for easier maintenance.

• Block: an independent component (e.g., menu).
• Element: a part of a block (e.g., menu__item).
• Modifier: a variation of a block or element (e.g., menu__item--active).

.menu {
    /* block styles */
}

.menu__item {
    /* element styles */
}

.menu__item--active {
    /* modifier styles */
}