Introduction to CSS

CSS (Cascading Style Sheets) is the language used to describe the visual presentation of an HTML document.
With CSS you can change colors, fonts, sizes, margins, positions, and generally the appearance of a web page.

What is CSS?

CSS stands for Cascading Style Sheets.

  • Cascading: rules are applied following a hierarchical order and priority.
  • Style: defines how an element looks on the page.
  • Sheets: because they are organized in files (usually .css).

How to apply CSS

There are three main ways to apply CSS to an HTML document:

  1. Inline: inside the style attribute of a tag.
<p style="color:red;">Red text</p>
  1. In the HTML document, using <style>:
<style>
  p {
    color: blue;
  }
</style>
  1. In an external file (recommended):
<link rel="stylesheet" href="styles.css" />

✅ Exercise:
Create an index.html file and connect it to a styles.css file. Change the background color of the page.

Basic Selectors

A selector in CSS is the way to tell the browser which element to apply a style to.

  • By tag: selects all elements of a type.
p {
  color: green;
} /* All paragraphs will be green */
  • By class (.): applies to elements with a class attribute.
.text {
  font-size: 18px;
}
  • By id (#): applies to an element with a unique id.
#main {
  background: yellow;
}

📌 Specificity:
If two rules affect the same element, the browser applies the most specific one:
id > class > tag.

✅ Exercise:
Apply a style to all paragraphs, a different one to a class called .important, and a background color to an id called #title.

Colors and Units

Colors in CSS

  • By name: red, blue, green
  • HEX: #ff0000 (red)
  • RGB: rgb(255, 0, 0) (red)
  • HSL: hsl(0, 100%, 50%) (red)

Units in CSS

  • Absolute:
    • px (pixels, fixed).
  • Relative:
    • % (percentage relative to the container).
    • em (relative to the font size of the parent element).
    • rem (relative to the root font size of the document).
  • Viewport:
    • vh (viewport height).
    • vw (viewport width).

✅ Exercise:
Make a text in rgb(0, 128, 255), with a size in 2em.

Text Properties

Text properties allow you to control how written content looks.

p {
  color: navy; /* Text color */
  font-size: 18px; /* Font size */
  font-family: Arial, sans-serif; /* Font type */
  text-align: center; /* Alignment */
  line-height: 1.5; /* Line spacing */
  letter-spacing: 2px; /* Letter spacing */
}

✅ Exercise:
Create a paragraph with a custom font, centered and with extra letter spacing.

Backgrounds and Borders

body {
  background-color: lightgray; /* Background color */
  background-image: url('background.png'); /* Background image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Scale to screen size */
}

div {
  border: 2px solid black; /* Thickness, style and color */
  border-radius: 10px; /* Rounded borders */
}

✅ Exercise:
Create a div with a background color, rounded border and shadow (box-shadow).

Box Model

The Box Model is the way CSS represents each element as a box with 4 areas:

  1. Content → the text or image inside the element.
  2. Padding → space between the content and the border.
  3. Border → line around the padding.
  4. Margin → external space with respect to other elements.
div {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

✅ Exercise:
Draw a div with different values of margin and padding to see the difference.

Positioning

The position property defines how an element is placed on the page.

  • static: normal position.
  • relative: relative to its original position.
  • absolute: relative to the first container with a position other than static.
  • fixed: fixed on the screen, even when scrolling.
  • sticky: behaves like relative, but sticks when scrolling.
.box1 {
  position: static;
}
.box2 {
  position: relative;
  top: 10px;
  left: 20px;
}
.box3 {
  position: absolute;
  top: 0;
  right: 0;
}
.box4 {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

✅ Exercise:
Create a button that stays fixed in the lower right corner.

a {
  color: blue;
}
a:hover {
  color: red;
} /* When the mouse is over */
a:visited {
  color: purple;
} /* Already visited links */

Tables

table {
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid black;
  padding: 8px;
}
tr:hover {
  background-color: lightyellow;
}

✅ Exercise:
Create a table with alternating row colors.

Flexbox (Introduction)

Flexbox (Flexible Box) is a layout system that makes it easy to organize elements in rows or columns.

.container {
  display: flex; /* Enable flexbox */
  justify-content: space-between; /* Horizontal distribution */
  align-items: center; /* Vertical alignment */
}

✅ Exercise:
Create a container with 3 boxes distributed horizontally with space between them.

Grid (Introduction)

Grid is a two-dimensional layout system (rows and columns).

.container {
  display: grid; /* Enable grid */
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 10px; /* Space between cells */
}

✅ Exercise:
Create a grid of 3 columns with 6 boxes.

Responsiveness (Basic)

Responsive Design allows a website to adapt to different screen sizes.

It is achieved with media queries: CSS rules that apply only at certain screen widths.

@media (max-width: 600px) {
  body {
    background: lightblue;
  }
  p {
    font-size: 14px;
  }
}

✅ Exercise:
Make the background change color on small screens.

Best Practices and Closing

  • Always use an external file (styles.css).
  • Reuse classes, avoid using id for styles.
  • Use CSS variables (Custom Properties):
:root {
  --main-color: #3498db;
}

button {
  background: var(--main-color);
  color: white;
}

🎯 Final Project

Create a simple personal page with:

  • A header and a navigation menu.
  • A section with text and images.
  • A table and a list.
  • Styles applied with Flexbox and/or Grid.
  • Responsive design with media queries.