Web-Infos
  • Criar um site
  • Checkout
  • Le HTML5
  • CSS 3
  • Propriétés CSS
  • Balises HTML5
  • Faire son site internet
  • Téléchargement
Accueil » Comment changer la couleur du background d'une page web
  • Comment créer une page web avec un éditeur
  • Comment changer la couleur du background d’une page web
  • Création du header et du footer d’une page web
  • Comment faire des liens
  • Créer le layout d’une page web
  • Comment faire des effets sur les liens dans une page web
  • Comment modifier la police de caractère d’un site web
  • Comment créer une ligne horizontale dans une page web
  • Comment insérer une image
  • Comment aligner des images et du texte dans une page html
  • Comment insérer une vidéo
  • Comment mettre de la musique sur son site
  • Comment mettre une page web en ligne

Comment changer la couleur du background d’une page web

Comme vu précédemment, dans le chapitre CSS sur le background, il est possible de donner n’importe quel fond à notre page html, donc une couleur ou bien un pattern (un motif qui va se répéter dans la page pour couvrir totalement le background) ou encore une image.

Nous allons récupérer le code de base de notre page HTML créé précédemment dans notre éditeur Notepad+ et lui adjoindre un style CSS pour donner une couleur à notre background (nous avons déjà vu que la feuille de style est normalement externe et est appelée par la page HTML, ici nous l’incluons pour plus de simplicité).

 

Utilisation du CSS pour un background en couleur

Utilisation du CSS pour un background en couleur


 

Background noir grâce aux styles CSS

Background noir grâce aux styles CSS


 

Exemple HTML avec CSS intégré

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="description" content="Create an html page with an editor"/>

<title>My test page</title>

<!--Ajout d'un style CSS directement dans le fichier HTML-->
<style type="text/css">

body {background-color: #000000; color: white; text-align: center; width: 100%; 
height: 768px; }
h3 {margin-top: auto;}

</style>
</head>
<body>

<p>Sed tincidunt varius eros non sollicitudin. Integer purus ante, blandit non 
lobortis et, sollicitudin nec justo. Phasellus ornare nibh nunc, at lobortis 
justo vestibulum sit amet. Sed ornare nunc quis velit imperdiet consectetur. 
Duis tristique id nulla ac aliquet. Morbi ac pellentesque dolor. Nunc convallis 
ligula nec varius rutrum. Praesent nec nulla pretium, semper magna at, laoreet 
mi. Integerrisus turpis, bibendum sed ante nec, dapibus vulputate diam. Nam nec 
auctor felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 
suscipit quis erat eu ornare.</p>

</body>

</html>

 

Voir la démo Télécharger l’exemple

  • Balises HTML5
  • Propriétés CSS
  • Livre d’or
  • Conditions générales
  • Contact