Le Tutoriel de HTML Styles

HTML Styles
Inline Style
CSS Class
Fichier CSS

1. HTML Styles

L'histoire des HTML Styles a commencé en 1994, lorsque les website ont commencé à être utilisés comme plate-forme pour la publication électronique. Les gens ont eu du mal à créer un site Web dont la mise en page et le style ressemblent à ceux des journaux imprimés traditionnels. Cela a entraîné une demande pour le "langage exprimé par feuille de style" (style sheet language), puis le CSS (Cascading Style Sheets) a été inventé.

CSS est un sujet intéressant et a beaucoup de choses à nous dire, il vaut donc mieux l'introduire en détail dans un article séparé, qui inclut l'histoire et les avantages du CSS. Ce serait génial de lire mon article sur le CSS dans le lien ci-dessous :
Lich su cua CSS

Fondamentalement, CSS définit les styles qui peuvent être appliqués aux éléments HTML, tels que les règles, les couleurs, les polices, etc.

Dans cet article, je vais vous montrer comment utiliser les Styles en HTML ainsi que quelques propriétés (property) CSSde base. Nous avons un sujet séparé sur les CSS et vous pouvez aussi apprendre plus spécifiquement ici.

Tutoriels CSS

2. Inline Style

La façon la plus simple d'appliquer un style à un élément est d'utiliser l'attribut (attribute) style.

<tagname style="property1:value1; property2: value2">

Par exemple :

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue; font-weight:bold">I am blue and bold</p>

<p style="font-size:35px; font-style:italic">I am big and italic</p>

color, font-size, font-style, font-weight sont des propriétés (property) de CSS. Chaque propriété CSS spécifie un aspect de style pour l'élément.

OK, nous allons nous familiariser avec quelques propriétés (property) CSS courantes en suivant les exemples ci-dessous :

CSS background-color

La propriété (property) CSS background-color est utilisée pour spécifier une couleur d'arrière-plan pour l'élément, qui fonctionne également pour les enfants de l'élément courant.

background-color-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Style</title>
    <meta charset="UTF-8"/>
</head>
<body style="background-color: AliceBlue;">
     <h1>CSS background-color</h1>

     <p style="background-color:yellow">My Background Color is yellow!</p>
</body>
</html>

CSS color

La propriété (property) CSS color est utilisée pour spécifier une couleur de texte (text color) pour un élément, qui fonctionne également pour les enfants de l'élément courant.

<p style="color:red;">I am red</p>

CSS font-family

La propriété (property) CSS font-family permet de définir la police d'un élément, qui fonctionne également pour les enfants de l'élément courant.

font-family-example.html

<h1>CSS font-family</h1>
<hr/>
<div style="font-family: 'Comic Sans MS';">
  <h3>This is a Heading h3</h3>
  <p>This is a Paragraph</p>
</div>
<hr/>
<p style="font-family: Arial;">
  This is a Paragraph
</p>

CSS font-size

La propriété (property) CSS font-size est utilisée pour spécifier une taille de police pour l'élément, elle fonctionne également pour les enfants de l'élément courant.

font-size-example.html

<p>
    This is a Paragraph (Default font-size)
</p> 
<p style="font-size: 150%">
    This is a Paragraph (font-size: 150%)
</p>
<p style="font-size: 35px">
    This is a Paragraph (font-size: 35px)
</p>

CSS text-align

La propriété (property) CSS text-align permet de spécifier l'alignement horizontal du texte (horizontal text alignment). Il a 3 valeurs : left, center, right.

text-align-example.html

<p style="background-color:AliceBlue;text-align:left;">
    This is a Paragraph (text-align:left;)
</p>
<p style="background-color:AliceBlue;text-align:center;">
    This is a Paragraph (text-align:center)
</p>
<p style="background-color:AliceBlue;text-align:right;">
    This is a Paragraph (text-align:right)
</p>

3. CSS Class

CSS vous permet de créer une classe (class), un groupe de propriétés (property). Vous pouvez appliquer cette classe à un ou plusieurs éléments. Les classes sont définies dans une étiquette d'ouverture <style> et une balise de fermeture </style>.

L'étiquette <style> peut être mis n'importe où dans le document HTML, mais il est recommandé de le placer dans l'étiquette <head>.

Par exemple, définissons une classe nommée "app-note" dans les balises <style></style>. Note : Un point (.) doit toujours être placé juste devant le nom de la classe.

<style>
    .app-note  {
        font-size:90%;
        font-style: italic;
        color: red;
    }
</style>

Puis, vous pouvez appliquer cette classe aux éléments HTML comme suit :

<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>

Voir le code complet de l'exemple ici.

css-class-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Class</title>
    <meta charset="UTF-8"/>
    <style>
        .app-note  {
            font-size:90%;
            font-style: italic;
            color: red;
        }
    </style>
</head>
<body>
<h3>CSS Class</h3>
<hr/>
<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>
</body>
</html>

Pour un autre exemple, définissons un groupe de propriétés (property) qui s'appliquent à une étiquette spécifique.

<style>
    div  {
        font-size:120%;
        color: CadetBlue;
    }
    code {
       font-weight: bold;
       font-style: italic;
       background-color: yellow;
       color: blue;
    }
</style>

<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>

Xem code đầy đủ của ví dụ trên:

styles-for-tag-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Styles for a Tag</title>
    <meta charset="UTF-8"/>
    <style>
        div  {
            font-size:120%;
            color: CadetBlue;
        }
        code {
           font-weight: bold;
           font-style: italic;
           background-color: yellow;
           color: blue;
        }
    </style>
</head>
<body>
<h3>Styles for a Tag</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
</body>
</html>

4. Fichier CSS

Vous écrivez encore et encore des style dans un fichier CSS séparé, ce qui rend le fichier utilisable par de nombreux documents HTML différents.

Par exemple, j'ai créé un fichier nommé main.css :

main.css

div  {
    font-size:120%;
    color: CadetBlue;
}

code {
   font-weight: bold;
   font-style: italic;
   background-color: yellow;
   color: blue;
}

.app-note  {
    font-size:90%;
    font-style: italic;
}

et déclaré utiliser le fichier CSS susmentionné dans le document HTML :

using-css-file-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Using CSS File</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
<h3>Using CSS File</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
<br/> <br/>
<div class="app-note">
    This is a DIV with class 'app-note'
</div>
</body>
</html>