Description d'un élément - FAQ CSS

La marge externe se situe à l'extérieur de la bordure et représente l'espace entre la bordure de l'élément et la bordure des éléments adjacents pour les espaces verticaux et représente l'espace entre la bordure de l'élément et la marge extérieure des éléments adjacents pour les espaces horizontaux. Par défaut, il n'y a pas de marge externe, cependant certain éléments peuvent en avoir comme par exemple la balise P.
Pour appliquer une marge externe, vous devez utiliser les propriétés Css de types margin. Les marges externes peuvent être précisées individuellement.
Sachez que les marges externes verticales fusionnent entre elles, vous trouverez plus de détails sur les marges externes dans le cours qui leurs est réservées.

margin : 5em

Voir des exemples de changement de marges extérieures d'un élément en Css

La marge intérieure correspond à l'espace entre la zone de contenu et la bordure spécifiée par la propriété Css border. Par défaut, il n'y a pas de marge intérieure, cependant certain éléments peuvent en avoir comme par exemple la balise OL.
Cet espace intérieur est spécifié avec la propriété Css padding. Les marges intérieures peuvent être précisées individuellement.
Vous trouverez plus de détails sur les marges intérieures dans le cours qui leurs est réservées.

padding : 5em

Voir des exemples de changement de marges intérieures d'un élément en Css

Les bordures se situent entre les marges intérieures spécifiées par la propriété Css padding et les marges extérieures spécifiées par la propriété Css margin. Par défaut, il n'y a pas de bordure Css.

Pour appliquer une bordure sur un élément, vous devez utiliser les propriétés Css de type border. Les bordures sont au nombre de quatres et peuvent être précisées individuellement.
Une Faq est spécialement dédiée aux bordures Css.

border : 1px solid red

Vous pouvez en feuille de style Css spécifier une hauteur avec la propriété Css height et une longueur avec la propriété Css width pour n'importe quelle balise HTML ou XHTML a condition qu'elle soit de type "block". Il faut savoir aussi que par défaut, l'épaisseur de la bordure et la marge intérieure ne font pas parties de la taille que vous spécifiez. Seule la propriété Css box-sizing permet de modifier l'inclusion ou l'exclusion de l'épaisseur de la bordure et la marge intérieure dans la taille spécifiée.

width : 150px;
height : 20px;

Chaque élément a par défaut un type qui spécifie son "comportement d'affichage". Vous pouvez en feuille de style Css changer ce comportement d'affichage, pour cela vous devez utiliser la propriété Css display. Sachez aussi que display Css permet aussi de cacher un élément.
Voir un exemple de changement de type d'un élément en Css

display : block;
display : inline-block;
display : table;

Lors d'un dépassement de contenu, vous avez plusieurs options qui seront gérées par la propriété Css overflow :

• laisser le contenu dépasser,
• cacher le contenu qui dépasse,
• afficher une barre de défilement ou scrollbarre.

overflow : visible;
overflow : hidden;
overflow : auto;

Chaque élément a son curseur par défaut, par exemple le lien a un curseur de type pointer, le texte a un type text, etc... Cependant, vous pouvez changer le type de curseur affiché, grâce à la propriété Css cursor.

cursor : help;
cursor : pointer;

Voir des exemples changement de curseur en Css

Pour changer les propriétés d'un élément au survol du curseur, vous devez utiliser la pseudo-classes Css :hover.

selecteur:hover{
  /* Propriétés Css */
}

Voir un exemple changement propriété au survol du curseur en Css

Tous les éléments n'acceptent pas le focus, en règle générale seuls les éléments natifs nécessitant des actions l'accepte comme par exemple input, button.
Pour changer les propriétés d'un élément au focus, vous devez utiliser la pseudo-classes Css :focus. Pour les éléments qui n'acceptent pas le focus par défaut, il faut ajouter un attribut tabindex à la valeur 0.
Pour information, si vous mettez l'attribut tabindex à la valeur -1, alors l'élément n'acceptera plus le focus.

selecteur:focus{
  /* Propriétés Css */
}

Voir un exemple changement de propriétés au focus en Css

Toutes les balises qui ne sont pas des éléments remplacés (Ex d'éléments remplacés : img, video, input ou br, ...) ont un enfant "virtuel" en début de contenu et un enfant "virtuel" en début de contenu.
Ces enfants "virtuels" sont ciblés avec le pseudo-élément CSS :before ou :after. Ils acceptent les mêmes propriétés Css qu'un élément normal.
Pour que l'enfant "virtuel" soit actif, le pseudo-élément CSS doit avoir une propriété content déclarée au minimum à vide soit content : ''.

Grâce à la propriété Css content vous pourrez ajouter du texte, une image, insérer une incrémentation, des guillemets ou récupérer la valeur d'un attribut de la balise.