oujood.com

Introduction où mettre du CSS

Le CSS permet de changer la taille, la position, le style et la couleur des éléments de pages web. Les feuilles de style css ou stylesheet stocke des informations CSS
Le Langage CSS (Cascading Style Sheets ) est le format utilisé pour décrire la présentation de documents HTML.
Le CSS est un langage de présentation, permettant de créer un design sur chaque page du site web. Il permet par exemple de changer la taille, le positionnement, le style et la couleur de chaque élément de vos pages comme les textes, images, etc.….

chercher |

Introduction où mettre du CSS

HTML & CSS

Le langage CSS (Cascading Style Sheets) est utilisé pour définir l'aspect futur de votre site, comme par exemple la couleur du fond de la page ou le type de police.
Plus concrètement, le CSS (ou feuille de style), c'est un petit fichier (exemple « style.css ») dans lequel vous allez définir l'aspect futur de votre site.

Dans ce cours sur le css vous aller apprendre comment colorer et mettre en forme vos textes, décorer une page web, dimensionner une image etc.…. Dans la partie précédente nous avons appris comment créer une page Web C'est vrais qu'elle est toujours moche sans couleur ni format, nous ne pouvons pas centrer les images ou les mettre où l'on veut etc.
Et c'est ce que nous allons faire dans ce cours .

Question : Où mettre le CSS dans une page web ?

On peut écrire le code CSS à 3 endroits différents, selon ce qu'on veut:


1. Dans l'en-tête du fichier HTML



Il est possible de taper du CSS directement à l'intérieur même du code de la page HTML, entre les balises <head> </head>.
Dans ce cas le style ne sera appliqué qu’aux éléments de la page dans laquelle vous avez ajouté le style.
Vous devrez y ajouter la balise <style> </style> à l'intérieur, comme ceci :
Code HTML

Exemple :     📋 Copier le code

<!DOCTYPE html >
<html>
<head>
<title>Exemple le CSS dans le head</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
/* C'est ici que vous taperez votre code CSS */
</style>
</head>
<body>
<p>Cette page comporte du CSS directement dans le header.</p>
</body>
</html>

2. Dans les balises (non recommandée)


On ajoute un attribut style sur les balises pour leur appliquer un style particulier. N'importe quelle balise.
Par exemple sur un titre :

Code HTML

Exemple :     📋 Copier le code

<h1 style="/* Votre style pour cette balise ici */">Titre</h1>

Avec cette méthode non seulement le CSS sera peu lisible à l'intérieur des balises, mais en plus ça ne nous permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un coup. Je vous parle de cette méthode seulement pour en prendre connaissance.

Mais si ce css ne sera appliqué qu’à une seule Balise dans le site, il serait préférable d’utiliser cette méthode.



3. Dans un fichier CSS (la plus recommandé)


Pour appliquer une feuille de style CSS sur une page HTML, vous devez créer une balise <link> dans l'entête de votre code HTML entre <head> et </head> qui va permettre de "dire" au fichier HTML quel fichier CSS il doit charger :
Ouvrez notepad++ ou votre editeur et tapez le code suivant:

Code HTML


Exemple :     📋 Copier le code

<!DOCTYPE html >
<html>
<head>
<title> Utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css"  title="fichier" href="fichier.css" />
</head>
<body>
<p>Cette page comporte une feuille de style externe. C'est la meilleure méthode à utiliser quand on fait du CSS.</p>
</body>
</html>

La balise <link /> comporte plusieurs attributs. Vous pouvez en modifier deux d'entre eux pour le moment :
• title : c'est le nom de votre feuille de style (mettez ce que vous voulez)
• href : c'est l'URL qui indique l'emplacement où se trouve votre feuille de style. Dans cet exemple le CSS se trouve dans le même dossier que notre page html.
Jusqu'ici nous travaillons sur un seul fichier, le .html. A partir de ce moment nous allons travailler sur 2 fichiers : un .css et notre fichier .html.
Dans cette méthode le fichier css peut servir pour toutes les pages html de votre site ce qui allègera la taille des fichiers et rendra donc votre site plus rapide.

Par carabde 10 mars 2014

chapitre précédent     chapitre suivant



Voir aussi nos tutoriel :

fonction substr_count, substr_count

Compte le nombre d'occurrences de segments dans une chaîne

traitement des espaces de noms

Traitement des espaces de noms

fonction htmlentities, htmlentities

Convertit tous les caractères éligibles en entités HTML