Récapitulatif HTMLCode htmlFeuille de styleStyleRemarquesbodybody {}Personnalise le corps de pagePas besoin de « . » devant le mot body dans la feuille de stylepp {}Personnalise les paragraphesPas besoin de « . » devant le « p » dans la feuille de styleaa {}a:hover {}Personnalise les liensPas besoin de « . » devant le « a » dans la feuille de styleh1h1 {}Personnalise les Titres 1Pas besoin de « . » devant le « h » dans la feuille de stylebrPas de stylePas de styleRetour à la ligne simpletabletable {}Personnalise les tableauxPas besoin de « . » devant le « t » dans la feuille de styletrtr {}Personnalise les lignes dans un tableauPas besoin de « . » devant le « t » dans la feuille de styletd…td {}Personnalise les cellules dans un tableauPas besoin de « . » devant le « t » dans la feuille de stylespanspan {}Personnalise une chaine de caractèresPas besoin de « . » devant le « s » dans la feuille de styledivdiv {}Permet de créer des éléments de mise en formeUtilisation de classes (.classes)ou d’id (#nom)ulul {}Personnalise un bloc de liste à pucesUtilisation de classes (.classes)ou d’id (#nom)lili {}Personnalise les items de la liste à pucesUtilisation de classes (.classes)ou d’id (#nom)Les effets de style déclarés entre les {} dans la feuille de style (.css)SyntaxeExempleRemarquescolor : …… ;h1 {color:#000000;}Le titre h1 sera de couleur noiretext-align : center;p { text-align : center;}Le texte dans p sera centrétext-align : left;p { text-align : left;}Le texte dans p sera calé à gauchetext-align : right;p { text-align : right;}Le texte dans p sera calé à droitetext-align : justify;p { text-align : justify;}Le texte dans p sera justifiéfont-size: xx px;p { font-size: 12 px;}Le texte dans p aura une hauteur de 12pxfont-family: ….;p { font-family: verdana;}Le texte dans p aura une font verdanawidth: xx px;.classe {width:250px;}L’élément « classe » fait 250px de largeheight: xx px;.classe {height: 50px;}L’élément « classe » fait 50px de hautfloat:left;.classe {float: left;}L’élément « classe » sera calé à gauchefloat:right;.classe {float: right;}L’élément « classe » sera calé à droiteclear:both;.classe {clear: both;}L’élément « classe » annulera tous les effets float précédentsborder.classe {border: 1px solid #000;}L’élément « classe » aura une bordure solid de 1px de couleur noirepadding.classe {padding:15px;}L’élément « classe » aura une marge intérieure de 15 pxmargin.classe {margin:15px;}L’élément « classe » aura une marge extérieure de 15 pxlist-style.classe {list-style:none}S’applique aux listes à puces, supprime le symbole à gauche du textebackground-color.classe {background-color:#fff;}L’élément « classe » aura une couleur d’arrière plan blanchebackground-image:url().classe {background-image:url(toto.jpeg);}L’élément « classe » aura une image d’arrière plan toto.jpegbackground-repeat.classe {background-image:url(toto.jpeg); background-repeat:no-repeat;}L’élément « classe » aura une image d’arrière plan toto.jpeg non répétéebackground-position.classe {background-image:url(toto.jpeg); background-repeat:no-repeat;Background-position: top center;}L’élément « classe » aura une image d’arrière plan toto.jpeg non répétée positionnée au centre et en haut.
