El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

CSS en línia, intern i extern

Següent ►
►

En aquest tema, aprendrem com aplicar estils CSS als nostres documents 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 conèixer-los per poder escollir el més adequat segons les necessitats del projecte.

CSS en línia

El CSS en línia s'aplica directament a les etiquetes HTML utilitzant l'atribut style. Aquest mètode és útil per aplicar estils ràpids i específics a elements individuals, però no és recomanable per a projectes grans degut a la seva manca d'escalabilitat i mantenibilitat.

Exemple de 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; text-align: center;">Hola, món!</h1>
    <p style="font-size: 20px; color: green;">Això és un paràgraf amb estil en línia.</p>
</body>
</html>

Explicació

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

CSS intern

El CSS intern s'aplica dins de l'etiqueta <style> que es col·loca dins de la secció <head> del document HTML. Aquest mètode és útil per a pàgines individuals on els estils no es reutilitzen en altres pàgines.

Exemple de CSS intern

<!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 amb estil intern.</p>
</body>
</html>

Explicació

  • L'etiqueta <style> es col·loca dins de la secció <head> del document HTML.
  • Els estils es defineixen 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 utilitzant l'etiqueta <link>. Aquest mètode és el més recomanable per a projectes grans, ja que permet reutilitzar els estils en múltiples pàgines i facilita la mantenibilitat.

Exemple de 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 amb estil extern.</p>
</body>
</html>

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.
  • Els estils es defineixen en un fitxer CSS separat utilitzant la sintaxi CSS estàndard.

Comparació dels mètodes

Mètode Avantatges Desavantatges
CSS en línia Fàcil d'aplicar ràpidament a elements específics Difícil de mantenir i escalar en projectes grans
CSS intern Ideal per a pàgines individuals No reutilitzable en múltiples pàgines
CSS extern Reutilitzable i fàcil de mantenir Requereix un fitxer addicional i una càrrega inicial

Exercici pràctic

Instruccions

  1. Crea un document HTML amb el següent contingut:

    <!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de CSS</title>
</head>
<body>
    <h1>Benvingut al meu lloc web</h1>
    <p>Això és un paràgraf d'exemple.</p>
</body>
</html>

  2. Aplica estils utilitzant els tres mètodes de CSS:

    • Canvia el color del text de l'encapçalament a vermell utilitzant CSS en línia.
    • Canvia la mida del text del paràgraf a 18px utilitzant CSS intern.
    • Canvia el color de fons del cos (body) a gris clar utilitzant CSS extern.

Solució

index.html

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de CSS</title>
    <style>
        p {
            font-size: 18px;
        }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 style="color: red;">Benvingut al meu lloc web</h1>
    <p>Això és un paràgraf d'exemple.</p>
</body>
</html>

styles.css

body {
    background-color: lightgray;
}

Conclusió

En aquest tema, hem après com aplicar estils CSS als nostres documents HTML utilitzant tres mètodes diferents: CSS en línia, CSS intern i CSS extern. Cada mètode té els seus propis avantatges i desavantatges, i és important escollir el més adequat segons les necessitats del projecte. En el proper tema, explorarem els selectors bàsics de CSS per aplicar estils de manera més eficient i específica.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats