Comments

Comments are significant making the source code easier to understand better by devs but ignored by browsers. A CSS comment begins with /*, and ends with */.

/* This is a CSS comment */
body {
    color: #ffffff;
    text-align: center;
}

You can also use it for debug purposes

/*
body {
    font-size: 18px;
    text-transform: uppercase;
}
*/

CSS property names and many values are not case-sensitive though, selectors are usually case-sensitive, for instance, the class selector .firstclass is not the same as .firstClass.

To learn more about naming methodology check Naming Conventions

Cascade

A CSS selector is  a pattern of elements and other terms that tell the browser which HTML elements should be styled.CSS is an abbreviation for Cascading Stylesheets. The cascade algorithm is used to resolve conflicts when multiple CSS rules apply to the same HTML element.

Best is to show the cascade effect on an example. Please note a linkstyled with the following CSS will be purple.

p {
  color: #ffb074; /* yellow */
}

p {
  color: #9b71dd; /* purple */
}

Understanding the cascade algorithm enables you to comprehend how the browser resolves such conflicts. The cascade algorithm is divided into four stages.

1. Position and appearance order: the order in which your CSS rules appear,
2. Specificity: an algorithm that determines which CSS selector matches the best.
3. Origin: the order in which CSS appears and where it comes from, whether it is from a browser style, a browser extension, or your own CSS.
4. Importance: Some CSS rules are given more weight than others, particularly the!important rule type.

As a designer this is maximum what you have to know, and there is no point going in to it deeper. So in simple terms the cascade order is as follows:

* from low to high

Selectors

A CSS selector is  a pattern of elements and other terms that tell the browser which HTML elements should be styled.

A universal selector * applies to all HTML elements in the document.

* {
     margin: 0;
     padding: 0;
}

An element type selector like p applies to all instance HTML element <p> in the document.

p {
     color: #000000;
}

The id selector like #section is used to define style rules for a single or unique element in the document.

#section {
     background: #ffffff;
}

The class selectors can be used to select any HTML element that has a class attribute.

.purple {
    color: purple;
}

Colors

The color property defines the text color (foreground color in general) of an element.

In below example color property specified in the p selector defines the default text color for this particular paragraph.

body {
    color: #ff5722;
}

Defining color value

body {
     color: red;                      /* color keywords */
     color: #000000;                  /* HEX code */
     color: rgba(255, 255, 0, 0.8);   /* RGBA values */
     color: hsla(45, 100%, 50%, 0.5); /* HSLA values */
}

HEX is a hexadecimal way to represent a color in RGB format by combining three values.

RGBA stands for red (255-0), green (255-0), blue (255-0), alpha (0.0-1.0).

HSLA stands for hue (0-360), saturation (0%-100%), lightness (0%-100%), alpha (0.0-1.0).

Backgrounds

The background styles the background of an element, including coloring, placing images  and setting their positioning, through background are background-color, background-image, background-repeat, background-attachment, background-position, background-size, background-clip and background-origin.

Background Color

The background-color property is used to set the background color of an element.

div {
      background: #000000;
}

Background Image

The background-image property set an image as a background of an HTML element.

body {
    background-image: url("img/bg.jpeg");
}

Background Repeat

The background-repeat property allows you to control how a background image is repeated or tiled in the background of an element.

body {
     background-image: url("img/bg.jpeg");
     background-repeat: no-repeat;
}

Similarly, you can use the value repeat-y to repeat the background image vertically along the y-axis or value repeat-x to repeat horizontally along the x-axis, or the value no-repeat to prevent the repetition altogether.

Background Position

The background-position property is used to control the position of the background image.

body {
     background-image: url("img/bg.jpeg");
     background-repeat: no-repeat;
     background-position: center right;
     background-position: 10px 50%;
}

The first value represents the horizontal position, and the second value represents the vertical position. If only one value is specified, the second value is assumed to be center. One can also use units values, such as % px or em for this property.

Background Attachment

The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block.

body {
     background-image: url("img/bg.jpeg");
     background-repeat: no-repeat;
     background-position: center right;
     background-attachment: fixed;
}

Background Shorthand

It is also possible to specify all these properties in one single property to shorten the code or avoid extra typing.

body {
     background-color: #000000;
     background-image: url("img/bg.jpeg");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center right;
}

/* or */

body {
     background: #000000 url("img/bg.jpeg") no-repeat fixed center right;
}

Please note that when using the background shorthand property the order of the property values should be background: color image repeat attachment position.

If the value for an individual background property is missing or not specified while using the shorthand notation, the default value will be used.

Fonts

CSS provide several properties for styling the font of the text.

The font properties are: font-family, font-style, font-weight, font-size, and font-variant.

Font Family

The font-family property is used to specify the font to be used to render the text.

p {
    font-family: Roboto, Helvetica, sans-serif;
}

