1NSI THEME ‘WEB’
SEQUENCE 2 : CSS
Le cours suivant sur le langage CSS de l'anglais Cascading Style Sheets
va vous aider à compléter le site HTML que vous avez commencé lors de
la séquence précédente « HTML ».
QU’EST CE QUE LE CSS ?
Les feuilles de style en cascade, généralement appelées CSS de l'anglais
Cascading Style Sheets, forment un langage informatique qui décrit la
présentation (le design) des documents HTML et XML. Les standards
définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans
la conception de sites web et bien pris en charge par les navigateurs web
dans les années 2000.
Le langage HTML comme nous l'avons vu sert à implémenter le contenu
de façon structuré. Le CSS lui va permettre de rendre tout cela agréable à
lire et à consulter, ce langage va nous permettre de gérer la mise en forme.
Les possibilités sont infinies. Les pièges sont nombreux (trop chargés ,
illisible en changeant de support, etc..), on parle de responsiv design.
Remarque : Des Framework CSS tout fait comme Bootsrap permettent
l'obtention de site de bonne qualité relativement facilement.
ENVIRONNEMENT DE
TRAVAIL.
Avec le site ‘[Link]’
Tapez du code html dans la fenêtre « HTML » du site de développement,
avec une balise p, une balise h1, une balise h2, une balise h3.
Tapez ensuite le code css suivant dans la fenêtre « CSS »
h2 {
text-align: center;
background-color: red;
}
h3 {
font-family: Verdana;
font-style: italic;
color: green;
}
Vous pouvez ajouter des attributs ‘souligné’, ‘gras’, ‘bordure’, etc … faites
des recherches sur les sites de la Sitographie (de ce cours et du cours
précédent).
Avec les environnements Notepad++ ou
VisualStudio
Dans un premier temps, vous aller créer l’arborescence comme suit à l’aide
de l’explorateur de votre système d’exploitation, dans un dossier ‘Mon
1ersite’
Mon1erSite
Dans un second temps créer un fichier ‘[Link]’ dans le dossier père
‘Mon1erSite’, puis un fichier [Link] le dossier css
Dans le < head> de votre [Link] écrire la ligne de code suivante :
<link rel="stylesheet" href="css/[Link]" >
Ainsi vous créez un lien entre le fichier HTML et le fichier CSS.
Tout est prêt pour commerncer à styliser votre site.
[Link]
Un premier exemple
Ecrire dans votre fichier html au moins un titre h2 et un titre h3 puis écrire le code
CSS suivant :
h2 {
text-align: center;
background-color: red;
}
h3 {
font-family: Verdana;
font-style: italic;
color: green;
}
1. Observer les changements
2. Modifier le CSS en ajoutant au moins un attribut
Les selecteurs "simples"
Le CSS va pouvoir appliquer des styles à du contenu écrit en HTML grâce
à des sélecteurs qui vont cibler un contenu particulier.
Nous n’avons vu que des sélecteurs CSS de type élément, c’est-à-dire des
sélecteurs qui ciblent un élément en se basant sur le nom de l’élément.
Par exemple, le sélecteur p va cibler tous les éléments p (c’est-à-dire tous
les paragraphes) d’une page HTML.
De même, le sélecteur CSS h1 va nous permettre d’appliquer des styles à
notre titre h1 ; le sélecteur a va nous permettre de mettre en forme nos
liens, etc.
Les selecteurs id et class
Les sélecteurs #id et .class vont nous permettre de cibler un élément en
particulier plutôt qu’un type d’élément.
Nous allons tout simplement écrire nos attributs id et / ou class à l’intérieur
de la balise ouvrante d’un élément HTML et leur attribuer une valeur.
Nous allons ensuite cibler cet élément en CSS en réutilisant cette même
valeur.
Les valeurs indiquées pour les attributs id et class ne doivent contenir ni
caractères spéciaux ni espaces et commencer par une lettre.
Ecrire ce code dans un fichier html et le second en CSS
Observer les modifications.
Comme vous pouvez le voir ci-dessus, un attribut id a été lié au premier
paragraphe et un attribut class au deuxième paragraphe.
En effet, pour cibler un élément possédant un attribut id, en CSS, il faudra
préciser la valeur de l’attribut précédée d’un dièse #.
Pour cibler un élément possédant un attribut class, en revanche, il faudra
en CSS préciser la valeur de l’attribut précédée d’un point .
Ainsi, on peut tout à fait donner la même valeur à un attribut class et id : il
n’y a aucun risque de confusion en CSS si vous faites bien attention à bien
faire précéder la valeur par le dièse ou le point.
Il existe une différence notable entre les deux attributs class et id : chaque
id doit avoir une valeur unique tandis que plusieurs attributs class peuvent
posséder la même valeur.
En effet, rappelez-vous de nos liens de type ancre. Il s’agit bel et bien du
même attribut id qu’on utilise aujourd’hui, avec des finalités différentes.
Il est donc strictement interdit de donner la même valeur à deux id
différents dans une même page HTML. En revanche, on peut tout à fait
attribuer la même valeur à plusieurs attributs class appartenant à différents
éléments HTML.
Cette particularité de l’attribut class va notamment nous permettre
d’appliquer le même style à différents (types) d’éléments HTML d’un
coup.
Ajouter à votre fichier html un titre de niveau h4 avec une class p1.
Observer.
L’HÉRITAGE EN CSS
L’héritage est une notion centrale et fondamentale en CSS.
La notion d’héritage signifie que tout élément HTML enfant va hériter, « en
cascades », des styles de ses parents.
C’est par ailleurs de là que vient le nom du CSS : Cascading StyleSheets,
ou Feuilles de Style en Cascades.
Par exemple, tous les éléments à l’intérieur de l’élément body sont des
enfants de cet élément. Si l’on applique un style à l’élément body, ses
enfants en hériteront automatiquement.
L'objectif du programme n'est pas faire de vous des spécialistes, si vous
souhaitez approfondir, je vous renvoie à la sitographie, en fin de cours.
TYPE BLOCK ET TYPE INLINE
Un élément de type block va toujours commencer sur une nouvelle ligne et
prendre toute la largeur disponible dans la page.
De plus, un élément de type block peut contenir d’autres éléments de type
block ainsi que des éléments de type inline.
Les éléments HTML de type block les plus communs sont les suivants
p,h1,h2,..., ol, ul, div
Au contraire des éléments de type block, les éléments de type inline ne
vont pas commencer sur une nouvelle ligne mais s’insérer dans la ligne
actuelle.
Les éléments de type inline prennent uniquement la largeur qui leur est
nécessaire (c’est-à-dire la largeur de leur contenu).
Les éléments HTML de type inline les plus communs sont les suivants
strong, em, a, img, span
A VOUS DE JOUER :
Votre projet web (suite)
Il est temps de retourner sur votre cahier de bord, faites les modifications
nécessaires sur votre html pour que votre html fasse référence aux
[Link] dans le repertoire css.
Modifier le [Link] pour personnaliser le style de votre site internet.
N’oubliez pas de commenter vos codes HTML et CSS.
Sitographie
● [Link]