Cascading Style Sheets (C.S.S.)

Présentation

Avec le HTML on écrit le contenu d'une page web, si maintenant on veut le mettre en forme (style et taille des caractères, marges, couleurs,transition entre page,...) on utilise en un autre langage, le CSS.

Il existe (au moins) trois façons de placer son code CSS :

Un petit échantillon des propriétés de CSS.

En CSS on peut régler beaucoup de choses, de nature de la fonte, sa taille, sa couleur, la couleur du fond, la hauteur des séparations mettre le texte en colonne, faire des effets d'ombre,... vous voyez bien la différence entre ce site et les autres sites alors qu'au niveau HTML c'est la même chose.

Encore une fois, la meilleure chose à faire est de passer par un bon moteur de recherche pour trouver les propriétés et les effets que vous souhaitez. N'oubliez pas non plus les bon vieux livres, pour apprendre il n'y a pas mieux !

Nous allons évoquer deux ou trois propriétés seulement :

propriétéExemple de valeursdescription
color#AE0A15 ou rgb(120,52,60) ou 'red'Couleur du texte
background-color#AE0A15 ou rgb(120,52,60) ou 'red'Couleur du fond
font-family serif ou sans-serif ou Times Choix de la police
font-size50px ou 3emTaille des caraxctères
Exemple 

	

	
Puis la page html suivante :

	

	

	

	
On obtient le résultat suivant :

	
	

	
Remarque
	
	

	
Comme indiqué précédemment le CSS est très puissant, par exemple suivez le lien suivant  pour voir le même exemple que celui mais avec un style différent. Comme vous voyez il vaut mieux être sobre.

	

		
Les images

	
Nous allons dans cette partie, montrer comment utiliser le CSS pour gérer les images ! Vous pouvez télécharger la page HTML

	
	

	
Vidéos

	

		
Introduction

			
		
Heritage

			
		
Caracteres - Couleur de fond

			
		
Les tableaux

			
		
alignement - image de fond

			
Pour encadrer une image par du texte il faut que l'image soit placée au dessus du texte, dans la vidéo suivante la place de l'image a été changé en conséquence.

			

		Fichier HTML utilisé en exemple.

		Image.
	


	
	
Exercices

	
Exercice
	
On considère la feuille HTML suivante :

	image du résultat
	
Faire un clique sur l'image pour accéder à la page.
	
	
    
	
  1. Compléter l'arbre descriptif de la page. On placera le premier mot et la balise (quand c'est possible).
    
	arbre décriptif de la page
	
  2. 
	
  3. Créer une page HTML via un éditeur, sans style, pour avoir une page identique à la page précédente.
    4. 
	
    On veut changer le style, pour obtenir la page suivante :
    
	image du résultat
	
    Faire un clique sur l'image pour accéder à la page.
    
	
  4. Créer un fichier CSS.
    5. 
	
  5. La couleur du fond est couleur crème, il faut appliquer background-color à quelle balise. Compléter la feuille CSS.
    6. 
	
  6. Quelle style est appliquée au titre, compléter la page CSS.
    7. 
	
  7. Chercher sur internet comment faire pour modifier le style des puces des balises li pour avoir des nombres romains. Compléter la feuille CSS.
    8. 
	
  8. Changer le style pour que HTML et CSS soient rouge.
    9. 
	
  9. On veut maintenant appliquer un dégradé de couleur au fond comme ici, aller sur internet voir comment faire (allez voir aussi background-attachment et background-repeat).
    10. 
	
  10. Vous remarquez que dans la dernière page les pages "strong" deviennent gros quand on passe la souris, le faire !
    11. 
	

	

	
Exercice
	
On considère la page suivante :

	
	
Dont le code HTML est ci dessous :

	
	

	
Compléter le code css suivant pour obtenir la page précédente :

	
	

	
L'image du chat.