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

HOME

En aquest tema, aprendrem les diferents maneres d'afegir CSS a un document HTML. Hi ha tres mètodes principals per fer-ho: CSS en línia, CSS intern i CSS extern. Cada mètode té els seus avantatges i desavantatges, i la seva utilització depèn del context i de les necessitats del projecte.

CSS en Línia

El CSS en línia s'aplica directament als elements HTML utilitzant l'atribut style. Aquest mètode és útil per a aplicacions ràpides i senzilles, però no és recomanable per a projectes grans, ja que pot fer 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;">Això és un paràgraf estilitzat amb CSS en línia.</p>
</body>
</html>

Explicació:

L'atribut style s'utilitza dins de l'etiqueta HTML per aplicar estils directament a l'element.
Els estils es defineixen com una cadena de text amb propietats CSS separades per punts i comes.

CSS Intern

El CSS intern s'insereix dins de l'etiqueta <style> a la secció <head> del document HTML. Aquest mètode és útil quan es vol 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>Això és un paràgraf estilitzat amb CSS intern.</p>
</body>
</html>

Explicació:

L'etiqueta <style> es col·loca dins de la secció <head> del document HTML.
Els estils es defineixen dins de l'etiqueta <style> utilitzant la sintaxi CSS estàndard.

CSS Extern

El CSS extern s'aplica mitjançant un fitxer CSS separat que es vincula al document HTML amb l'etiqueta <link>. Aquest mètode és el més recomanable per a projectes grans, ja que permet mantenir els estils en un lloc separat i reutilitzable.

Exemple:

Fitxer 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>

Fitxer CSS (styles.css):

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

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

Explicació:

L'etiqueta <link> es col·loca dins de la secció <head> del document HTML per vincular el fitxer CSS extern.
L'atribut rel="stylesheet" indica que el fitxer és una fulla d'estils.
L'atribut href="styles.css" especifica la ubicació del fitxer CSS.

Comparació dels Mètodes

Mètode	Avantatges	Desavantatges
CSS en Línia	Fàcil d'aplicar per a estils ràpids i senzills.	Difícil de mantenir en projectes grans.
CSS Intern	Permet aplicar estils a una sola pàgina de manera centralitzada.	No és reutilitzable en altres pàgines.
CSS Extern	Facilita la mantenibilitat i la reutilització dels estils en múltiples pàgines.	Requereix un fitxer addicional i una càrrega inicial lleugerament més lenta.

Exercicis Pràctics

Exercici 1: CSS en Línia

Crea un document HTML amb un títol i un paràgraf. Aplica estils 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 CSS en Línia</title>
</head>
<body>
    <h1 style="color: red;">Títol en Vermell</h1>
    <p style="color: blue;">Paràgraf en Blau</p>
</body>
</html>

Exercici 2: CSS Intern

Crea un document HTML amb un títol i un paràgraf. Aplica estils interns 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 CSS Intern</title>
    <style>
        h1 {
            color: red;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Títol en Vermell</h1>
    <p>Paràgraf en Blau</p>
</body>
</html>

Exercici 3: CSS Extern

Crea un document HTML amb un títol i un paràgraf. Aplica estils externs per canviar el color del títol a vermell i el color del paràgraf a blau. Crea un fitxer CSS separat per als estils.

Solució:

Fitxer HTML:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici CSS Extern</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Títol en Vermell</h1>
    <p>Paràgraf en Blau</p>
</body>
</html>

Fitxer CSS (styles.css):

h1 {
    color: red;
}

p {
    color: blue;
}

Conclusió

En aquest tema, hem après tres mètodes per afegir CSS a un document HTML: CSS en línia, CSS intern i CSS extern. Cada mètode té els seus propis avantatges i desavantatges, i la seva elecció depèn del context del projecte. En general, el CSS extern és el mètode més recomanable per a projectes grans, ja que facilita la mantenibilitat i la reutilització dels estils.

Com Afegir CSS a HTML

CSS en Línia

Exemple:

Explicació:

CSS Intern

Exemple:

Explicació:

CSS Extern

Exemple:

Fitxer HTML:

Fitxer CSS (styles.css):

Explicació:

Comparació dels Mètodes

Exercicis Pràctics

Exercici 1: CSS en Línia

Solució:

Exercici 2: CSS Intern

Solució:

Exercici 3: CSS Extern

Solució:

Fitxer HTML:

Fitxer CSS (styles.css):

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu