CSS — personnalisation

Fiche express
Domaine	Feuilles de style
Langage	CSS
Voir aussi	HTML — exemple, Blueprint

Exemple de feuille de style CSS de personnalisation d'une page (mise en page fixe, navigation, boutons, coins arrondis). Elle sert de base réutilisable pour la présentation d'un site.

Feuille de style

.container {
  width: 710px;
}

body {
  background: #cff;
}

header {
  padding-top: 20px;
}

header img {
  padding: 1em;
  background: #fff;
}

section {
  margin-top: 1em;
  font-size: 120%;
  padding: 20px;
  background: #fff;
}

section h1 {
  font-size: 200%;
}

/* Liens */
a {
  color: #09c;
  text-decoration: none;
}
a:hover {
  color: #069;
  text-decoration: underline;
}
a:visited {
  color: #069;
}

/* Navigation */
nav {
  float: right;
  background-color: white;
  padding: 0 0.7em;
  white-space: nowrap;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0.2em 0;
}
nav ul li a {
  padding: 0 5px;
  font-weight: bold;
}
nav ul li a:visited {
  color: #09c;
}
nav ul li a:hover {
  text-decoration: underline;
}

/* Bouton inscription */
a.signup_button {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  width: 190px;
  color: #fff;
  background: #006400;
  font-size: 150%;
  font-weight: bold;
  padding: 20px;
}

/* Coins arrondis */
.round {
  -moz-border-radius:    10px;
  -webkit-border-radius: 10px;
  border-radius:         10px;
}

footer {
  text-align: center;
  margin-top: 10px;
  width: 710px;
  margin-left: auto;
  margin-right: auto;
}
footer nav {
  float: none;
}

Voir aussi

• HTML — exemple · Blueprint