Introducció

CSS (Cascading Style Sheets) és un llenguatge utilitzat per descriure l'aparença i el format d'un document escrit en HTML o XML. Mentre que HTML proporciona l'estructura del lloc web, CSS s'encarrega de la seva presentació visual. CSS permet separar el contingut de la presentació, facilitant així el manteniment i la flexibilitat del lloc web.

Objectius d'Aprenentatge

En aquesta secció, aprendràs:

Què és el CSS i per què és important.
Com funciona el CSS en relació amb HTML.
Els avantatges d'utilitzar CSS.

Conceptes Clau

Definició de CSS

CSS és un llenguatge de fulls d'estil que permet aplicar estils als elements HTML. Això inclou colors, fonts, espaiats, alineacions, i molt més.

Relació entre HTML i CSS

HTML proporciona l'estructura bàsica del document, mentre que CSS defineix com es veurà aquesta estructura. Això permet una clara separació entre el contingut i la presentació.

Avantatges d'Utilitzar CSS

Separació de Contingut i Presentació: Facilita el manteniment i l'actualització del lloc web.
Reutilització d'Estils: Permet aplicar els mateixos estils a múltiples pàgines.
Millor Rendiment: Els fulls d'estil externs es poden emmagatzemar en la memòria cau del navegador, millorant el temps de càrrega.
Accessibilitat: Facilita la creació de llocs web accessibles per a persones amb discapacitats.

Exemples Pràctics

Exemple 1: HTML sense CSS

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple Sense CSS</title>
</head>
<body>
    <h1>Benvingut al meu lloc web</h1>
    <p>Aquest és un paràgraf de text.</p>
</body>
</html>

Aquest document HTML es veurà molt bàsic i sense estil.

Exemple 2: HTML amb CSS

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple Amb CSS</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Benvingut al meu lloc web</h1>
    <p>Aquest és un paràgraf de text.</p>
</body>
</html>

En aquest exemple, hem afegit estils CSS per millorar l'aparença del document HTML.

Exercici Pràctic

Exercici 1: Crear un Document HTML amb CSS

Crea un document HTML bàsic amb un títol i un paràgraf.
Afegeix estils CSS per canviar el color de fons, la font del text i els colors del títol i el paràgraf.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Document Amb CSS</title>
    <style>
        body {
            background-color: #e0f7fa;
            font-family: 'Helvetica Neue', sans-serif;
        }
        h1 {
            color: #00796b;
        }
        p {
            color: #004d40;
        }
    </style>
</head>
<body>
    <h1>Benvingut al meu lloc web</h1>
    <p>Aquest és un paràgraf de text.</p>
</body>
</html>

Conclusió

En aquesta secció, has après què és el CSS, com funciona amb HTML i els avantatges d'utilitzar-lo. També has vist exemples pràctics de com el CSS pot transformar l'aparença d'un document HTML. Ara estàs preparat per aprofundir en la sintaxi i els selectors de CSS en la següent secció.

Què és el CSS?

Introducció

Objectius d'Aprenentatge

Conceptes Clau

Definició de CSS

Relació entre HTML i CSS

Avantatges d'Utilitzar CSS

Exemples Pràctics

Exemple 1: HTML sense CSS

Exemple 2: HTML amb CSS

Exercici Pràctic

Exercici 1: Crear un Document HTML amb CSS

Solució

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