CSS, ou feuilles de style en cascade, est un langage de conception utilisé par les développeurs Web pour créer un aspect uniforme et agréable sur plusieurs pages d'un site Web. Le langage HTML détermine en grande partie le contenu textuel, mais le langage CSS détermine la structure visuelle, la disposition et l'esthétique du site Web.

La personnalisation CSS n'est recommandée que si vous avez une connaissance approfondie de CSS. Le support client ne pourra pas vous aider lorsque vous implémenterez votre propre code dans Brandguide.

Le code sera désinfecté afin de prévenir les attaques XSS. Sachez que nos développeurs peuvent apporter des modifications à notre code Brandguide à tout moment qui pourraient avoir un impact sur votre CSS et HTML.

syntaxe CSS

La syntaxe CSS se compose d'un ensemble de règles. Ces règles comportent 3 parties : un sélecteur, une propriété et une valeur. 

Sélecteur { propriété : valeur ; }

Le sélecteur représente l'élément HTML que vous souhaitez mettre en forme. La propriété fait référence à un aspect spécifique de l'élément HTML, tel que la couleur, la famille de polices ou la marge. Chaque propriété utilisée dans CSS a un ensemble de valeurs acceptées, par exemple, un code hexadécimal ou une valeur de pixel.

Le sélecteur peut avoir plusieurs propriétés et paires de valeurs séparées par des points-virgules. Par exemple, les valeurs suivantes s'appliqueront à toutes les balises h1 :

h1 { font-family : comic sans ; taille de police : 12px ; couleur : bleu ; }

Sélecteurs CSS courants

sélecteur de type CSS

Le sélecteur de type CSS sélectionne tous les éléments d'un type spécifique dans la page Web.

Voici quelques exemples de sélecteurs de type courants :

• p : sélectionne toutes les balises de paragraphe.
• a : Sélectionne tous les liens hypertexte.
• h1 : sélectionne toutes les balises d'en-tête h1.
• span : sélectionne toutes les balises span.
• body : Sélectionne tous les éléments dans le corps de la page web.
• bouton : sélectionne tous les boutons de la page Web.
• li : sélectionne tous les éléments de la liste.

Sélecteur de classe CSS

Une classe CSS est un attribut utilisé pour définir un groupe d'éléments HTML. Cela permet de personnaliser plusieurs éléments à l'aide d'un seul sélecteur. Pour ce faire, tapez un point (.) devant le nom de la classe dans notre CSS. Par exemple, pour modifier la police de l'exemple d'en-tête et du paragraphe ci-dessous :

en-tête 
paragraphe

Nous utiliserions le CSS suivant pour cibler tous les éléments avec une classe d'i-am-a-class :

.i-am-a-class { famille de polices : helvetica ; }

Sélecteur d'ID CSS

