====== Activité CSS N° 1 ====== Le **HTML** n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une **mauvaise pratique**). Le HTML s'occupe uniquement du **contenu** et de la **sémantique** c'est à dire du sens de chaque élément grâce à différentes balises. Tout ce qui concerne la mise en page et l'aspect **design** c'est à dire le **style** de la page se réalise avec le **CSS** (Cascading Style Sheets). ===== Accéder au site Trinket.io ===== Tu vas compléter la page **index.html** ainsi que le fichier **style.css** (clique sur l'onglet style.css) de l'exemple suivant à partir du site **Trinket.io** : ===== 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 rôle 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;
}

* visualise le résultat de la page pour comprendre : * ce que fait l'**attribut CSS text-align** et sur quel élément HTML il s'applique, * ce que fait l'attribut **CSS color** et sur quel élément HTML il s'applique. 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.

* Rajoute à la fin du fichier style.css les lignes suivantes :


#para_1
{
font-style: italic;
color: green;
}

* Quelles modifications observes-tu ? 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 dans le fichier style.css en ajoutant les lignes suivantes :**


.para_2
{
  font-style: italic;
  color: blue;
}

==== Question 4 ==== * **Modifie** le contenu du **fichier index.html** et du fichier **style.css** pour avoir le résultat suivant : Voici ce que tu dois **visualiser** : {{ :isn:trinket_04.png |}} ===== 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 ... ==== * [[isn:langageweb|Les langages pour créer des sites Web]]