====== Activité CSS N°2 : le formatage du texte ======
Le langage **CSS**(Cascading Style Sheets) va de permettre de personnaliser ta page Web notamment pour modifier la taille du texte, changer la police, aligner le texte, etc.…ue nous venons d'apprendre dans le chapitre précédent. Nous allons donc travailler directement au sein du fichier.cssque nous avons créé.
===== J'accède au Game Lab du site Code.org =====
* je me rends sur le site avec le lien http://studio.code.org/sections/KVGXNR
* je choisis mon **prénom** puis je saisis les** mots secrets** donnés par l'enseignant
{{ :icn:gamelab:code.org_01_2017.png?nolink |}}
===== La taille =====
Pour modifier la taille du texte, on utilise la propriété CSS **font-size** en indiquant la valeur que l'on veut:
* diquer une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque d'indiquer une taille trop petite pour certains lecteurs.
Indiquer une taille relative : en pourcentage, « em » ou « ex », cette technique a l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de taille des visiteurs.
Une taille absolue
Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
font-size: 16px;
Les lettres auront une taille de 16 pixels, comme le montre la figure suivante.
===== Le fichier CSS style.css =====
Il est conseillé de **définir** les styles CSS dans un **fichier séparé** de la page HTML. Il faudra seulement indiquer à la page HTML quel fichier de style utiliser. C'est le role de la balise **** située dans **l'entête ** de la page **index.html**.
* **Modifie et complète** le contenu du **fichier style.css** avec ce code suivant :
h1
{
text-align: center;
background-color: red;
}
h2
{
font-family: Verdana;
font-style: italic;
color: green;
}
Voici ce que tu dois obtenir et **visualiser** :
{{ :icn:2nde:web:weblab_08.png?nolink |}}
**Observe** ce qui tout à droite et qui représente le résultat de ta page Web.
* que fait l'**attribut CSS text-align** ? Sur quel élément HTML s'applique-t-il ?
* que fait l'attribut **CSS color** ? Sur quel élément HTML s'applique-t-il ?
La langage **HTML** tout est un langage à balise avec :
* des balises que l'on **ouvre**. Une balise ouvrante est de la forme **<**nom_de_la_balise>.
* et des balises que l'on **ferme**. Une balise fermante est de la forme ****.
===== l'attribut CSS id =====
* Modifie le fichier index.html de la manière suivante :
Voici mon premier paragraphe.
* Complète le fichier style.css de la manière suivante :
#para_1
{
font-style: italic;
color: green;
}
* Qu'est-ce qui **s'affiche** dans la fenêtre ? Que remarques-tu ?
{{ :icn:2nde:web:weblab_09.png?nolink |}}
Il est possible de **cibler** un paragraphe et pas un autre en utilisant **l'id** du paragraphe pour que le style défini ne s'applique qu'à lui.
En CSS **l'id** dans la page HTML se traduisant par le signe # dans le fichier CSS.
Il est aussi possible d'utiliser l'attribut **class** à la place de l'id. Dans le style pourra s'utiliser sur **plusieurs éléments HTML**. Dans le fichier CSS, tu utiliseras le point . à la place du #.
**Ce qui donnerait dans le fichier index.html :**
Voici mon premier paragraphe.
Voici mon deuxième paragraphe.
**Et dasn le fichier style.css :**
.para_1
{
font-style: italic;
color: blue;
}
{{ :icn:2nde:web:weblab_10.png?nolink |}}
===== Les balises de base du CSS =====
Voici un lien parmi d'autres pour découvrir les balises de base du CSS :
* https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css
==== Activité Les langages pour créer des sites Web ... ====
[[icn:2nde:web:accueil|Je reviens à l'activité sur les langages pour créer des sites Web]]