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

HOME

En aquest tema, aprendrem com enllaçar CSS (Cascading Style Sheets) a un document HTML per estilitzar-lo. El CSS és essencial per donar estil i format a les pàgines web, fent-les més atractives i fàcils d'utilitzar.

Mètodes per enllaçar CSS a HTML

Hi ha tres maneres principals d'enllaçar CSS a un document HTML:

CSS en línia (Inline CSS)
CSS intern (Internal CSS)
CSS extern (External CSS)

CSS en línia (Inline CSS)

El CSS en línia s'aplica directament a l'element HTML mitjançant l'atribut style. Aquest mètode és útil per a canvis ràpids o per estilitzar elements individuals, però no és recomanable per a grans projectes perquè fa que el codi sigui difícil de mantenir.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de CSS en línia</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Hola, món!</h1>
    <p style="font-size: 20px; color: green;">Aquest és un paràgraf estilitzat amb CSS en línia.</p>
</body>
</html>

CSS intern (Internal CSS)

El CSS intern s'escriu dins d'una etiqueta <style> a la secció <head> del document HTML. Aquest mètode és útil quan es volen aplicar estils a una sola pàgina.

Exemple:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de CSS intern</title>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Hola, món!</h1>
    <p>Aquest és un paràgraf estilitzat amb CSS intern.</p>
</body>
</html>

CSS extern (External CSS)

El CSS extern s'escriu en un fitxer separat amb l'extensió .css. Aquest fitxer es vincula al document HTML mitjançant l'etiqueta <link> a la secció <head>. Aquest mètode és el més recomanable per a projectes grans perquè permet mantenir el codi HTML i CSS separats i organitzats.

Exemple:

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>Aquest és un paràgraf estilitzat amb CSS extern.</p>
</body>
</html>

styles.css:

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 20px;
    color: green;
}

Exercicis pràctics

Exercici 1: Aplicar CSS en línia

Crea un document HTML que contingui un títol i un paràgraf. Utilitza CSS en línia per canviar el color del títol a vermell i el color del paràgraf a blau.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de CSS en línia</title>
</head>
<body>
    <h1 style="color: red;">Aquest és un títol</h1>
    <p style="color: blue;">Aquest és un paràgraf.</p>
</body>
</html>

Exercici 2: Aplicar CSS intern

Crea un document HTML que contingui un títol i dos paràgrafs. Utilitza CSS intern per canviar el color del títol a verd i el color dels paràgrafs a taronja.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de CSS intern</title>
    <style>
        h1 {
            color: green;
        }
        p {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>Aquest és un títol</h1>
    <p>Aquest és el primer paràgraf.</p>
    <p>Aquest és el segon paràgraf.</p>
</body>
</html>

Exercici 3: Aplicar CSS extern

Crea un document HTML i un fitxer CSS. Utilitza CSS extern per canviar el color del títol a morat i el color dels paràgrafs a gris.

Solució:

index.html:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de CSS extern</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Aquest és un títol</h1>
    <p>Aquest és el primer paràgraf.</p>
    <p>Aquest és el segon paràgraf.</p>
</body>
</html>

styles.css:

h1 {
    color: purple;
}

p {
    color: gray;
}

Resum

En aquest tema, hem après com enllaçar CSS a un document HTML utilitzant tres mètodes diferents: CSS en línia, CSS intern i CSS extern. Cada mètode té els seus avantatges i desavantatges, i és important triar el més adequat segons les necessitats del projecte. En el proper tema, explorarem les diferents maneres d'incloure CSS en línia, intern i extern en més detall.

Enllaçant CSS a HTML

Mètodes per enllaçar CSS a HTML

CSS en línia (Inline CSS)

CSS intern (Internal CSS)

CSS extern (External CSS)

Exercicis pràctics

Exercici 1: Aplicar CSS en línia

Exercici 2: Aplicar CSS intern

Exercici 3: Aplicar 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