Introducció

En aquest tema, aprendrem la sintaxi bàsica del CSS i com utilitzar els selectors per aplicar estils als elements HTML. La comprensió d’aquests conceptes és fonamental per començar a treballar amb CSS.

Sintaxi de CSS

La sintaxi de CSS està composta per regles que defineixen com s'han d'estilitzar els elements HTML. Cada regla té dues parts principals: el selector i el bloc de declaració.

Estructura d'una Regla CSS

selector {
    propietat: valor;
}

Selector: Indica a quin element HTML s'aplicarà l'estil.
Bloc de Declaració: Conté una o més declaracions separades per punts i comes.
Declaració: Cada declaració inclou una propietat CSS i el seu valor corresponent, separats per dos punts.

Exemple

p {
    color: blue;
    font-size: 16px;
}

En aquest exemple, el selector p aplica les propietats color i font-size a tots els elements <p> del document HTML.

Selectors de CSS

Els selectors són una part essencial del CSS, ja que determinen a quins elements HTML s'aplicaran els estils. A continuació, es presenten alguns dels selectors més comuns:

Selectors Bàsics

Selector de Tipus: Selecciona tots els elements d'un tipus específic.
```
h1 {
    color: red;
}
```
Aplica l'estil a tots els elements <h1>.
Selector de Classe: Selecciona tots els elements amb una classe específica.
```
.highlight {
    background-color: yellow;
}
```
Aplica l'estil a tots els elements amb la classe highlight.
Selector d'ID: Selecciona un element amb un ID específic.
```
#main-header {
    font-size: 24px;
}
```
Aplica l'estil a l'element amb l'ID main-header.

Selectors Combinats

Selector de Descendent: Selecciona elements que són descendents d'un altre element.
```
div p {
    color: green;
}
```
Aplica l'estil a tots els elements <p> que són descendents d'un <div>.
Selector de Fill: Selecciona elements que són fills directes d'un altre element.
```
ul > li {
    list-style-type: none;
}
```
Aplica l'estil a tots els elements <li> que són fills directes d'un <ul>.

Selectors Avançats

Selector d'Atribut: Selecciona elements basats en un atribut o el seu valor.
```
a[target="_blank"] {
    color: orange;
}
```
Aplica l'estil a tots els enllaços (<a>) que tenen l'atribut target amb el valor _blank.
Pseudo-classes: Selecciona elements en un estat específic.
```
a:hover {
    text-decoration: underline;
}
```
Aplica l'estil a tots els enllaços (<a>) quan l'usuari passa el cursor per sobre.
Pseudo-elements: Selecciona i estilitza parts específiques d'un element.
```
p::first-line {
    font-weight: bold;
}
```
Aplica l'estil a la primera línia de tots els paràgrafs (<p>).

Exercicis Pràctics

Exercici 1: Aplicar Estils amb Selectors Bàsics

Crea un document HTML amb els següents elements:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="main-header">Benvingut al Curs de CSS</h1>
    <p class="intro">Aquest és un paràgraf introductori.</p>
    <p>CSS és un llenguatge d'estil.</p>
</body>
</html>

Crea un fitxer CSS (styles.css) i aplica els següents estils:

/* Selector de Tipus */
p {
    color: blue;
}

/* Selector de Classe */
.intro {
    font-style: italic;
}

/* Selector d'ID */
#main-header {
    text-align: center;
}

Exercici 2: Utilitzar Selectors Combinats i Avançats

Afegeix els següents elements al document HTML:

<div class="container">
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>
    <a href="#" target="_blank">Enllaç Extern</a>
</div>

Afegeix els següents estils al fitxer CSS:

/* Selector de Descendent */
.container ul li {
    color: green;
}

/* Selector d'Atribut */
a[target="_blank"] {
    color: orange;
}

/* Pseudo-classe */
a:hover {
    text-decoration: underline;
}

/* Pseudo-element */
p::first-line {
    font-weight: bold;
}

Conclusió

En aquesta secció, hem après la sintaxi bàsica del CSS i com utilitzar diferents tipus de selectors per aplicar estils als elements HTML. Els selectors són una eina poderosa que ens permeten estilitzar elements de manera precisa i eficient. En el proper tema, explorarem com afegir CSS als nostres documents HTML.

Sintaxi i Selectors de CSS

Introducció

Sintaxi de CSS

Estructura d'una Regla CSS

Exemple

Selectors de CSS

Selectors Bàsics

Selectors Combinats

Selectors Avançats

Exercicis Pràctics

Exercici 1: Aplicar Estils amb Selectors Bàsics

Exercici 2: Utilitzar Selectors Combinats i Avançats

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