Vous trouverez ci-dessous une liste de propriétés CSS que nous n’avons pas encore vu, vous permettant d’ajouter d’autres styles à vos textes, comme les majuscules, interlignages, graisses, etc.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Exemples de Propriétés CSS Textuelles</title>
<style>
body {
font-family: system-ui;
background: #fafafa;
color: #333;
margin: 0;
padding: 20px;
}
.container {
max-width: 900px;
margin-left: auto;
margin-right: auto;
background: #ffffff;
padding: 50px;
border: 2px solid #ddd;
}
.main-title {
font-size: 2.5rem;
color: #2c3e50;
margin-top: 0;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
.section {
margin-bottom: 45px;
padding: 25px;
background: #f9f9f9;
border-left: 4px solid #95a5a6;
}
.section-title {
font-size: 1.5rem;
color: #34495e;
margin-top: 0;
margin-bottom: 20px;
font-weight: 600;
}
/* Font-Weight Examples */
.light-text {
font-weight: 300;
font-size: 1.1rem;
margin-bottom: 10px;
}
.normal-text {
font-weight: 400;
font-size: 1.1rem;
margin-bottom: 10px;
}
.bold-text {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 10px;
}
.bolder-text {
font-weight: 900;
font-size: 1.1rem;
margin-bottom: 10px;
}
/* Font-Style Examples */
.normal-style {
font-style: normal;
font-size: 1.1rem;
margin-bottom: 10px;
}
.italic-style {
font-style: italic;
font-size: 1.1rem;
margin-bottom: 10px;
color: #555;
}
/* Text-Transform Examples */
.uppercase-text {
text-transform: uppercase;
font-size: 1.1rem;
margin-bottom: 10px;
color: #e74c3c;
}
.lowercase-text {
text-transform: lowercase;
font-size: 1.1rem;
margin-bottom: 10px;
color: #16a085;
}
.capitalize-text {
text-transform: capitalize;
font-size: 1.1rem;
margin-bottom: 10px;
color: #8e44ad;
}
/* Text-Decoration Examples */
.underline-text {
text-decoration: underline;
font-size: 1.1rem;
margin-bottom: 10px;
}
.overline-text {
text-decoration: overline;
font-size: 1.1rem;
margin-bottom: 10px;
color: #d35400;
}
.linethrough-text {
text-decoration: line-through;
font-size: 1.1rem;
margin-bottom: 10px;
color: #7f8c8d;
}
.no-decoration a {
text-decoration: none;
color: #3498db;
font-size: 1.1rem;
font-weight: 600;
}
/* Letter-Spacing Examples */
.tight-spacing {
letter-spacing: -1px;
font-size: 1.1rem;
margin-bottom: 10px;
}
.normal-spacing {
letter-spacing: 0;
font-size: 1.1rem;
margin-bottom: 10px;
}
.wide-spacing {
letter-spacing: 3px;
font-size: 1.1rem;
margin-bottom: 10px;
}
.wider-spacing {
letter-spacing: 8px;
font-size: 1.1rem;
margin-bottom: 10px;
text-transform: uppercase;
}
/* Line-Height Examples */
.compact-lines {
line-height: 1.2;
font-size: 1rem;
margin-bottom: 15px;
background: #ecf0f1;
padding: 15px;
border-left: 3px solid #e74c3c;
}
.normal-lines {
line-height: 1.5;
font-size: 1rem;
margin-bottom: 15px;
background: #ecf0f1;
padding: 15px;
border-left: 3px solid #f39c12;
}
.spacious-lines {
line-height: 2.5;
font-size: 1rem;
margin-bottom: 15px;
background: #ecf0f1;
padding: 15px;
border-left: 3px solid #27ae60;
}
/* Combined Examples */
.combined-example {
background: #34495e;
border-left: 4px solid #e74c3c;
}
.combined-example .section-title {
color: #ecf0f1;
}
.fancy-text {
font-size: 1.3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 5px;
color: #e74c3c;
margin-bottom: 15px;
}
.signature-text {
font-size: 1.8rem;
font-style: italic;
font-weight: 300;
letter-spacing: 2px;
color: #3498db;
margin-bottom: 15px;
}
.code-style {
font-family: monospace;
font-size: 1rem;
background: #2c3e50;
color: #1abc9c;
padding: 15px;
letter-spacing: 1px;
border: 1px solid #1abc9c;
margin-bottom: 0;
}
/* Footer */
.footer {
margin-top: 50px;
padding-top: 20px;
border-top: 2px solid #bdc3c7;
}
.footer p {
font-size: 0.9rem;
color: #7f8c8d;
font-style: italic;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<h1 class="main-title">Exemples de Typographie CSS</h1>
<div class="section">
<h2 class="section-title">Font-Weight (Graisse de Police)</h2>
<p class="light-text">Texte léger (font-weight: 300)</p>
<p class="normal-text">Texte normal (font-weight: 400)</p>
<p class="bold-text">Texte gras (font-weight: 700)</p>
<p class="bolder-text">Texte très gras (font-weight: 900)</p>
</div>
<div class="section">
<h2 class="section-title">Font-Style</h2>
<p class="normal-style">Texte normal (font-style: normal)</p>
<p class="italic-style">Texte en italique (font-style: italic)</p>
</div>
<div class="section">
<h2 class="section-title">Text-Transform</h2>
<p class="uppercase-text">texte en majuscules (text-transform: uppercase)</p>
<p class="lowercase-text">TEXTE EN MINUSCULES (text-transform: lowercase)</p>
<p class="capitalize-text">chaque mot commence par une majuscule (text-transform: capitalize)</p>
</div>
<div class="section">
<h2 class="section-title">Text-Decoration</h2>
<p class="underline-text">Texte souligné (text-decoration: underline)</p>
<p class="overline-text">Texte avec ligne au-dessus (text-decoration: overline)</p>
<p class="linethrough-text">Texte barré (text-decoration: line-through)</p>
<p class="no-decoration">
<a href="#">Lien sans soulignement (text-decoration: none)</a>
</p>
</div>
<div class="section">
<h2 class="section-title">Letter-Spacing (Espacement des Lettres)</h2>
<p class="tight-spacing">Espacement serré (letter-spacing: -1px)</p>
<p class="normal-spacing">Espacement normal (letter-spacing: 0)</p>
<p class="wide-spacing">Espacement large (letter-spacing: 3px)</p>
<p class="wider-spacing">Espacement très large (letter-spacing: 8px)</p>
</div>
<div class="section">
<h2 class="section-title">Line-Height (Hauteur de Ligne)</h2>
<p class="compact-lines">
Interligne compact (line-height: 1.2). Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p class="normal-lines">
Interligne normal (line-height: 1.5). Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p class="spacious-lines">
Interligne spacieux (line-height: 2.5). Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
<div class="section combined-example">
<h2 class="section-title">Combinaison de Propriétés</h2>
<p class="fancy-text">
Ce texte combine plusieurs propriétés pour créer un style unique
</p>
<p class="signature-text">Signature élégante</p>
<p class="code-style">function helloWorld() { return "Hello"; }</p>
</div>
<div class="footer">
<p>Exemples créés pour démontrer les propriétés CSS textuelles</p>
</div>
</div>
</body>
</html>