Un ID CSS est un attribut utilisé pour définir un seul élément unique sur une page Web. Pour sélectionner un élément avec un ID spécifique, tapez un symbole de hachage (#) devant l'ID. Par exemple, pour modifier la police du paragraphe ci-dessous :

paragraphe

Nous utiliserions le CSS suivant pour cibler uniquement l'élément avec un id de i-am-an-id :

#i-am-an-id { famille de polices : helvetica ; }

propriétés CSS

Propriétés du texte

• famille de polices : Définit la police de texte, p. ex. « Arial » ou « Times »
• taille de police : Définit la taille de la police, p. ex. 5px ou 1em
• poids de la police : Définit le poids de la police ou la « audace », p. ex. « bold » ou 200
• couleur : Définit la couleur du texte, p. ex. bleu, #add8e6 ou rvb(135,206,250)
• hauteur de ligne : Espace vertical entre les lignes, p. ex. 5px ou 1em
• espacement des lettres : Espace entre les caractères, p. ex. 5px ou 1em
• espacement des mots : Espace entre les mots, p. ex. 5px ou 1em

Propriétés d'arrière-plan

• couleur de fond : Définissez la couleur d'arrière-plan de l'élément, par ex. bleu, #add8e6 ou rvb(135,206,250)
• image de fond : Définit une image d'arrière-plan basée sur l'URL, p. ex. url('exemple-image.jpg')
• position arrière-plan : Définit la position de départ d'une image d'arrière-plan, par ex. centre ou 50 %

Propriétés d'espacement

Les propriétés suivantes acceptent auto, inherit, % ou toute unité de longueur CSS 

• hauteur : Définit la hauteur de l'élément 
• largeur : Définit la largeur de l'élément 
• rembourrage : Définit la marge intérieure de l'élément
• marge : Définit l'espace de marge de l'élément 

Longueurs et unités

• px : Pixels (1px = 1/96e de 1 pouce)
• em : Par rapport à la taille de police de l'élément (3em = 3 fois la taille de la police actuelle)
• vw : Par rapport à 1 % de la largeur de la clôture
• vh :  Par rapport à 1 % de la hauteur de la clôture
• % : Par rapport à l'élément parent

Recherche d'éléments à l'aide de DevTools chromés

Chrome DevTools est un ensemble d'outils de développement Web intégrés directement dans le navigateur Google Chrome. Nous pouvons utiliser ces outils pour localiser rapidement les éléments HTML et les styles CSS existants sur n'importe quel site Web. 

1. Pour accéder à DevTools, vous pouvez cliquer avec le bouton droit de la souris sur la page et sélectionner Inspecter ou utilisez des commandes courtes telles que Commande+Option+C (Mac) ou Contrôle+Maj+C (Windows, Linux, Chrome OS).

2. Une fois le panneau Outils de développement ouvert, sélectionnez l'outil Inspecter en haut de la page.

3. Vous pouvez ensuite cliquer sur l'élément de la page que vous souhaitez mettre en forme. Les sélecteurs qui peuvent être utilisés pour personnaliser cet élément seront mis en surbrillance sous l'onglet Eléments. L'onglet Styles ci-dessous affiche les règles de style CSS actuellement appliquées à cet élément.

4. Dans cet exemple, nous allons changer la couleur du lien de navigation en #6b646b en utilisant la classe nav-link que nous avons trouvée en utilisant l'inspecteur DevTools. Nous ajouterons également la propriété «!important » à la fin de la déclaration pour remplacer tous les styles précédents de cette propriété sur l'élément.

5. Une fois que le CSS a été mis à jour et que les modifications ont été enregistrées, vous verrez que la couleur du texte de navigation a changé à #6b646b :

Ajout de polices tierces

@font-face est une règle CSS qui vous permet d'importer et d'utiliser des polices tierces sur votre Brandguide. Nous vous recommandons d'ajouter votre police via CSS au niveau de paramètre global (par opposition au niveau de bloc).

Vous pouvez ajouter une police tierce de deux façons.

Copie et collage d'une URL

La première option consiste à accéder à la bibliothèque de polices de votre choix, à sélectionner la police que vous souhaitez ajouter à votre Brandguide et à copier-coller l'URL. Ce processus est décrit ci-dessous. 

Syntaxe :

Vous pouvez copier la syntaxe ci-dessous et l'ajouter à la section CSS personnalisée de votre Brandguide. C'est la seule CSS dont vous aurez besoin pour importer la police. Pour importer une police différente, il vous suffit de modifier la famille de polices, l'URL source et le format de la police choisie.

@font-face { famille de polices : 'Satisfy'; src : format url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2)('woff2'); }

Recherche de l'URL et du format de la police :

1. Accédez à la bibliothèque de polices de votre choix et sélectionnez la police à ajouter à votre Brandguide. Dans notre cas, nous choisirons Satisfaire de Google Fonts.

2. Une fois sélectionnée, copiez et collez l'URL @import dans un nouvel onglet du navigateur. 

3. Vous accédez ainsi à une page contenant l'URL et le format nécessaires à l'importation de la police dans votre Brandguide.

4. Copiez l'URL src et collez-la dans le code @fontface et la famille de polices. Collez ensuite le code dans la zone CSS. Vos modifications seront automatiquement mises à jour. 

5. Sélectionner Mettre à jour CSS pour enregistrer vos modifications. 

6. La police nouvellement importée sera remplie dans la liste déroulante Police par défaut de l'icône déroulante Paramètres globaux. 

Conversion de la police au format WOFF ou WOFF2

La deuxième option de police personnalisée consiste à convertir la police au format woff ou woff2. Ce format de police Web est plus compatible pour les navigateurs que les formats de fichier texte ttf/otf. Ce processus est décrit ci-dessous.  

Polices propriétaires 

1. Convertir la police en format woff ou woff2. Ce format de police Web est plus compatible pour les navigateurs que les formats de fichier texte ttf/otf. 

2. Téléchargez la police dans une section de fichiers dans Brandfolder. 

3. Ouvrez l'actif, accédez à l'onglet Incorporer et sélectionnez Copier le lien. 

4. Accédez à l'icône déroulante Paramètres globaux. Vous pouvez copier la syntaxe ci-dessous et l'ajouter à la section CSS de l'icône déroulante Paramètres globaux. C'est la seule CSS dont vous aurez besoin pour importer la police. Pour importer une police différente, il vous suffit de modifier la famille de polices, l'URL source et le format de la police choisie. Une fois la syntaxe entrée, vos modifications seront enregistrées.  

@font-face { famille de polices : 'boldweb'; src : url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff'); }

5. Les polices importées de cette façon n'afficheront pas la police dans la liste déroulante Police par défaut. Vous devez plutôt appliquer manuellement la police dans la section CSS. Vous trouverez ci-dessous un exemple d'application de la police Bold Web aux balises de paragraphe importées. 

p { famille de polices : 'boldweb'; couleur : #333 ; }

Ajout d'une vidéo 

Pour ajouter une vidéo à votre Brandguide, procédez comme suit : 

1. Ouvrez le mode de l'élément pour la vidéo.
2. Accédez au Onglet Incorporer. 
3. Localisez le code d'intégration vidéo, puis sélectionnez Copier le lien. 
4. Collez le code dans le bloc HTML.