Comment appliquer CSS à une page Squarespace - Conception du site par SoundFocus Belfast

Mise en route avec CSS

ID Collection

Dans les deux exemples, je vous recommande d'utiliser le navigateur Google Chrome. Vous pouvez trouver l'ID Collection dans d'autres navigateurs, mais les instructions ci-dessous ont été personnalisés pour Chrome. Si vous n'avez pas Chrome, vous pouvez le télécharger gratuitement ici.

Extension Chrome

Commençons par la meilleure façon de trouver ID Collection. Il y a une extension gratuite pour le navigateur Chrome appelé la collection Squarespace / bloc d'identification. Ceci est un outil très pratique pour découvrir la collection ID.

Lorsque vous avez téléchargé, vous verrez une icône « B » sur la barre d'outils de votre navigateur.

Notez que l'ID Collection a été collé dans la première, suivie d'une accolade d'ouverture. Puis, après le CSS que vous souhaitez appliquer à cette page, une accolade fermante a été ajouté. Tous les styles dans les accolades affecteront juste cette page.

Enregistrez les modifications et essayez de consulter d'autres pages. La couleur de la police bleue ne doit apparaître sur une page.

Le CSS pour la police bleue est juste un exemple. Vous pouvez le remplacer par tous les styles CSS que vous souhaitez appliquer à la page.

Plus d'une page?

Si vous voulez que votre style à appliquer à plus d'une page, vous pouvez ajouter plusieurs ID de collection, séparés par des virgules comme ceci:

Points à noter

1. La technique ci-dessus fonctionne sur la plupart des types de page, mais il ne fonctionnera pas sur les pages d'index. Ceux-ci fonctionnent différemment, selon le modèle utilisé (voir ci-dessous).

Index Pages

Les pages d'index fonctionnent un peu différemment, mais chaque « page » dans l'index peuvent encore être visés séparément.

modèles plus récents

Les nouveaux modèles sont beaucoup plus faciles à travailler avec. Ils ajoutent une carte d'identité à chaque section ( « page »). L'ID hérite du nom de la page, mais avec des espaces remplacés par des traits d'union, un préfixe « # » (tous les ID de CSS ont un préfixe #) et un suffixe de « -section ».

Ainsi, par exemple, si la page dans l'index que vous souhaitez cibler est appelé « Ma page », puis l'ID de cette page sera # ma page section.

Prenons l'exemple ci-dessus à nouveau. Pour changer la couleur de la police sur la page intitulée « Ma page » dans un index, vous ajouteriez:

anciens modèles

Anciens modèles exigent quelque chose d'un peu plus obscur. Si la page dans l'index est appelé « Ma page », la page aura un data-url-id de « ma page ».

Vous pouvez utiliser ce qui suit pour obtenir la même chose: