El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com aplicar estils als elements HTML utilitzant CSS (Cascading Style Sheets). CSS és un llenguatge utilitzat per descriure la presentació d'un document escrit en HTML. Ens permet controlar l'aparença visual dels nostres llocs web, com ara colors, fonts, espaiat, i molt més.

Objectius d'aprenentatge

Comprendre com aplicar estils als elements HTML.
Aprendre a utilitzar diferents propietats CSS per estilitzar elements.
Practicar l'aplicació d'estils a través d'exemples pràctics.

Conceptes clau

Aplicant estils amb CSS

Hi ha tres maneres principals d'aplicar CSS als elements HTML:

CSS en línia: Utilitzant l'atribut style directament dins de l'etiqueta HTML.
CSS intern: Utilitzant una etiqueta <style> dins de la secció <head> del document HTML.
CSS extern: Enllaçant un fitxer CSS extern utilitzant l'etiqueta <link>.

Propietats CSS comunes

Algunes de les propietats CSS més utilitzades per estilitzar elements HTML inclouen:

color: Defineix el color del text.
background-color: Defineix el color de fons d'un element.
font-size: Defineix la mida de la font.
margin: Defineix l'espai exterior d'un element.
padding: Defineix l'espai interior d'un element.
border: Defineix la vora d'un element.

Sintaxi CSS

La sintaxi bàsica de CSS consisteix en un selector i un bloc de declaracions. Cada declaració inclou una propietat i un valor.

selector {
  propietat: valor;
}

Exemples pràctics

Exemple 1: CSS en línia

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Exemple de CSS en línia</title>
</head>
<body>
  <h1 style="color: blue; font-size: 24px;">Hola, món!</h1>
  <p style="background-color: yellow; padding: 10px;">Això és un paràgraf estilitzat amb CSS en línia.</p>
</body>
</html>

Exemple 2: CSS intern

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Exemple de CSS intern</title>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    p {
      background-color: yellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Hola, món!</h1>
  <p>Això és un paràgraf estilitzat amb CSS intern.</p>
</body>
</html>

Exemple 3: CSS extern

index.html

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Exemple de CSS extern</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hola, món!</h1>
  <p>Això és un paràgraf estilitzat amb CSS extern.</p>
</body>
</html>

styles.css

h1 {
  color: blue;
  font-size: 24px;
}

p {
  background-color: yellow;
  padding: 10px;
}

Exercicis pràctics

Exercici 1: Estilitzant un document HTML

Crea un document HTML que contingui un títol, un paràgraf i una llista desordenada. Aplica estils utilitzant CSS intern per fer que el títol sigui vermell, el paràgraf tingui un fons gris i la llista tingui un marge de 20 píxels.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Exercici d'estilització</title>
  <style>
    h1 {
      color: red;
    }
    p {
      background-color: grey;
      padding: 10px;
    }
    ul {
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>Títol de l'exercici</h1>
  <p>Això és un paràgraf amb un fons gris.</p>
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
  </ul>
</body>
</html>

Exercici 2: Utilitzant CSS extern

Crea un fitxer HTML i un fitxer CSS extern. Aplica estils al fitxer CSS per fer que tots els encapçalaments <h2> siguin verds i tots els paràgrafs tinguin un text alineat al centre.

Solució:

index.html

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <title>Exercici amb CSS extern</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Encapçalament verd</h2>
  <p>Paràgraf centrat.</p>
</body>
</html>

styles.css

h2 {
  color: green;
}

p {
  text-align: center;
}

Resum

En aquesta secció, hem après com aplicar estils als elements HTML utilitzant CSS. Hem explorat les tres maneres principals d'aplicar CSS: en línia, intern i extern. També hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. Amb aquests coneixements, estàs preparat per començar a crear pàgines web visualment atractives i ben estilitzades.

Estilitzant elements HTML

Objectius d'aprenentatge

Conceptes clau

Aplicant estils amb CSS

Propietats CSS comunes

Sintaxi CSS

Exemples pràctics

Exemple 1: CSS en línia

Exemple 2: CSS intern

Exemple 3: CSS extern

Exercicis pràctics

Exercici 1: Estilitzant un document HTML

Exercici 2: Utilitzant CSS extern

Resum

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet