What Does > in CSS Mean

What does * mean in CSS?

This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.

Meaning of '*' in CSS

* means ALL.

In this case it would be ALL the elements in .center-wrapper

What does the '$' in CSS mean?

Those are SASS (SCSS) variables which store color properties so they can be used later on. Also, to give you a basic concept, SASS is a CSS pre-processor which allows you to nest selectors, use mixins, store values on variables, etc.

You can see it (scss) referenced in the codepen CSS section:
Sample Image

Taken from SASS docs (refer to variables):

Think of variables as a way to store information that you want to
reuse throughout your stylesheet. You can store things like colors,
font stacks, or any CSS value you think you'll want to reuse. Sass
uses the $ symbol to make something a variable. Here's an example:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

If you are wondering the difference between SASS and SCSS, its basically syntax, below taken from docs:

There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.

The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.

What does the (greater-than sign) CSS selector mean?

> is the child combinator, sometimes mistakenly called the direct descendant combinator.¹

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
    background: yellow;
}

div p.some_class { 
    color: red;
}

<div>
    <p class="some_class">Some text here</p>     <!-- [1] div > p.some_class, div p.some_class -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- [2] div p.some_class -->
    </blockquote>
</div>

What does a start(*) in CSS mean

The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.

For example, if we have this HTML document:

<div class="container">
    <div class="square">
    <div class="square">
</div>
<div class="container">
    <div class="circle">
    <div class="circle">
</div>

To select just the .container divs, the following CSS can be used:

.container
{
   /*Styling*/
}

To select just the .square inside the .containers then use:

.container .square
{
    /*Styling for squares*/
}

To select all the elements that are inside the .containers then use:

.container *
{
    /*Styling for squares, circles, rectangles and everything else you can think off*/
}

For further information, see the W3C reference on the Universal Selector:

http://www.w3.org/TR/selectors/#universal-selector

And also the Mozilla Dev Network:

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

What does the dot mean in CSS?

A . prefix usually represents a class selector, but if it's immediately followed by whitespace then it's a syntax error.

If I were to hazard a guess, then it's likely the author meant to say .work-container > h3, but missed the Shift key just as he was about to type the > character (the child combinator).

Your second selector, .work-container h3, simply means any h3 that's contained within an element with a class called work-container.

What does the '' symbol in css mean?

There is no valid symbol as < in CSS. If you use it, you will invalidate your css.

However, you may want to use > - the child selector.

CSS4 will introduce a subject selector. At the moment it is marked with $.

$#parent a:hover{
   /* styles */
}

so these rules will not apply to the a in hoverstate, but it's parent with the parent-ID. CSS4 spec