Essential CSS properties

I recently completed the Basic CSS course on FreeCodeCamp so I thought it would be a good idea to share all of the essential CSS features and properties to all of the aspiring web developers here. This post only includes the absolute most essential features, I don't cover "Pro" or advanced-level features, just the bare minimum you need to get your web page firing on all cylinders.

Basic knowledge in HTML is assumed. I also assume that you know the bare minimum about the hexadecimal number system. If not, here is a simple guide for them.

1. Different ways to add styles

You can either use the <style> tag, the style= attribute of an HTML element or put all your styles in a separate CSS file (recommended).

2. Selectors

Three different types of selectors:

Element selectors style only a single element type such as h2 or p or even body
Class selectors such as .class-name style all elements that have the named class in their id attribute, such as class=class-name.
ID selectors select all elements that have the named ID in their id attribute. Less useful than class selectors but has higher precedence.

Selector priority

All style attributes with !important at the end of them have the highest precedence.
This is followed by ID selectors in the element being rendered, followed by element selectors, followed by class selectors.
Styles of child elements override styles of parent elements.
In the case of multiple id selectors or multiple class selectors, the styles in the selector defined last takes precedence followed by second-to-last ..., first.

3. Fonts

Font size: font-size=10px uses a 10 pixel font. font-size=50% set it to 50% of the parent element
Font family: font-family=nameOfFont. nameOfFont has to either be installed on the client's device or it has to be imported from a URL like so:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h1 {
  font-family: Lobster monospace;
}
</style>

Uses the Lobster font first and in case that fails for some reason, falls back to the monospace font.

Free fonts can be obtained from Google Fonts.

4. Box model

It is not a CSS property per se but it is a collection of 4 related properties:

The pure width and height of an element
The width and height of the padding inside the element
The width and height of the margin outside the element
The width and height of the border that lines the edges of the element.

        Other content...

      ^^^^^^^^^^^^^^
Ot   <++==========++>
he   <||OOOOOOOOOO||>  Other content...
er   <||O        O||>
     <||O        O||>
co   <||OOOOOOOOOO||>
nt   <++==========++>
en    vvvvvvvvvvvvvv
t...

        Other content...

* arrows represent the margin
* the |, = and + box represents the border
* O's represent the padding
* The empty space inside the box represents the
  pure width and height for other content

In other words, the padding, border and margin sizes are added to the pure width and height to make a larger element.

Padding, margin and border width

We have padding-top, padding-right, padding-bottom and padding-left and we also have a padding property that takes 4 values and assigns them to the sides in the order I listed above (clockwise starting from top)

These properties also exist for margin. (margin, margin-right, etc). They also exist for border but suffixed with -width, so border-width, border-left-width, and so on.

           1.
     +==> top  ===
     |           v
4.  left       right  2.
     ^           |
     === bottom <+
           3.

* The order values from `padding`, `border` and `margin` are assigned

If there are only 3 values, then left and right sizes use the value of 2.

If there are only 2 values, then left and right sizes use the value of 2. and top and bottom use the value of 1.

And obviously if there is only one value it is used for all the sides.

Border styling

Border styling can be set using border-style (and border-top-style, border-right-style and so on). border-style must be set for the border to display. border-[top|right|bottom|left]-style is not enough unless they're specified all at once, which is cumbersome.

From W3Schools's CSS tutorial:

The border-style property specifies what kind of border to display.
The following values are allowed:

dotted - Defines a dotted border

dashed - Defines a dashed border

solid - Defines a solid border

double - Defines a double border

groove - Defines a 3D grooved border. The effect depends on the border-color value

ridge - Defines a 3D ridged border. The effect depends on the border-color value

inset - Defines a 3D inset border. The effect depends on the border-color value

outset - Defines a 3D outset border. The effect depends > on the border-color value

none - Defines no border

hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

That last part means you can set values for border-style in the same fashion you set border-width, padding and margin, to set the style for the top, right, bottom, and left sides, going in clockwise order.

border-radius

Enables you to make the edges of the border round. You can even make them as round as a circle or ellipse. This is useful for creating buttons.

border-radius 30px will shape all corners by 30px, by essentially centering an invisible circle with that radius on the edge and removing whatever it's covering from the shape.

There are also properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius that set the radius for individual corners. The above border-radius attribute sets them in that order, and the same special syntax for border-width also works here.

5. Color

There are different ways to specify color for a color property. One is by using the name of the color (black, green, magenta and so on). You can view a list of all the defined color names here.

Another is using rgb(r, g, b) with r, g and b between 0 and 255. They set the concentrations of the red, green and blue color channels respectively. 0 means no concentration, while 255 is the highest concentration and maxes out the color channel. Inside a computer display, colors are emitted with red, green and blue LEDs.

A third way is using hsl(h, s, l) where h is a number between 0 and 360 that defines the hue. 0 represents red, and increasing the number cycles it through all the colors on the spectrum from orange to yellow and the rest of the colors until it goes back to red at 360. s and l are percentages between 0% and 100% that represent how concentrated the hue is (saturation) and how bright the color is (luminosity) respectively.

Saturation is what colorizes the hue, with no saturation the color would be a shade of gray. Luminosity at 0% makes the color completely black, while at 100% it makes it completely white regardless of hue or saturation.

A picture, or three in this case, speaks a thousand words.

Image from HSL Color Wheel by Erin Sowards.

Image from Wikipedia.

Do not confuse HSL with HSV. They are different color models and I'll probably dedicate another post to them.

You can also change the transparency of the color, also called alpha, using the rbga() and hsla() functions. These take a fourth argument that is the transparency between 0 and 1. Zero being fully transparent, and one makes the color fully opaque.

Colors can also be specified using 6 hexadecimal numbers: 2 for the red concentration, followed by 2 for the green concentration, and 2 for the blue concentration. It is not case sensitive.

So for #ffeedd, we take the ff and ee and dd as the red, green, and blue concentrations respectively. FF is 255 in decimal, while EE is 238 in decimal and DD is 208 in decimal so the above is equivalent to rgb(255, 238, 208).

If there are eight hex numbers, the least two are used for the alpha. so in #ffeeddcc, cc is the transparency value which is 192. This is divided by 255 to get the final transparency value, which is about 0.753. So the above hex number is equivalent to rgba(255, 238, 208, 0.753).

Color In CSS

The color, background-color and border-color properties style colors of elements, the background of elements in the case of <div>s, and borders respectively. They can take any of the color values in the previous section.