CSS e HTML – Come dare stile alle pagine

8. CSS e HTML – Come dare stile alle pagine

Finora abbiamo creato pagine HTML funzionali, ma un po’… spartane.
Per renderle belle e curate, serve CSS (Cascading Style Sheets).

8.1 Cos’è il CSS

È un linguaggio per definire lo stile di una pagina HTML: colori, font, margini, dimensioni, layout, ecc.
Il browser legge prima l’HTML per la struttura, poi il CSS per l’aspetto.

Analogia: HTML è lo scheletro, CSS sono vestiti e trucco.

8.2 Modi per inserire CSS in una pagina HTML

Stile inline (direttamente nell’elemento)
```
<p style="color: red; font-size: 20px;">Testo rosso</p>
```
➤ Veloce, ma disordinato se usato troppo.

Stile interno (nella sezione <head>)

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

➤ Utile per piccole pagine.

Stile esterno (file .css separato)
```
<head>
    <link rel="stylesheet" href="stile.css">
</head>
```
➤ Metodo consigliato per progetti seri: il CSS è in un file a parte.

8.3 Selettori CSS base

I selettori indicano a quali elementi HTML applicare lo stile.

Tipo di selettore	Sintassi	Esempio
Per tag	`tag { ... }`	`p { color: red; }`
Per classe	`.classe { ... }`	`.importante { font-weight: bold; }`
Per ID	`#id { ... }`	`#titolo { font-size: 24px; }`

Esempio completo:

<p class="importante">Testo importante</p>
<h1 id="titolo">Benvenuto</h1>

.importante {
    color: green;
}
#titolo {
    text-align: center;
}

8.4 Proprietà CSS più comuni

Colori: color, background-color
Testo: font-size, font-family, text-align
Spaziature: margin, padding
Bordi: border, border-radius
Dimensioni: width, height

Esempio:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
p {
    color: #333;
    line-height: 1.5;
}

English version
8. CSS and HTML - How to give style to the pages

So far we have created functional HTML pages, but a little ... Spartan.

To make them beautiful and well -kept, you need CSS (Cascading Style Sheets).

8.1 What is the CSS

It is a language to define the style of an HTML page: colors, fonts, margins, size, layouts, etc.
The browser first reads the HTML for the structure, then the CSS for the appearance.

8.2 ways to insert CSS on an HTML page

Inline style (directly in the element)

➤ Fast, but disordered if used too much.

Internal style (in the <ead> section)

<Head>

<Style>

p {

color: blue;

font-size: 18px;

}

</ style>

</Ead>

➤ Useful for small pages.

External style (separated .css file)

<Head>

</Ead>

➤ Recommended method for serious projects: the CSS is in a separate file.

8.3 CSS base selectors

The selectors indicate which HTML elements to apply the style.

Type of Syntax Selector Example

For tags {...} p {color: red; }

For class. Class {...}. }

For Id #id {...} #titolo {font-size: 24px; }

Complete example:

<p class = "important"> important text </p>

<H1 ID = "Title"> Welcome </ H1>

color: green;

}

#title {

Text-Align: Center;

}

8.4 Most common CSS properties

Colors: Color, Background-Color
Text: Font-Size, Font-Family, Text-Align
Spacing: Margin, Padding
Borders: Border, Border-Radius
Dimensions: Width, Height

Example:

Body {
Background-Color: #F0F0F0;
Font-Family: Arial, Sans-Serif;
}
p {
color: #333;
Line-Height: 1.5;
}

Puoi seguire anche il mio canale YouTube https://www.youtube.com/channel/UCoOgys_fRjBrHmx2psNALow/ con tanti video interessanti

I consigli che offriamo sono di natura generale. Non sono consigli legali o professionali. Quello che può funzionare per una persona potrebbe non essere adatto a un’altra, e dipende da molte variabili.
Per supportare e far crescere il canale in modo semplice, rapido e gratuito, potete fare acquisti su amazon usando il mio link di affiliazione.
Questo implica che io prenda una commissione ogni volta che qualcuno faccia un qualsiasi acquisto utilizzando il mio link di affiliazione https://amzn.to/4cgJ3Ls

Magnetismo

Cerca nel blog