CSS Visibility Property

The visibility property is similar to the Display Property in CSS. The visibility property controls whether you would like the element to be displayed or not.

For Instance if you have an element which is not being displayed in the home page and you want it to be displayed, all you have to do is set the property to unset.

visibility: unset;

This removes the previous value and makes the element visible.

What you could also do this set the property to visible. Something like this-

visibility: visible;


To learn more about this property, please refer this Doc from MDN  https://developer.mozilla.org/en-US/docs/Web/CSS/visibility


This property is something which I came across while discussing with a colleague. It’s amazing how one can encounter new stuff everyday which you never really thought existed.


CSS-Default Background Property

In CSS when you are applying the background Image, the default property  is set to repeat . This means that in case the Image is not large enough to fit the entire screen, it would repeat itself until it fills the entire screen.

That property is set Internally as soon as one uses background url .

The Firebug

Firebug is a debugger tool provided by Firefox. It helps you Inspect elements and basically get to know the Html and CSS classes affecting the element.

It is very useful in case you want to make a change in the CSS like change the color of an element or increase the height. With the Firebug, one could easily get to the CSS class or ID that is affecting that element.

You can make changes on the the Firebug tool itself and instantly see how it looks like. This would not permanently make a change in your website but it would give you a preview of how the website would appear in case you would make that change.

Achieving vertical scroll using HTML

Sometimes in websites, you might have found that once you click on a link, it scrolls down to a relevant section. This is quite useful in order to guide a visitor to a specific section. It enhances the user experience.

In order to achieve this one must first create a section id. For example <section id=”work”>. Then create a link using the a href tag. Like <a href=”#work”>. Make sure that you add the I’d in the a href tag.

Now once you click on the link, it should scroll down to a particular section.

CSS in SharePoint 

SharePoint  gives us a standard look which may not seem appealing to many. It mainly uses two colors blue and white. Well some people might like the simplicity but some may not. So what can you do for the people who don’t seem to like the colors and the styles used in SharePoint? You could customize the way they want the colors and styles to be by using CSS.

CSS is more powerful than some might think. One can literally transform the whole appearance of a site by using CSS. Here is a link of a website which showcases a list of websites which only use CSS http://www.csszengarden.com/

Commenting in CSS

While writing  code there may be times when we would not want a certain part of the code to execute for testing purposes. At the same time we do not want to delete that code since we might use it later.

So normally during these kind of situations we comment the code. Each language has it’s own way for commenting.

Css has a way for commenting too! All you have to do is place this \* at the beginning of the comment and /* at the end of the comment. 

Once that is done the compiler won’t  read the portion of the code you have commented or in other words it would skip it. Whenever you want you could bring that code back to life by removing the comments. 

Just in parlance in the medical field it is just as if you are giving an anaesthesia to a patient. It numbs only a small and a specific part of the body. And this only for a timely period. After a while it will be back to normal.

CSS-Background-size: Cover

This property is used when you want to have a background  image for your website. In this case the value of the attribute is set to “cover”. 

This essentially means that the image would cover the complete width and height of the container. And in case for some reason the image and the container have different dimensions then either the top and bottom parts or the left and right parts which are not covered would be removed. And the Image would be automatically centered.