Categories
CSS HTML

How to make HTML page footer stay at bottom of the page using CSS?

In our application or project, if the pages has less content or data, then the page footer will come up and it will not look good. Earlier to overcome this problem we need to do some work around with CSS or we have write custom java-script/jQuery code. After the introduction of Flexbox its very simple to do this. 

How to make HTML page footer stay at bottom of the page using CSS?
Categories
CSS HTML

How to Center align div vertically using css?

During the early days of HTML development, to vertically center align a div or an element we used lots of methods or technique to achieve this. We used CSS position property in some cases and in some cases to do it in dynamically we used JavaScript to vertically align a div or an element. But in modern Flex-box solution it is the easy to do this. Just by using CSS ” justify-content: center” to the parent element to align the content to the center (vertically) of it. Most of the modern browser supports this CSS property.

How to Center align div vertically?
Categories
CSS HTML Jquery

Adding space/padding between options of select tag in IE browser

By using css properties we can add space in between options of a select element and it will work well in browsers like Firefox and Chrome. However, it will not work in IE. We can’t style “<option>” elements in Internet Explorer with most of the css properties. Only background and font color property will work in IE other proprties will inheritfrom the Windows operating system.

Adding space/padding between options of select tag in IE browser
Categories
CSS HTML

Vertically align text next to an image with CSS

If we have image follwed with text and need to be aligned verically, we can do this by simply setting “vertical-align:middle;” to image or we can use css property flexbox for this type of layout. Most of us will struggle with the middle aligment of images with text.

Vertically align text next to an image with CSS
Categories
CSS HTML

Change HTML placeholder text color

To change the text color of the HTML placeholder we can use ::placeholder css property. Most of the modern browsers support this pseudo-class. But still it requires some separate rules for each browsers.Here are the ways to declare css for different browsers

Change HTML placeholder text color
Categories
Background CSS

CSS background shorthand property

The background shorthand property is a method to specify the values of multiple CSS background properties all together. Shorthand properties is a CSS property that allow you set all values together. Using a shorthand property, you can write more accute style sheets.