Les feuilles de style ont été conçues pour faciliter les mises à jour de contenu et de forme. En effet, les feuilles de style permettent de contenir la mise en forme et le fichier html le contenu. Ainsi en séparant le contenu de la forme, il devient plus facile de mettre à jour un site. En plus, par exemple, tous les paragraphes, titres... peuvent avoir une même mise en forme grâce à des informations saisies une seule fois.
Exemples : on a pu préciser dans la balise font la taille, la couleur et la police des caractères. Désormais on n'utilisera plus cette balise mais on intégrera la commande style accompagnée des propriétés avec leurs valeurs (ex: color:orange pour que la couleur soit orange). Pour mieux comprendre, regarder le code source de cette page. En effet, le premier pargraphe a été mis en forme avec la balise font et le second en utilisant la commande style. En plus on pourra indiquer toutes les "commandes" des styles répétées dans un fichier extérieur appelé feuille de style dont le nom pourrait être style.css . En modifiant ce fichier, on modifiera la mise en forme de la page correspondante. retour à integration css
Dans une feuille de style, on va préciser la mise en forme que l'on souhaite des informations contenues par certaines balises. Chaque sélecteur précise la balise concernée par les propriétés et valeurs mentionnées.
Le sélécteur? C'est le nom de la balise sans les crochets, sans les signes inférieurs et supérieurs . Ex : body pour le corps de la page, p pour les paragraphes, h1 pour les titres de premier niveau... A noter que la balise html correspond à toute la page, c'est à dire à l'écran pour la personne qui consulte cette page via son navigateur Internet.
La syntaxe? ex : selecteur { propriété:valeur; propriété:valeur; propriété:valeur; ....} et plus concrètement p { font-family: Arial; font-size: 20px; color: #808080; }
Il est possible de définir un ensemble de propriétés pour un même groupe de sélecteur.
Exemple : h1, h2, h3, h4, h5, h6 { font-family: Arial; font-size: 20px; color: #808080; }
D'autres informations sur le css par Alsacréations et notamment des explications sur l'héritage et la parenté des styles
Des explications du siteduzéro
D'un navigateur à l'autre, les propriétés css intégrées sont différentes. Par exemple, avec Internet Explorer, les images ont un cadre bleu. Pour repartir à zéro, nettoyer toutess propriétés intégrées, il peut être nécessaire de faire un reset. Voici un site qui explique tout ça. Le reset sur meyerweb.comreset est controversé, mais c'est pour imposer le même comportement quelquesoit le navigateur (même police, même taille, couleur, hauteur de ligne, bordure de page)