CSS – Mise en place

Ajouter un style

Voici les différentes façons d’ajouter un style à une balise HTML

Avec un fichier CSS externe

HTML


<head>
<link href="css/style.css" media="all" rel="stylesheet" >
</head>
<body>
   <h1>Titre de la page</h1>
</body>


<head>
   <link href="css/style.css" media="all" rel="stylesheet" >
</head>
<body>
   <h1>Titre de la page</h1>
</body>

Style.css


   h1 {color:red; font-size:24px; text-align:center;}

Avec le code CSS directement dans le document HTML


<head>
<style media="all" type="text/css">
  h1 {color:red; font-size:24px; text-align:center;}
</style>
</head>

Avec le style directement sur l’élément


<h1 style="color:red; font-size:24px; text-align:center;">Titre de la page</h1>


<h1 style="color:red; font-size:24px; text-align:center;">Titre de la page</h1>

Publier 27 octobre 2014 par Michel PIALLIER dans CSS - Mise en place Commentaires fermés

Les sélecteurs d’attribut

Les sélecteurs d’attribut permettent de cibler un élément selon la présence d’un attribut ou selon la valeur donnée d’un attribut.

Présence d’un attribut


/* Les éléments  avec un attribut title */
a[title] {
  color: purple;
}

Selon la valeur donnée d’un attribut


/* Les éléments  avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* Les éléments  dont href contient "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Les éléments  dont href finit par ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Les éléments  dont l'attribut class contient le mot logo */
/* comportement identique à a.logo */
a[class~="logo"] {
  padding: 2px;
}

Publier 23 juin 2019 par sm2017 dans CSS - Mise en place Commentaires fermés

Liste des principaux pseudo-éléments

Définition d’un pseudo-élément

Liste des principaux pseudo-éléments

Jsfiddle

Publier 6 avril 2017 par Michel PIALLIER dans CSS - Les pseudo-éléments Commentaires fermés

1 2 Next »

::first-letter	Sélectionne la première lettre de chaque élément
::first-line	Sélectionne la première ligne de chaque élément
::after	Insère du contenu après celui de chaque élément
::before	Insère du contenu avant celui de chaque élément