Cours d'initiation au CSS

HTML : Hypertext Markup Language

CSS : Cascading Style Sheets

Les attributs

En CSS3, certains éléments (balises) peuvent recevoir plusieurs d'informations, ces information supplémentaire sont appelée attribut

<balise attribut="valeur">

Voici un exemple :

<h2 style="background-color: red; ">Mon petit frère désir faire de l'HTML</h2>
Voici un <a href="https://www.noann.fr">lien</a> vers Noann.fr

Qu'est-ce qu'un style ?

Les styles, eux regroupent différents attributs.On peut donc y faire plusieurs modification de police, de taile, de couleur etc.

Le rôle du CSS est alors de définir ces attributs dans la page HTML à l'aide d'un code séparé (le plus souvent dans une autre feuille).

Par exemple : <h1>.....</h1> qui par défaut possède une taille ou une grasse non modifiable directement par l'HTML, vera alors ces caractéristiques complétement redéfinies grace au CSS.

Quelques propriétés du CSS

Police : taille, couleur, style

Texte : alignement, casse, interlignage, espace entre les mots...

Arrière-plans : couleur, images

Bords et Marges : marges, remplissage, largeur...

Bordure : style, épaisseur, couleur

Interface : puce, indentation, curseur

Positionnement : emplacement exact sur l'écran

Affichage et visibilité : si un élément apparaît et comment.

Structure générale du code

Toutes les règles ont la même structure :

Sélécteur : élément(s) concerné(s) par les propriétés

Propriétés : qui identifient ce qui est défini

Valeurs : données à la propriété

Syntaxe :

selecteur { propriété : valeur;}
h1 { font-size : 11px;}

Ces syntaxes respectent certaines règles

Règles CSS : Les Sélecteurs

Simple : Il est possible de redéfinir les propriétés des balise HTML en CSS

Classes : Il s'agite de règle "librement" choisies qu'on peut appliquer à nimporte quelle balise HTML

Identificateurs : A peu près le même principe que les classes, mais ne peuvent s'appliquer qu'une seules fois dans une page.

Où placer les règles CSS ?

Il y a trois façons d'insérer les règles CSS :

Syntaxe des reègles CSS

La syntaxe en CSS sont très standardisée : Le CSS ne laisse pas de place aux erreurs de syntaxe !

Chaque règle doit contenir un sélécteur et une déclaration. Les prorpiétés de la déclaration doivent être séparées par des points-virgules.

Lorsque une propriété est une unité de mesure et sa baleur, pas d'espace entre les deux.

font-size : 12px; font-family : Verdana, sans-serif;
Redéfinition d'une balise : body {background : #fff; font-family : Verdana, Times, sans-serif;

La Casse dans le CSS

Le CSS n'est pas sensible à la Casse mais par convention, on met tout en miniscule

Le W3C recommande en outre d'écrire les codes hexadécimaux en minuscule également.

Créer une classe personnalisée

Une classe personnalisée va être utilisée ponctuellement dans les pages du site.

Le nom de la classe doit être précédé d'un point, ne doit pas commencer par un chiffre et ne doit contenir ni espace, ni accent, ni carractère de ponctuation, ni tiret.

Exemple : une classe qui met du texte en rouge sur un paragraphe :

.textrouge {color : red;}

Class et Id

"ID" définit un élément de manière unique, alors que "class" peut être utilisé plusieurs fois dans une même page.

"ID" est à privilégier pour les boites à positionner, (deux éléments pas à la même position dans l'interface client).

Il est possible de cumuler "ID" et "Class". L'id est plus fort qque la classe en cas de conflit, ils sont aussi définis avec le signe "#" dièse) alors que les classe sont définis elles par "." (un point).

Cascade, conflits et héritages

Les "ID" l'emporte sur les "class".

Les "Class" l'emportent sur les sélécteurs simple.

La feuille interne l'emporte sur la feuille externe si elle est placée après dans l'ordre du code.

C'est toujours le dernier appelé qui l'emporte.

Exemple :

p {color : red;
p {color : green;}

Ici c'est le vert qui l'emporte. Il écrase la valeur "red" précédemment définie.

Héritage : c'est le mécanisme par lequel les styles s'appliquent à un élément mais aussi à ses descendants.

La hiérarchie est la suivante : HTML -> Body -> autres éléments. HTML est l'ascendant de tout (aussi appelé élément racine).

Body est l'ascendant (le parent) de tout ce que monte le navigateur.

Sauf quelque excéption (comme border) les éléments héritent des propriétés de leur parent

Responsive

Le Responsive Web Disign (RWD) est une approche plus complexe de conception Web qui vise à l'élaboration de site offrant une lecture de navigation optimales pour l'utilisateur quelle que soit la gamme de média. (smartphone, tablette, ordinateur...)

Outils de débeloppement

Un système de gestion de contenu (CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de site web ou d'applications multimédia : Joomla, Wordpress

L'utilisation de Framework est aussi fréquente, ils aide grandement au développement : Bootstrap,...