Toutes les propriétés en CSS ont une utilité, cependant en tant que designer web, je vais vous lister ci-dessous les propriétés que j’utilise tout le temps, et les connaître me permettent de faire absolument tout ce que je désire !
Les propriétés CSS de style TEXTE
color
Permet de colorer le texte.
color: red;
color: #ff0000;font-size
Permet de modifier la taille du texte.
font-size: 16px;
font-size: 1em;font-weight
Change la graisse du texte.
font-weight: 400;
font-weight: 700;
font-weight: bold;text-align
Permet d’aligner le texte à gauche, centré, à droite, justifié…
text-align: left;
text-align: center;
text-align: right;
text-align: justify;text-decoration
Permet de souligner le texte.
text-decoration: underline;
text-decoration: dashed underline overline;
text-decoration: line-through;
text-decoration: wavy overline red;Les propriétés CSS pour le style des blocs
background
Cette propriété vous permet d’ajouter un arrière plan à vos éléments, il peut être une image, un dégradé ou bien simplement une couleur linéaire.
background: url('/image.jpeg');
background: linear-gradient(to right, red, blue);
background: #efefef;height
Permet de définir une taille fixe pour la hauteur du bloc.
height: 250px;
height: 100%; //Pour que cet effet marche, son parent doit avoir une hauteur spécifiée.
height: 100vh; //Taille en rapport à la hauteur de l'écran.width
Permet de définir une taille fixe pour la largeur du bloc.
width: 250px;
width: 100%;
width: 100vw; //Taille en rapport à la largeur de l'écran.box-shadow
Permet d’ajouter une ombre derrière un bloc. Il demande au moins 4 valeurs : le décalage horizontal (px), le décalage vertical (px), la taille de l’ombre (px), la couleur (préférer l’utilisation du « rgba » afin d’avoir un contrôle direct sur son opacité).
box-shadow: 0 4px 15px rgba(0,0,0,0.4);position
La manière dont se comporte un bloc sur une page peut être différente :
position: relative;La position relative est la plus courante, cette position permet au bloc d’hériter de la position de son parent, le bloc devient donc relatif à son parent. Pour faire simple, la position relative permettra au bloc d’occuper la place, et des éléments frères avec la position relative feront qu’ils se suivront.
position: absolute;
top: 0;
left: -50px;La position absolute est le contraire de la position relative, elle permet au bloc de n’occuper aucune place par rapport à son parent. Attention du coup car le risque c’est que votre texte vienne s’enchevêtrer avec ses éléments frères. On défini fréquemment avec cette position un « top » et un « left » (ou « bottom », ou « right »). Ces définitions permettent de situer le bloc par rapport à son parent.
position: fixed;Cette position réagit exactement comme la position absolute, cependant son référent principal n’est plus son parent mais l’écran.
display
L’utilisation de la propriété display peut avoir plusieurs rôles : soit pour cacher un élément, soit pour organiser l’affichage de ses enfants, soit pour réagir de manière à n’utiliser que la largeur que ses enfants utilisent…
display: none;Cette valeur « none » cache complètement un élément et ses enfants de la page. Attention cependant car il ne supprime pas pour autant le HTML !
display: block;Le display block permet d’afficher un élément, et prend automatiquement toute la largeur disponible.
display: inline-block;Le inline-block permet d’afficher un élément, mais en utilisant que la largeur nécessaire pour ses enfants.
display: flex;Le display flex permet de faire réagir ses éléments enfants de manière automatique. Il est très utile pour le comportement responsive d’une page, ou bien pour organiser les sous-éléments de manière automatique.
display: grid;Le display grid permet d’afficher les sous-éléments sous forme de tableau, mais avec une structure choisie. L’utilisation du display grid peut devenir très complexe et nécessite un apprentissage à part entière, mais se révèle extrêmement puissante.
overflow
L’overflow permet d’autoriser ou non l’affichage des enfants du blocs en dehors de celui-ci. Par exemple, si un élément enfant contient une image plus grande que le bloc, l’utilisation d’un « overflow: hidden; » coupera tout ce qui dépasse !
overflow: hidden;
overflow: visible;Les espacements/contours en CSS
margin
Le margin permet de contrôler les marges extérieures d’un bloc.
margin: 15px; //Ajoute 15px à toutes les marges
margin: 15px 25px; //Ajoute 15px aux marges haut-bas, et 25px aux marges droite-gauche
margin: 15px 20px 25px 10px; //Ajoute des marges dans l'ordre respectif : haut-droite-bas-gauche;
margin-top: 15px;
margin-right: 20px;
margin-bottom: 25px;
margin-left: 15px;padding
Le padding permet de contrôler les marges intérieures d’un bloc.
padding: 15px; //Ajoute 15px à toutes les marges
padding: 15px 25px; //Ajoute 15px aux marges haut-bas, et 25px aux marges droite-gauche
padding: 15px 20px 25px 10px; //Ajoute des marges dans l'ordre respectif : haut-droite-bas-gauche;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 15px;border
Le border permet de contrôler l’espace central d’un bloc, il se situe entre le margin et le padding. Cependant, contrairement à ces derniers, il est possible de lui attribuer un style et une couleur !
border: 10px;
border: 10px solid blue;
border-top: 5px solid green;
border-right: 5px solid red;
border-bottom: 5px solid orange;
border-left: 5px solid rgba(0,0,0,0.15);border-radius
Le border-radius permet d’arrondir les angles d’un bloc.
border-radius: 10px;
border-radius: 10px 15px 10px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 25px;Les effets en CSS
transition
La transition vous permet d’adoucir l’état CSS d’un élément vers un autre. Il est souvent employé sur des éléments réagissant au survol de la souris. Il prend en paramètres : le nom de la propriété CSS sur laquelle on veut que la transition agisse (on peut aussi mettre « all » pour l’affecter sur toutes), le temps de transition en secondes, en dernier paramètre on peut mettre une valeur de courbe d’accélération ou de décélération sur la transition.
transition: all .15s ease-out;
transition: background 1s ease-in-out;
transition: box-shadow 0.5s ease-in;cursor
L’effet cursor permet de changer le curseur lorsqu’il survol un élément.
cursor: pointer;
cursor: wait;
cursor: crosshair;
cursor: zoom-in;
cursor: wait;pointer-events
L’effet pointer-events permet de modifier la réaction d’un bloc par rapport à la souris. En spécifiant « none », le curseur ne pourra plus sélectionner de texte par exemple, car le curseur pourra passer au travers de l’élément.
pointer-events: none;
pointer-events: auto;opacity
Permet de gérer l’opacité d’un élément, de base les éléments affichés ont pour opacité « 1 » (opaque), mais nous pouvons ajouter de la transparence en spécifiant cette propriété en dessous de 1.
opacity: 1;
opacity: 0.5;
opacity: 0;z-index
Cette propriété CSS permet d’attribuer une valeur pour la profondeur d’un élément. Plus la valeur attribuée est élevée, et plus l’élément en question passera en premier plan par rapport aux autres éléments enchevêtrés. Pour fonctionner, son élément nécessite la propriété CSS « position ».
z-index: 50;
position: relative;
z-index: 80000;
position: absolute;