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. 

Lobotomized Owl Selector

The Lobotomized Owl selector is one of the most powerful but underused selectors in CSS. It was introduced quite recently by Adjacent Pickering in June 2014.

The characters used for the selector resemble a blank stare of the owl and hence it’s name. It is represented as

*+*

The plus sign is the Adjacent sibling selector which refers to any term or element that is positioned next to it. I have written a blog post quite recently on that.

Let’s try to dissect each part of the selector and analyze what it means. As we know the browser reads CSS from right to left. So let’s begin that way. The first term that we come across is the ‘*’ . The ‘*’ itself is a selector in it’s own capacity. It is quite commonly known as the Universal Selector. It can basically select everything in the CSS domain which includes classes , Id’s etc.  The next element is the plus sign which we discussed a little while ago, the Adjacent sibling selector. And the last term is again the Universal Selector.

Now let’s combine all of them an see what it means. So once you join them, or would be something like this  ‘Everything before Everything’. This basically means that it can be used or applied anywhere in the CSS stylesheet since it has got an infinite domain.

Hopefully by now you have got a broad understanding of what it means.