Pourquoi le css?

Généralement, un site web comporte plusieurs pages au format  html. Chacune des pages définit la disposition du contenu à publier. Dans une page, on doit distinguer, en effet, les titres, les paragraphes,  les énumérations, les tableaux, les liens hypertextes ..etc. Ce sont les balises html qui permettent la mise en oeuvre de cette disposition du contenu de la page web.

Mais, pour la mise en forme de ces éléments (par exemple: titres en gras, tableaux avec bordure, énumérations colorées, liens repérés avec une couleur de fond  etc..), elle  peut être définie, ailleurs, dans un autre fichier de styles css dédié.

Faites attention à la différence entre les termes "disposition" et "mise en forme". La "disposition" des éléments de votre page web est définie par la succession de vos balises html dans la page et leurs imbrications, tandis que "mise en forme" est définie par vos styles css.

Pour l’ensemble des pages web de votre site, on peut créer un seul fichier css pour définir les propriètés des éléments de ces pages. Par  exemple, dans le fichier css ainsi créé, on spécifie la couleur des titres, la taille de police des paragraphes,  le type de police pour les énumérations, la couleur des liens hypertextes survolés ou cliqués, la couleur de fond pour les tableaux…etc

Il est également possible de définir les styles css au niveau de la page web elle même. Examinez l'utilisation de cette méthode à la page suivante avec l'exemple simple sur la création de cadres avec des coins arrondis moyennant des blocs div emboîtés.

Simple css

Dans votre fichier css, vous aurez, par exemple, le code générique suivant:

balise {

propriete: valeur
propriete: valeur

}

Pour une balise <a> (lien hypertexte) pour laquelle on souhaite un texte de couleur jaune, sur fond bleu, le code css correspondant sera le suivant:

a {

color: yellow;
background-color: blue;

}

Si vous souhaitez appliquer ce même style aux paragraphes du bloc <div class=MaClasse> et aux cellules du  tableau <Table id=Entete>, le code css deviendra :

a, div.MaClasse p, table#Entete td {

color: yellow;
background-color: blue;

}

Explications:

a, div, p, table et td relatifs à des balises dans le code html sont dits des sélecteurs de type.

La virgule ","  c'est pour séparer des éléments auxquelles on va appliquer le même style.

Le point "." dans div.MaClasse signifie qu'il s'agit d'un sélecteur de classe .

Le dièze "#" dans table#Entete veut dire qu'il s'agit d'un sélecteur d'identifiant id.

L'espace entre div.MaClasse et p signifie qu'il s'agit d'un lien de parenté (<p> à l'intérieur de <div> de classe MaClasse)

Idem pour l'espace entre table#Entete et td: signifie que le style s'applique aux  cellules <td> à l'intérieur de <Table> identifiée par id=Entete. 

En bref :

« Le langage informatique css ("Cascading Style Sheets" traduit en "feuilles de style en cascade") sert à décrire la présentation des documents html…. » Définition wikipédia. 

Pour un exemple simple css de A à Z, consultez la page suivante  traitant un cas très pratique sur la réalisation de bloc avec des coins arrondis moyennant une disposition de blocs div emboités.

Des difficultés peuvent êtres rencontrées lors de la mise en oeuvre de certaines dispositions des blocs div. Les articles sur le positionnement div vous donnent des solutions à ces problèmes en montrant l'utilisation correcte de quelques propriètés css (float et margin).

Tous ces articles, bien choisis, vous seront utiles lors de la conception du design de votre site web avec le puissant cms joomla.