Comment créer des styles d'ID dans des feuilles de style en cascade (CSS) - dummies

Un ID style est une sorte de règle hybride de style de feuille de style en cascade (CSS) qui combine certains éléments des styles de redéfinition de classe et de tag personnalisés. Avec un style d'ID, les déclarations définies dans ce style sont automatiquement appliquées à tout objet sur la page dont l'attribut id correspond au nom d'ID dans le style ID.

Pour styler un objet avec un attribut id, vous devez d'abord créer un sélecteur qui inclut le symbole numérique (#) suivi du nom de l'ID, tel que #sidebar, puis ajouter autant de déclarations au style que vous le souhaitez, comme dans l'exemple suivant:

#sidebar {border: 1px en pointillés # cad0d6; marge: 0px 1px 0px 0px; padding: 10px;}

Après avoir créé votre style dans le CSS, ajoutez l'attribut id et la valeur du nom de style à la balise d'ouverture de l'objet ou autre balise conteneur HTML utilisant le style, comme dans. La balise est un conteneur au niveau du bloc. Généralement, les balises au niveau du bloc contiennent des éléments en ligne et d'autres éléments au niveau du bloc.

Pour illustrer cette idée, supposons que vous ayez une couche sur votre page (en utilisant l'étiquette) qui contient un en-tête qui dit "Popcorn Makers" et en dessous une liste de cinq marques différentes de popcorn fabricants à vendre.

Lorsque vous attribuez à la couche un attribut ID de popcornmakers, en utilisant la syntaxe id = "popcornmakers" et créez un style en utilisant la syntaxe #popcornmakers, ce style d'ID est automatiquement appliqué à la couche.

Voici un exemple de comment ce style d'ID est écrit dans le CSS:

#popcornmakers {font-family: Géorgie, "Times New Roman", Times, serif; couleur de fond: #FFC; bordure: 1px solide # 039; position: absolue; largeur: 330px; hauteur: 180px; indice z: 1; à gauche: 50px; haut: 50px; padding: 10px;}

Et voici à quoi ressemble le balisage HTML:

id = "popcornmakers" >> Machines à maïs soufflé
Machine à popcorn à air chaud Presto

Popcorn Popper classique < Retro Popcorn Maker
Créateur de Popcorn West Bend Housewares
Créateur de Popcorn EasyPop Cuisinart
Tout comme le sélecteur de redéfinition de tag, qui change automatiquement la façon dont le contenu entouré d'un tag apparaît, chaque fois qu'un nom de style utilise le # id syntaxe, la définition de style est automatiquement appliquée à l'objet avec l'attribut id correspondant.