/* commentaire CSS sur 1 ou plusieurs lignes */

/* syntaxe CSS 
	Selecteur{
	Propriete:Valeur;
	} */

/* Dans fichier .html utiliser la balise universelle <span class="LeNomQueJeVeux"> texte selectionne </span> 
dans le fichier .CSS cela devient 
.LeNomQueJeVeux{
	Propriete:Valeur;
} */




/* site responsive pc tablette telephone 
adaptation aux ecrans media queries
elles peuvent etre incorporees dans index.html ou dans la fichier CSS*/

@media screen and (max-width: 1280px)
{ 
	p{
		color: grey;
		background-color: greenyellow;
		font-size: auto;
	
	}
	h1{
		color: white;
	}
 }

 td /* Toutes les cellules car un tableau par defaut n'a pas de bordure */
 {
 	border: 1px solid navy;
 }

 table
 {
 	border-collapse: collapse;
 }

body{
	background-color: lightsalmon;
	 /* width: 15px;
	margin: auto; /* margin auto ne fonctione que si width a une valeur */ 
	*/
}

h1
{
	font-style: oblique;
	text-align: center;
	opacity:0.5; /*valeur de l opacite entre 0 et 1 */
	margin: 100px; /* marge exterieure */
	padding: 50px; /*marges interieure */
}

h1, p
{
	color: navy;
	font-weight: bold;
	/*font-family: Impact; par exemple.
	@font-face pour une police personnalisee force le navigateur a telecharger*/
	border: solid 4px lightblue;
}

p {

	width: auto;
	height: auto;
	margin: 100px; /* marge exterieure */
	padding: 50px; /*marges interieure */
	text-align: center;
	/*overflow: visible; /*texte trop long depassee */
	overflow: hidden; /* texte trop long coupe */ 
	*?
	overflow: scroll; /* ajout de barre de defilement */
	overflow-wrap: break-word ; /*coupe le mot */
}

.container {
	border: solid 3px white;
	display: flex;
	flex-direction: row;
}

.item {
	border: 2px solid navy;
	margin: 11px;
}

/* apparence dynamique -> On utilise pour cela les pseudo-formats.
La pseudo-classe CSS :hover est associée généralement aux pseudo-classes suivantes CSS quand on parle de lien (A) :

    :visited : quand le lien a été visité.
    :active : quand le lien est cliqué.
    :focus : quand le lien a le focus,
    :link : lien normal et non visité.
:hover  permet de changer l'apparence au survol 
(par exemple : a:hover  pour modifier l'apparence des liens lorsque la souris pointe dessus).

:active  modifie l'apparence des liens au moment du clic, 
:visited  lorsqu'un lien a déjà été visité.
:focus  permet de modifier l'apparence d'un élément sélectionné

*/

p:hover /* quand on pointe sur un paragraphe */
{
	color: green;
}

a:hover

{
	text-decoration: overline;
	color: red;
}


a:visited
{
	color: navy;
}
/* voir les flottants en css, permet de faire flotter un element autour du texte */