Les meilleurs tutoriels CSS et CSS3

Feuilles de style en cascade (CSS)

CSS est un acronyme pour les feuilles de style en cascade. Il a été inventé pour la première fois en 1996 et est maintenant une fonctionnalité standard de tous les principaux navigateurs Web.

CSS permet aux développeurs de contrôler l'apparence des pages Web en «stylisant» la structure HTML de cette page.

Les spécifications CSS sont gérées par le World Wide Web Consortium (W3C).

Vous pouvez créer des choses assez étonnantes en CSS seul, comme ce jeu de démineur en CSS pur (qui n'utilise pas de JavaScript).

Un bon début est le curriculum freeCodeCamp Introduction to Basic CSS.

Une autre suggestion pour les débutants est Commencer avec HTML + CSS du W3C qui enseigne comment créer une feuille de style.

Le site CSS Zen Garden est un excellent exemple de la façon dont le même html peut être stylé pour être totalement unique.

Pour une démonstration de la puissance de CSS, consultez Species In Pieces.

Tutoriels pour démarrer avec CSS et CSS3

Le meilleur endroit pour commencer à apprendre le CSS est avec le didacticiel d'introduction de 2 heures de freeCodeCamp au CSS.

Ensuite, si vous vous sentez plus aventureux, nous avons un cours complet de 12 heures qui couvre en détail HTML, HTML5 et CSS.

Flexbox

Flexbox est une nouvelle façon de structurer le contenu en CSS3. Il offre un excellent moyen de créer des sites Web réactifs qui fonctionnent bien sur différentes tailles d'écran et pour commander du contenu.

Il y a 3 étapes simples pour utiliser Flexbox:

  1. Convertissez le conteneur parent en conteneur flex à l'aide de display: flex;
  2. Ajustez la disposition des différents conteneurs en utilisant flex-direction
  3. Ajustez la disposition des éléments dans un conteneur en utilisant des propriétés telles que justify-content, align-itemset ainsi de suite

Flexbox vous permet de disposer, d'aligner et d'ajuster efficacement l'espace entre les différents éléments de la page, même si vous ne connaissez pas leur taille exacte. Au lieu de cela, les éléments et les conteneurs sont dynamiques et «fléchiront» pour mieux remplir l'espace disponible.

  • axe principal : axe principal d'un conteneur flexible le long duquel les éléments flexibles sont disposés. Gardez à l'esprit que cela peut être horizontal ou vertical selon laflex-directionpropriété.
  • main-start | extrémité principale :Les articles Flex sont placés dans un conteneur de main-startà main-end.
  • taille principale : la dimension principale d' un élément flexible, qui peut être sa largeur ou sa hauteur, agit comme la taille principale de l'élément.
  • axe transversal : axe perpendiculaire à l'axe principal. La direction de l'axe transversal dépend de la direction de l'axe principal.
  • départ croisé | cross-end : les lignes flexibles et les éléments sont placés dans un conteneur flexible en commençant parcross-startlecross-endcôté.
  • taille croisée : la dimension croisée de l'élément (largeur ou hauteur) agit comme la taille croisée de l'élément.

Disposition de la grille

CSS Grid Layout, simplement connu sous le nom de Grid, est un schéma de mise en page qui est le plus récent et le plus puissant en CSS. Il est pris en charge par tous les principaux navigateurs et fournit un moyen de positionner des éléments sur la page et de les déplacer.

Il peut automatiquement attribuer des éléments aux zones , les dimensionner et les redimensionner, prendre soin de créer des colonnes et des lignes en fonction d'un modèle que vous définissez, et effectuer tous les calculs à l'aide de l' frunité nouvellement introduite .

Pourquoi Grid?

  • Vous pouvez facilement avoir une grille de 12 colonnes avec une ligne de CSS. grid-template-columns: repeat(12, 1fr)
  • Grid vous permet de déplacer les choses dans n'importe quelle direction. Contrairement à Flex, où vous pouvez déplacer des éléments horizontalement ( flex-direction: row) ou verticalement ( flex-direction: column) - et non les deux en même temps - Grid vous permet de déplacer n'importe quel élément de la grille vers n'importe quelle zone de grille prédéfinie de la page. Les objets que vous déplacez ne doivent pas nécessairement être adjacents.
  • Avec CSS Grid, vous pouvez modifier l'ordre des éléments HTML en utilisant uniquement CSS . Déplacez quelque chose du haut vers la droite, déplacez les éléments qui étaient dans le pied de page vers la barre latérale, etc. Au lieu de déplacer le de à dans le HTML, vous pouvez simplement changer son placement grid-areadans la feuille de style CSS.

Grille contre Flex

  • Flex est unidimensionnel - horizontal ou vertical, tandis que Grid est bidimensionnel, ce qui signifie que vous pouvez déplacer des éléments dans les plans horizontal et vertical
  • Dans Grid, nous appliquons des styles de mise en page au conteneur parent et non aux éléments. Flex, d'autre part, vise l'élément flexible aux propriétés définies comme flex-basis, flex-growetflex-shrink
  • Grid et Flex ne s'excluent pas mutuellement. Vous pouvez utiliser les deux sur le même projet.

Vérification de la compatibilité du navigateur avec @supports

Idéalement, lorsque vous créez un site, vous le concevez avec Grid et utilisez Flex comme solution de secours. Vous pouvez savoir si votre navigateur prend en charge la grille avec la @supportrègle CSS (aka feature query). Voici un exemple:

.container { display: grid; /* display grid by default */ } @supports not (display: grid) { /* if grid is not supported by the browser */ .container { display: flex; /* display flex instead of grid */ } }

Commencer

Pour faire de n'importe quel élément une grille, vous devez attribuer sa displaypropriété à grid, comme ceci:

.conatiner { display: grid; }

Et c'est tout. Vous venez de créer votre .containergrille. Chaque élément à l'intérieur du .containerdevient automatiquement un élément de grille.

Définition de modèles

Lignes et colonnes

grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 300px;

Domaines

grid-template-areas: "a a a a" "b c d e" "b c d e" "f f f f";

ou

grid-template-areas: "header header header header" "nav main main sidebar";

Zones de grille

Voici un exemple de code sur la façon de définir et d'attribuer des zones de grille:

.site { display: grid; grid-template-areas: /* applied to grid container */ "head head" /* you're assigning cells to areas by giving the cells an area name */ "nav main" /* how many values kind of depends on how many cells you have in the grid */ "nav foot"; } .site > header { grid-area: head; } .site > nav { grid-area: nav; } .site > main { grid-area: main; } .site > footer { grid-area: foot; }

L' frunité

Grid introduces a new fr unit, which stands for fraction. The good thing about using the fr unit is that it takes care of calculations for you. Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly. Plus there will be no bleeding gaps at the end either.

Examples

Changing the order of elements based on screen size

Let’s say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there’s a bunch of other HTML elements in between the two.

The simple solution is to change the grid-template-areas based on the screen size. You can also change the number of columns and rows based on the screen size, too. This is a much cleaner and simpler alternative to Bootstrap’s Grid system (col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "main header" "main sidebar" } @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ .site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title title" "main header header" "main sidebar footer" } }

More Information:

  • CSS Grid Palyground by Mozilla: Great starting point if you’re new to CSS Grids. It has visuals to help you understand the terminology easily
  • YouTube: Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts): This presentation will convince you in less than an hour why CSS Grids are cool and why/how you should use them.
  • Videos: Learn Grid Layout Video Series by Rachel Andrew: Rachel Andrew is an expert on the subject. The video titles may look strange and overwhelming, but the content is short and to the point
  • Book: Get Ready for CSS Grid Layout by Rachel Andrew

