Basics of CSS

In the last blog, we discussed the basics of html and css, In this blog, we will discuss some other things about CSS.

CSS Resets

There are various browsers like Chrome, Safari, Opera, Firefox, etc. Every browser has default styles for different elements. For example, the way a Chrome browser will display h1 elements, in a similar way firefox won’t.

To reset the default values of any broswer we use CSS reset. There are a bunch of CSS resets, and each has their own styles. One of the most popular CSS reset is Eric Meyer’s Website.

Here is the code of CSS reset

Cascading

Within CSS, all styles cascade from the top of a style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses.

For example, say we select all h1 elements at the top of our style sheet and set their background color to blue and their font size to 24 pixels. Then towards the bottom of our style sheet, we select all h1 elements again and set their background color to red, as seen here.

h1 {
  background: blue;
  font-size: 24px;
}
h1 {
  background: red;
}

Here background: blue will replace with background:red.

Combining Selectors

By combining selectors we can be more specific about which element or group of elements we’d like to select.

Common CSS Property & Values

Colors
There are four ways to ways to apply color within CSS: Keywords, hexadecimal, RGB and HSL values. Let’s discuss all these four ways one by one.

1. Keyword Values:

The first and easiest way to specify a color is by using one of the predefined color keywords specified in CSS.

Example of using Keyword values:

body {
    background: green;
  }

2. Hexadecimal Values

A hexadecimal color is specified with #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.

.body {
    background: #FF6600;
  }

3. RGB & RGBa values
RGB colors have three values that represent: red, green, and blue, Each value can be a number between 0 and 255 or a percentage from 0 to 100%. A value of 0 means none of that color is being used. A value of 255 or 100% means all of that color is being used.

Example of using RGB values.

body {
  background: rgb(255,102,0);
}

In RGBa color the last value is alpha values, which must be a number between 0 to 1. RGBa colors are defined to provide some transparency to the colors.

Example of using RGBa Values.

body {
    background: rgba(255,102,0, 0.5);
  }

4. HSL and HSLa value

HSL stands for hue saturation and lightness. In RGB colors, we cannot change saturation and lightness of color, but in HSL, we can change. HSLA and HSL are the same, except alpha value.

Example of HSL value

body {
    background: hsl(24,100%,50%);
  }

Example of HSLa value

body {
    background: hsla(24,100%,50%, 0.5);
  }

The most widely and accepted value is the hexadecimal and RGB values.

Lengths

1. Absolute Lengths

One of the simplest length values used in CSS is the Absolute length. Few absolute lengths are pixel, centimeters, inches, etc.

h1 {
    font-size: 30px;
  }

2. Relative Lengths

The relative lengths are different from the absolute lengths as they are not the fixed unit. It relies on other units of measurement. The most common relative units are percentages, EM, REM.

body {
    width: 100%;
  } 
#heading {
    font-size: 2em;
  }
p {
    font-size: 1rem;
  }