example1.css

#my-page {
  /* This is a specific selector for this ID.It must be unique by document <whatever id="my-page"/> */
  color: #43B581;
  background: transparent;
}

article{
  /* Those following styles will apply to all <article></article> elements */
  background: white;
  color: #747F8D;
  border: 1px solid #747F8D;
  box-shadow: 0 0 10px #AFB9C4;
}

.article__metadata{
  /* Those following styles will apply to all elements with this class */
  font-size: 10px;
  color: white;
  background: #F04848;
  padding: 5px 7px;
}

example2.css

article{/* ... */}

article h1{/* Target all <h1> inside all <article> */}
article header h1{/* Target all <h1> inside all <header> inside all <article> */}
article.highlight header h1{/* Target all <h1> inside all <header> in all <article> with the class highlight */}

:required{/* Target all input-like element that are required */}
:focus{/* Target all elements that have focus */}

a[href^="http"]{/* Target all <a> elements with attribute value for href that start with http */}

article{color: red;}
article h1{color: orange;}
article.highlight{color: yellow;}
article.highlight h1{color: green};
article header h1{color: blue};

example2.html

<article class="highlight">
  <header>
    <h1>Plop</h1>
  </header>
</article>

example3.css

.block-name{/* ... */}
.block-name_modifier-name{/* ... */}
.block-name__element-name{/* ... */}
.block-name__element-name_modifier-name{/* ... */}

.story-card{/* ... */}
.story-card_overdue-error{/* ... */}
.story-card__action-list{/* ... */}
.story-card__action-list_action-in-progress{/* ... */}

example4-flex.css

.holygrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.holygrail__body {
  display: flex;
  flex: 1;
}
.holygrail__content {
  flex: 1;
}
.holygrail__nav,
.holygrail-ads {
  flex: 0 0 12em;   /* 12em is the width of the columns */
}
.holygrail__nav {
  order: -1; /* put the nav on the left */
}

example4.css

body {
  min-width: 550px;      /* 2x Left Content width + Right Content width */
}
#container {
  padding-left: 200px;   /* Left Content width */
  padding-right: 150px;  /* Right Content width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* Left Content width */
  right: 200px;          /* Left Content width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* Right Content width */
  margin-right: -150px;  /* Right Content width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* Right Content width */
}

example5.css

#something {
 /* property name | duration | timing function | delay */
 transition: color .75s ease-in-out, height 1s ease, width 1s linear;
}

#somethingElse {
 transition: opacity .75s ease-in, background .75s ease-out;
}

#lastButNotLeast {
 transition: cubic-bezier(.6, 0, .72, 1);
}

example6.css

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; } # Left property will be interpolated
  68%, 72% { left: 50px; } # Left property will be interpolated
  100% { top: 100px; left: 100%; }
}

@keyframes identifier {
  from { top: 0; }
  50% { top: 30px; left: 20px; } # Ignored because of the second declaration. CSS mecanism apply here too.
  50% { top: 10px; }
  to { top: 0; }
}