Selectors

Selectors are CSS rules to target HTML elements to apply styles. Tag names, class names, ids, and attributes are some of the hooks used as selectors.

Selector Syntax

Selectors arranged in a specific sequence build up to a rule to target elements. An example:

/* selects anchor tags */ a { color: orange; } /* selects elements with hero class */ .hero { text-align: center; }

Type of Selectors

  • TypeDescription are Type selectors and Tag names are used to select elements such as h1 or a.
  • Universal Selectors apply to all elements.
  • div * matches all elements within div elements.
  • Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
  • h1[title] selects h1 elements with title attribute.
  • Class Selectors are Selectors that target elements using their class names.
  • ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
  • Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

Selector Combinators

Combinator: Purpose white spaceDescendant combinator. .nav li selects all li children within the class .nav, including nested li elements.>Child combinator. .menu > li selects all li that are direct children of elements with .menu class.+Adjacent sibling combinator. .logo + h1 targets h1 that is an immediate sibling to .logo class.~General sibling combinator. header ~ div targets div elements that are siblings to header elements.

This section details all of these electors.

More Information:

You can learn more about selectors on these resources:

  • Official CSS3 Selectors specification
  • Selectors page on Mozilla Developer Network
  • CSS Selectors Cheat Sheet on FreeCodeCamp Guides

Selectors in CSS (cascading style sheets) are determined based on specificity. With this we are able to be more specific on our style rules and override other rules that may be targeting the same element but are not as specific.

The way this specificity hierarchy works is based on weight. This means that an element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of 100 (one hundred). We are able to combine different selectors together be more specific on the element we want to change.

As an example:

 p { color: blue; } p .red { color: red; }

Our type selector p will select all p elements in our html document, but it only has a weight of one. In contrast, the class selector has a weight of 11, because we are combining a type selector with a class selector (this selector is matching all p elements with a class of red).

Note:

  • Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
  • Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
  • Specificity is usually why some of the style rules do not apply to elements when you would expect them to.

CSS Display

The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are:

 .none {display: none} .block {display: block} .inline-block {display: inline-block} .inline {display: inline} .flex {display: flex} .inline-flex {display: inline-flex} .inline-table {display: inline-table} .table {display: table} .inherit {display: inherit} .initial {display: initial}

The display:none property can often be helpful when making a website responsive. For example, you may want to hide an element on a page as the screen size shrinks in order to compensate for the lack of space. display: none will not only hide the element, but all other elements on the page will behave as if that element does not exist.

This is the biggest difference between this property and the visibility: hidden property, which hides the element but keeps all other page elements in the same place as they would appear if the hidden element was visible.

These keyword values are grouped into six categories: