CSS from the first rule: syntax, the box model and selectors

Separation of Concerns

CSS separates content (HTML) from presentation (styling), making code cleaner and more maintainable.

Consistent Styling

Change the look of your entire website by editing just one CSS file.

Responsive Design

Create layouts that adapt to different screen sizes with media queries.

Performance

Reduces page load times by caching stylesheets for reuse across pages.

External Stylesheets

Store CSS in separate files for reuse across multiple pages, ensuring consistency and easier maintenance.

<link rel="stylesheet" href="styles.css">

Cascading Nature

Styles cascade from multiple sources, allowing for flexible and organized styling with predictable precedence.

/* Specificity order: !important > inline > id > class > element */

Responsive Capabilities

Create designs that adapt to different devices and screen sizes using media queries and flexible units.

@media (max-width: 768px) {
  /* Mobile styles */
}

Element Selector

p {
  color: blue;
  font-size: 16px;
}

Styles all <p> elements

Class Selector

.highlight {
  background-color: yellow;
  padding: 10px;
}

Styles elements with class='highlight'

ID Selector

#header {
  height: 80px;
  background: #333;
}

Styles the element with id='header'

Background

div {
  background-color: #f0f0f0;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

Controls: color, image, repeat, position, size

Text Styling

p {
  color: #333;
  text-align: center;
  text-decoration: underline;
  line-height: 1.6;
  text-transform: uppercase;
}

Controls: color, alignment, decoration, spacing, case

Fonts

.text {
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
}

Controls: family, size, weight, style, variant

Links

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  color: darkblue;
  text-decoration: underline;
}

States: link, visited, hover, active, focus

Positioning

.box {
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 10;
}

Types: static, relative, absolute, fixed, sticky

Lists

ul {
  list-style-type: square;
  list-style-position: inside;
  padding-left: 20px;
}

Controls: bullet type, position, spacing, images

Tables

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

Controls: borders, spacing, alignment, layout

Floating

img {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

Values: left, right, none (with clearfix)

Align

.center {
  text-align: center;
  margin: 0 auto;
  vertical-align: middle;
}

Types: horizontal, vertical, and centering

Display

.element {
  display: flex;
  visibility: visible;
  opacity: 1;
}

Values: block, inline, flex, grid, none

Padding

Space inside the border

.box {
  padding: 20px;
  padding-top: 10px;
  padding: 10px 20px;
  padding: 10px 20px 15px 5px;
}

Shorthand: 1-4 values for different sides

Margin

Space outside the border

.box {
  margin: 20px;
  margin: 0 auto; /* Centering */
  margin-bottom: 15px;
  margin: 10px 5px 20px 0;
}

Note: Negative values allowed

Border

Edge around the padding

.box {
  border: 2px solid #4338ca;
  border-radius: 8px;
  border-top: 1px dashed #999;
  border-bottom: none;
}

Styles: solid, dashed, dotted, double, etc.

Outline

Non-layout affecting border

.box {
  outline: 3px solid red;
  outline-offset: 2px;
}

Use: Focus states, debugging