The ABCs of CSS 2: A Beginner’s Journey through Basic Properties

Photo by Ferenc Almasi on Unsplash

We discussed topics like fonts, box-model and display in the earlier blog. Today, we will discuss more about other basic topics like comments, backgrounds, border and colors.

CSS Comments

CSS Comments are not widely used as much as HTML comments, but it can be a useful feature for certain times. It starts with /* and ends with */ .

/* This is a CSS comment */
div {
color: red; /* This is a CSS comment */
}

CSS Background

With CSS, you can set images, colors or gradients as the background for your web page. You can even modify their sizes and dimensions and position them wherever you want. A few background properties in CSS are:

1. background-image : Source of background image
2. background-color : Color for background
3. background-position: Background’s image position
4. background-size: Background’s image size in units like px
5. background-repeat: How to repeat background image

These are singular background properties in CSS, but background property can be used as shorthand for all these properties.

background : [<background-image>] [<background-color>][<background-position>]/[<background-size>] [<background-repeat>]

div{
  background: url("logo.png") #efefef top left / 600px 400px no-repeat;
}

1. Colors as background

div{
  background:red;
}
p{
  background: rgb(255,0,255)
}
h1{
  background: rgba(255,0,255,0.7)
}

You can use various color notations like hex colors, rgb colors and many more which will be discussed later in this blog.

2. Images as background

body {
  background: red url("partiallytransparentimage.png");
}
.container{
  background-image: url("partiallytransparentimage.png");
  background: red;
}
.wrapper{
  background: url("https://cdn-images-1.medium.com/max/800/0*sdgL_Pr2CcCthxny");
}

For body’s background, color red is used wherever the image is transparent or if the image is not shown. For container class, background value i.e. color red overrides the background-image property. For wrapper class, remote source or link is used as source of image. For the above two items, local source is used.

CSS Colors

In our world, we give understandable names to the colors we know. But it doesn’t include all the possible colors but only the common ones. So in CSS, rather than using those names, it is preferred to use color representations like hex values, rgb value or hsl values to represent the desired colors.

1. Hex Color Values

You can visit the color picker webpage of w3schools to pick the color you want with their hex values. It provides you with hex values as well as other values. They start with “#” symbol and contains 6 characters from hexadecimal number system.

body{
  background: #e6e6e6;
  color: #asfd34;
}

2. RGB Color Values

In the same webpage, you can find the rgb value of your color, or you can convert it here. RGB simply stands for red, green and blue. Any possible color can be made by mixing red, green and blue. It takes three numeric value for respective three colors which ranges from 0 to 255.

body{
  color: rgb(0,124, 125);
}

Similarly, you can use rgba representation where a stands for alpha value which denotes the opacity of the color which ranges from 0 to 1.

body{
  color: rgba(0,124, 125,0.8);
}

3. HSL Color Values

In the same webpage, you can find the hsl value of your color, or you can convert it here. HSL simply stands for hue, saturation and lightness. It takes three numeric values for respective three parameters. The value of hue ranges from 0 to 360 where 0 or 360 is red, 120 is green and 240 is blue while values of saturation and lightness ranges from 0% to 100%.

body{
   color: hsl(0, 50%, 50%);
}

Similarly, you can use hsla representation where a stands for alpha value which denotes the opacity of the color which ranges from 0 to 1.

body{
  color: hsla(0, 50%, 50%,0.7);
}

These three types of color representation are widely used in CSS, but other representation like cmyk, hwb, ncol, etc.

CSS Borders

We have discussed the border topic a little bit in the box model section in the earlier blog, but properties of CSS border will be discussed here:

1. border-radius : It takes up to 4 values in units like px to change the default box model of the element.
2. border-style: It takes keywords like dotted, dashed, solid or none as parameters to style the borders.
3. border-color : Defines the color of the border.
4. border-width : Defines the width of the border.

Similar to background property, all these properties can be used as one using shorthand border property.

/* 
  border: size style color; 
  border-radius: top-left top-right bottom-right bottom-left; 
*/

div{
  border: 2px solid red;
  border-radius: 20px 40em 50% 60rem;
}

Today, we discussed CSS properties like comments, background, borders and colors which are major concepts in CSS. In the next blogs, similar major topics and concepts will be discussed.