Commas stand for fallback, when font would not work with user. If the name of a font family contains more than one word, it must be placed inside quotation marks, like “Work Sans”, “Open Sans”, “Source Sans Pro”, etc.

Font Style

The font-style property is used to set the font face style for the text content of an element.

p {
     font-style: normal;
}
h1 {
     font-style: italic;
}
h2 {
     font-style: oblique;
}

Please note The italic style uses an italic version of the font, while oblique style on the other hand is simply a slanted or sloped version of the normal font.

Font Size

The font-size property is used to set the size of font for the text content of an element.

Setting the font size in absolute values (e.g. 14px, 16px, etc.) relative (e.g. 1em, 2rem, 100%, 1vh, 2vw) as well as keywords (xx-small, x-small, small, medium, large, x-large, xx-large). More about units please check Units.

body {
    font-size: xx-small; /*  9px */
    font-size: x-small;  /* 10px */
    font-size: small;    /* 13px */
    font-size: medium;   /* 16px */
    font-size: large;    /* 18px */
    font-size: x-large;  /* 24px */
    font-size: xx-large; /* 32px */
}

Please note that by setting a font size on the body element, you can set the relative font sizing everywhere else on the page, giving you the ability to easily scale the font size up or down accordingly.

Font Weight

The font-weight property specifies the weight or boldness of the font.

This property can take one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

400 is same as normal and 700 is same as bold.

body {
     body-weight: 600;
}

Font Variant

The font-variant property allows the text to be displayed in a special small-caps variation.

h5 {
    font-variant: small-caps;
}

The value normal removes small caps from the text which is already formatted that way.

Font Shorthand

It is also possible to specify all these properties in one single font property to shorten the code or avoid extra typing.

p {
     font-style: normal;
     font-weight: 500;
     font-size: 16px;
     line-height: 1.1;
     font-family: "Work Sans", sans-serif;
}

/* or */

p {
     font: normal 500 16px 1.1 "Work Sans", sans-serif ;
}

Please note that when using the font shorthand property the order of the property values should be font-style font-variant font-weight font-size line-height font-family.

If the value for an individual background property is missing or not specified while using the shorthand notation, the default value will be used.

Text

Text properties give precise control over the visual appearance of the characters, words, spaces, and so on.

They consist fromtext-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more.

Text Alignment

Align property is used to set the horizontal alignment of the text.

p {
     text-align: center;
     text-align: left;
     text-align: right;
     text-align: justify;
}

Text Decoration

The text-decoration property is used to set or remove decorations from text.

Values are: underline, overline, line-through, and none.

p {
     text-decoration: none;
     text-decoration: underline;
     text-decoration: line-through;
     text-decoration: overline;
}

Text Transformation

The text-transform property is used to set the cases for a text.

It accept following values: uppercase, capitalize lowercase

p {
    text-transform: uppercase;
    text-transform: capitalize;
    text-transform: lowercase;
}

Text Indentation

The text-indent property is used to set the indentation of the first line of text within a block of text. Value is set in measurement units.

p {
    text-indent: 100px;
    text-indent: 2em;
    text-indent: 3rem;
    text-indent: 10%;
    text-indent: 2vw;
}

Letter Spacing

The letter-spacing property is used to set extra spacing between the characters of text. Value is set in measurement units. It accepts negative values.

p {
    letter-spacing: 0.5px;
    letter-spacing: 0.25em;
    letter-spacing: 0.35rem;
    letter-spacing: 0.1vh;
    letter-spacing: 1%;
}

Word Spacing

The word-spacing property is used to set extra spacing between words. Value is set in measurement units. It accepts negative values.

p {
    word-spacing: 0.5px;
    word-spacing: 0.25em;
    word-spacing: 0.35rem;
    word-spacing: 0.1vh;
    word-spacing: 1%;
}

White Space

The white-space property specifies how white-space inside an element is handled.

p {
    white-space: nowrap; /* doesn't wrap it, at the end of the box */
    white-space: normal; /* wraps it, at the end of the box */
    white-space: pre;    /* wraps it, at the end of theline of HTML code */
}

Line Height (Leading)

The line-height property is used to set the height of the text line. Value is set in measurement units and a number. It accepts negative values.

p {
    line-height: 1.1;
    line-height: 16px;
    line-height: 1em;
    line-height: 1.2rem;
    line-height: 1vh;
    line-height: 5%;
}

Links

Links are an essential part of a website, that allow users to navigate through the site.

A link has four different states — link, visited, active and hover, which can be styled differently through using the pseudo-class selectors.

a:link {       /* Unvisited link */
    color: #ff0000;
}
a:visited {    /* Visited link */
    color: #ff00ff;
}
a:hover {      /* Mouse over link */
    color: #00ff00;
}
a:active {     /* Active link */
    color: #00ffff;
}