The Best CSS and CSS3 Tutorials

Cascading Style Sheets (CSS) {#cascading-style-sheets-css-}

CSS is an acronym for Cascading Style Sheets. It was first invented in 1996, and is now a standard feature of all major web browsers.
CSS是Cascading Style Sheets的首字母缩写。它最初是在1996年发明的,现在是所有主要网络浏览器的标准功能。

CSS allows for developers to control how web pages look by "styling" the HTML structure of that page.

CSS specifications are maintained by the
CSS规范由。维护World Wide Web Consortium (W3C).

You can build some pretty amazing things in CSS alone, such as this pure-CSS
你可以在CSS中构建一些非常神奇的东西,比如这个纯CSSMinesweeper game (which uses no JavaScript).

A good start is the freeCodeCamp curriculum
一个好的开始是freeCodeCamp课程Introduction to Basic CSS.

Another suggestion for beginners is W3C's
对初学者的另一个建议是W3CStarting with HTML + CSS which teaches how to create a style sheet.

The site
网站CSS Zen Garden is a great example how the same html can be styled to look totally unique.

For a demonstration of the power of CSS, check out
为了演示CSS的强大功能,请查看Species In Pieces.

The best place to start learning CSS is with freeCodeCamp's
开始学习CSS的最佳地方是使用freeCodeCamp2-hour intro to CSS tutorial.

Then, if you're feeling more adventurous, we have an entire
然后,如果你感觉更冒险,我们就有一个整体12-hour course that covers HTML, HTML5, and CSS in detail.

Flexbox {#flexbox}

Flexbox is a new way to structure content in CSS3. It provides a wonderful way to create responsive websites that work well across different screen sizes and order content.

There are 3 simple steps to use flexbox.

  1. Convert parent container to a flex container by using display:flex; in the css section
  2. Adjust arrangement of different containers using flex-direction
  3. Adjust individual items by using properties like justify-content, align-items etc.

The Flexbox Layout aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
Flexbox Layout旨在提供一种更有效的方式来布置,对齐和分配容器中的项目之间的空间,即使它们的大小未知和/或动态(因此单词"flex").flex布局背后的主要思想是让容器能够改变其物品的宽度/高度(和顺序),以最好地填充可用空间。

  • main-axis : The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).
  • main-start | main-end :The flex items are placed within the container starting from main-start and going to main-end.
  • main size : A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the 'width' or 'height' property, whichever is in the main dimension.
  • cross axis : The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis's direction.
  • cross-start | cross-end : Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
  • cross size : The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of 'width' or 'height' that is in the cross dimension.

Grid Layout {#grid-layout}

CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is
CSS Grid Layout,简称为Grid,是一种CSS中最新,最强大的布局方案。它是supported by all major browsers and provides a way to position items on the page and move them around.

It can automatically assign items to
它可以自动分配项目 areas , size and resize them, take care of creating columns and rows based on a pattern you define, and it does all the calculations using the newly introduced
,大小和调整大小,根据您定义的模式创建列和行,并使用新引入的所有计算fr unit.

Why Grid? {#why-grid}

  • You can easily have a 12-column grid with one line of CSS. grid-template-columns: repeat(12, 1fr)
  • Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (flex-direction: row) or vertically (flex-direction: column) - and not both at the same time - Grid lets you move any grid item to any predefined grid area on the page. The items you move do not have to be adjacent.
  • With CSS Grid, you can change the order of HTML elements using only CSS . Move something from top to the right, move elements that were in the footer to the sidebar etc. Instead of moving the <div>from <footer> to <aside> in the HTML, you can just change its placement with grid-area in the CSS stylesheet.

Grid vs. Flex {#grid-vs-flex}

  • Flex is one-dimensional - either horizontal or vertical, while Grid is two-dimensional, meaning you can move elements in both horizontal and vertical planes
  • In Grid, we apply layout styles to the parent container and not the items. Flex, on the other hand, targets the flex item to set properties like flex-basis, flex-grow, and flex-shrink
  • Grid and Flex are not mutually exclusive. You can use both on the same project.

Checking browser compatibility with @supports {#checking-browser-compatibility-with-supports}

Ideally, when you build a site, you'd design it with Grid and use Flex as a fallback. You can find out if your browser supports grid with the
理想情况下,在构建站点时,您可以使用Grid进行设计,并使用Flex作为后备。您可以查看您的浏览器是否支持网格@support CSS rule (aka feature query). Here's an example:

.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 */

Getting Started {#getting-started}

To make any element a grid, you need to assign its
要使任何元素成为网格,您需要分配它display property to
财产到grid, like so:

.conatiner {
  display: grid;

And that's it. You just made your
就是这样。你刚刚做了你的.container a grid. Every element inside the
一个网格。里面的每个元素.container automatically becomes a grid item.

Defining templates {#defining-templates}

Rows and columns

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


  "a a a a"
  "b c d e"
  "b c d e"
  "f f f f";


  "header header header header"
  "nav main main sidebar";

Grid Areas {#grid-areas}

Here's some sample code on how to define and assign grid areas:

.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;

The fr unit {#the-fr-unit}

Grid introduces a new
Grid引入了一个新的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 {#examples}

Changing the order of elements based on screen size {#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 (
也是。这是Bootstrap网格系统的一个更简洁,更简单的替代方案(col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site {
  display: grid;
  grid-template-columns: 1fr 1fr;
    "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;
      "title title title"
      "main header header"
      "main sidebar footer"

More Information: {#more-information-}

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 {#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 {#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 {#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
选择所有具有元素直接子元素的li.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: {#more-information--1}

You can learn more about selectors on these resources:

Selectors in CSS (cascading style sheets) are determined based on
CSS中的选择器(级联样式表)是基于 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).


  • 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 {#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}

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:

  • <display-inside>
  • <display-outside>
  • <display-listitem>
  • <display-box>
  • <display-internal>
  • <display-legacy>