i
Search icon

Learn HTML and CSS in 10 Days

Self Learning   /   Study Material   /   Common CSS Properties
Previous
Next

Common CSS Properties

We have used several CSS property values above such as the colour values, i.e. green, red and orange. Now in this section, we are going to learn some previously used property values as well as will be learning new ones. Mainly we are going to look on properly values that are linked with colour as well as length measurements.

Colours

Every colour used in CSS is characterized by an sRGB (standard red, green and blue) colour space. Other colours can be generated by mixing red, green and blue together, in the same manner as done by monitors and television. By doing so, we can make millions of colour. 

Presently there are four fundamental ways to represent sRGB colours in CSS. They are by keywords, by hexadecimal notation, by RGB values and by HSL values.

Keyword Colors

In simple words, Keyword colour values are names that point a particular colour. The CSS controls these keyword names and their comparing hues. Let's take an example of this.

mask {

  background: green;

}

.last {

  background: orange;

}

In the above code, we are providing a green background to an element with 'mask' class attribute value and an orange background is assigned to any element having 'last' as class attribute value.

The way of assigning colour using the Keyword colour values is simplest. They provide the user with a limited option and is not a right colour value choice to use.

Hexadecimal Colors

Hexadecimal colour values contain a hash (#) sign which is followed by 3 to 6 character figure. The figures are made up of letters from a to f (both lowercase and Uppercase) and numbers from 0 to 9. The values point to red, green and blue colours.

In the 3 figure notation, the 1st character refers to the red channel, the 2nd one refers to the green channel, and the last one refers to the blue channel. In the 6 figure notation, the 1st two refers to the red channel, 3rd and 4th refer to the green channel, and the leftover figure (5th and 6th) refers to the blue channel.

If you have got a 6 figure notation where the first two characters are a matching pair, the 3rd and 4th is also a matching pair, and the last two is also a matching pair then that 6 figure notation can be converted to a three-character notation. To form it use the repeated character once. Let's say; #ff6600 represents an orange colour in hexadecimal colour. This can also be written as #f60.

These character pairs can be found out by changing over 0 through 255 into a base-16. The math is somewhat dubious—and deserving of its book—however, it realizes that 0 equivalents black and f is for white.

.task {

  background: #800000;

}

.count {

  background: #ff0;

}

Thus, the hexadecimal code for maroon is #800000, and that of yellow is #ff0. So putting them as the property value will help us to get that colour.

Hexadecimal colour is a popular way of expressing colour in CSS as they provide the developer with a lot of options. But still, they are a bit hard to use, especially if you have no idea regarding it. Luckily Adobe has made Adobe Kuler, a free application that gives a shading wheel to assist us with finding any shading we need and its compared hexadecimal value. Also, most picture altering applications, for example, Adobe Photoshop, give the capacity to find hexadecimal shading values.

RGB & RGBa Colors

RGB value colours are assigned using the rgb() functions (Red, Green and Blue). The mentioned function takes three inputs separated by a comma. The inputs are only integers from 0 to 255. A value of 255 is pure white, while a value of 0 is fully black.

It is understood that the first value in the rgb() function is for the red channel, the 2nd one is for the green channel and the 3rd one is for the blue channel.

If you want to make an orange color, then it should be rgb (255, 102, 0).

.task {

  background: rgb(128, 0, 0);

}

.count {

  background: rgb(255, 255, 0);

}

RGB color values might also contain an transparency, or alpha, by utilizing the rgba() function. The rgba() need one more value which is a number between 0 and 1(decimals included). 0 creates a full transparent color (invisible) while 1 creates an opaque color. Any decimal value will create a semi-transparent color.

Suppose you want a 50% opaque orange colour then you can write as – rgba(255, 102, 0, .5).

Example -

.task {

  background: rgba(128, 0, 0, .25);

}

.count {

  background: rgba(255, 255, 0, 1);

}

Now a days this RGBa feature is getting very much popular.

HSL & HSLa Colors

HSL colour value is given using the hsl() function (Hue, Saturation, and Lightness). The function takes in 3 values separated by commas just like rgb().

The 1st value, i.e. Hue, is a number from 0 to 360. The numbers 0 through 360 defines the shading wheel.

The 2nd and the 3rd value are for saturation and the lightness, respectively. They are represented as a percentage from 0 to 100. Here 100 per cent means the colour is fully saturated, and 0 means the colour is entirely black. Same way 0, as the lightness value, says that the colour is entirely black and 100 per cent says that the colour is white.

Example –

.task {

  background: hsl(0, 100%, 25%);

}

.count {

  background: hsl(60, 100%, 50%);

}

HSL color values might also contain an transparency, or alpha, by utilizing the hsla() function. The hsla() need one more value which is a number between 0 and 1(decimals included) which identifies the degree of opacity.

Example -

.task {

  background: hsla(0, 100%, 25%, .25);

}

.count {

  background: hsla(60, 100%, 50%, 1);

}

In the above code 0.25 denotes a 25 percent opacity while 1 denotes 100 percent opacity.

Lengths

There are several values for length, and all of them are used for different purpose. The values of length can be categorized into two types, one is absolute, and the other one is relative. We're going to adhere to the most typical—and increasingly clear—values right now, as progressively complex qualities will give substantially more power than we require for now.

Absolute Lengths

Absolute length values are one of the most straightforward values as they refer to physical measurements like centimetres, inches or millimetres. The most common unit of measurement which comes under this category is pixel which is represented by px notation.

Pixels

An inch is made up of 96 pixels. The definite estimation of a pixel may fluctuate somewhat between low density and high-density gadgets. Example –

p {

  font-size: 14px;

}

In the above code the paragraph has a pixel size of 14px.

Pixels have lost most of its popularity only because of devices coming with varying screens. As they are an absolute unit of measurement, they do not offer much-needed flexibility. If you are getting started with HTML, then the pixel is excellent to use.

Relative Lengths

Relative length values are somewhat more confounded, as they are not a fixed units of estimation; they depend on the length of another estimate.

Percentage

Percentage is one of the most popular relative values. Percentage lengths are characterized in connection to the length of another object. Let’s suppose to provide a width of 50 per cent to an element; we need to know the breadth of its parent element within which it is nested.

Example -

col {

  width: 50%;

}

Em

The unit of em is also a popular one. It is represented by 'em', and the length is determined using the font size of the element.

A single em is said to be equivalent to the font size of an element. Let’s say that the element’s font size is 14 pixel and has a width of 5em then the width is equal to 70 pixels (14 X 5).

Example –

.banner {

  font-size: 14px;

  width: 5em;

}

Apart from the above mentioned absolute and relative units of length, CSS has a lot more options. But pixels, percentage and em units are used the most.

© All rights Reserved | SelfLearning.io