CSS Cheatsheet - ProX Edition

What is CSS?

CSS (Cascading Style Sheets) is a language used to style webpages. It controls the appearance of HTML elements, including colors, fonts, layouts, and animations, making websites visually appealing and user-friendly.

CSS works by applying rules to HTML elements, allowing you to customize their look and behavior across different devices.

CSS Syntax

A CSS rule consists of a selector (which targets an HTML element) and declarations (properties and their values) inside curly braces.

selector {
  property: value;
}

Example

h1 {
  color: #333;
  font-size: 24px;
}

This rule styles all <h1> elements with a dark gray color and a font size of 24 pixels.

CSS Selectors

Selectors identify which HTML elements to style. Here are the most common types:

• Element Selector: Targets HTML tags (e.g., p, div)
• Class Selector: Targets elements with a class (e.g., .button)
• ID Selector: Targets a unique element with an ID (e.g., #header)
• Attribute Selector: Targets elements with specific attributes (e.g., [type="text"])
• Pseudo-Class: Targets states like :hover or :first-child
• Combinators: Combine selectors (e.g., div p for descendants)

Example

.container p {
  font-size: 16px;
}
#hero:hover {
  background-color: #f0f0f0;
}

The first rule styles all <p> elements inside elements with class container. The second changes the background on hover for an element with ID hero.

Box Model

Every HTML element is treated as a rectangular box with four parts: content, padding, border, and margin.

• Content: The text, images, or other data inside the element.
• Padding: Space between the content and the border.
• Border: A line surrounding the padding.
• Margin: Space outside the border, separating the element from others.

.box {
  width: 200px;
  padding: 15px;
  border: 2px solid #333;
  margin: 20px;
}

This creates a 200px-wide box with 15px padding, a 2px solid border, and 20px margin.

Layout Techniques

CSS provides several ways to arrange elements on a page:

• Display: Controls element rendering (block, inline, flex, grid).
• Position: Places elements (static, relative, absolute, fixed, sticky).
• Float: Moves elements to the left or right (left, right).
• Flexbox: A one-dimensional layout system for flexible arrangements.
• Grid: A two-dimensional layout system for rows and columns.

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

This makes .container a flexbox, spacing its children evenly and aligning them vertically.

Typography

Typography styles control how text looks and feels.

• font-family: Sets the font (e.g., "Arial", sans-serif).
• font-size: Sets text size (e.g., 16px, 1rem).
• font-weight: Controls boldness (e.g., 400, 700).
• text-align: Aligns text (left, center, right).
• line-height: Sets line spacing (e.g., 1.6).
• text-decoration: Adds underlines or strikethroughs (underline, none).

p {
  font-family: "Helvetica", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
}

This styles paragraphs with Helvetica, 14px text, 1.8 line spacing, and justified alignment.

Colors & Backgrounds

Colors and backgrounds enhance the visual appeal of elements.

• color: Sets text color.
• background-color: Sets background color.
• background-image: Adds an image as a background.
• background-position: Positions the background image.
• Color Formats: Hex (#ff0000), RGB (rgb(255, 0, 0)), RGBA (rgba(255, 0, 0, 0.5)), Named (red).

.hero {
  background-color: #007bff;
  color: white;
  background-image: url('bg.jpg');
  background-position: center;
}

This styles a hero section with a blue background, white text, and a centered background image.

Transitions & Animations

Transitions create smooth changes, while animations use keyframes for complex effects.

Transitions

.button {
  background-color: #007bff;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #0056b3;
}

This smoothly changes the button’s background color on hover over 0.3 seconds.

Animations

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.element {
  animation: slideIn 1s ease-in-out;
}

This animates an element sliding in from the left over 1 second.

Responsive Design

Responsive design ensures websites look good on all devices, from phones to desktops.

• Media Queries: Apply styles based on screen size.
• Relative Units: Use vw, vh, rem, em, or % for flexible sizing.
• Fluid Layouts: Use percentages or auto for widths.

@media (max-width: 768px) {
  .container {
    padding: 10px;
    font-size: 14px;
  }
}

This reduces padding and font size on screens smaller than 768px.

Pseudo-Classes & Pseudo-Elements

Pseudo-classes style specific states, while pseudo-elements style parts of an element.

• :hover: Mouse over an element.
• :active: Element being clicked.
• :first-child: First element among siblings.
• ::before, ::after: Add content before or after an element.

a:hover {
  color: #007bff;
}
p::first-line {
  font-weight: bold;
}

This changes link color on hover and bolds the first line of paragraphs.

Specificity

Specificity determines which CSS rule applies when multiple rules target the same element.

• Order: Inline styles > IDs > Classes > Elements.
• !important: Overrides all, but use sparingly.

#header {
  color: blue;
}
h1 {
  color: red;
}

The #header rule wins due to higher specificity.

CSS Variables

CSS variables (custom properties) store reusable values, making updates easier.

:root {
  --primary-color: #007bff;
  --padding: 10px;
}
.button {
  background-color: var(--primary-color);
  padding: var(--padding);
}

This uses variables for consistent styling across elements.

Transforms

Transforms change an element’s shape, size, or position (e.g., rotate, scale, translate).

.card:hover {
  transform: scale(1.05) rotate(2deg);
}

This slightly enlarges and rotates a card on hover.

Filters

Filters apply visual effects like blur, brightness, or grayscale to elements.

img {
  filter: grayscale(50%) brightness(1.2);
}

This makes an image 50% grayscale and slightly brighter.

CSS Grid

CSS Grid is a two-dimensional layout system for creating complex layouts with rows and columns.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

This creates a grid with three equal columns and 20px gaps.

Flexbox

Flexbox is a one-dimensional layout system for aligning and distributing items flexibly.

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

This centers items horizontally and vertically with even spacing.

Accessibility

Accessible CSS ensures everyone, including those using assistive technologies, can use your website.

• Use high-contrast colors for readability.
• Ensure focus states are visible (e.g., :focus).
• Avoid relying solely on color to convey information.

a:focus {
  outline: 2px solid #007bff;
}

This adds a visible outline to links when focused.

Best Practices

Follow these tips to write clean, efficient, and maintainable CSS:

• Use meaningful class names (e.g., .btn-primary instead of .blue).
• Organize code with comments and logical grouping.
• Minimize !important and overly specific selectors.
• Use external stylesheets instead of inline CSS.
• Test responsiveness across devices.
• Validate CSS using tools like W3C’s validator.