How CSS Position Properties work?

Position properties in CSS

Position is an essential CSS property for control the positioning of layout elements.

Static Position

All the HTML elements are always positioned to the normal flow of web page. Simply we can tell like default position.

Relative Position

An element with relative CSS property is always positioned relative to its normal (existing) position.

CSS relative position

Absolute Position

An element with absolute CSS property is always positioned relative to its parent element which has relative property.

CSS absolute position

If no parent element which has position property, it is always positioned relative to the document body. When page is scrolled, absolute element will move along with page scrolling.

CSS absolute position demo

Fixed Position

An element with fixed CSS property is always positioned relative to the viewport, it means it stays in the same position even if the page is scrolled.

CSS fixed position

Continue Reading

How CSS Display Property works?

Display Properties in CSS

Display is an essential CSS property for controlling layout structure / content.

Display: block

An element with CSS block property, it starts on a new line and stretches to the full width of row from left to right end.

Default block level elements:

  • div
  • ul
  • p
  • header
  • footer
  • section
  • fieldset
  • h1 to h6
  • table… etc

Display: Inline

An element with inline CSS property, it starts on a same existing line without any line break and wrap some text inside it without disrupting flow of row. It just starts on a same existing line and stretches to the text content size. It cannot have a width and height set.

Default inline elements:

  • span
  • a
  • strong
  • img
  • label
  • input
  • select
  • textarea
  • button
  • sub, sup… etc

Display: inline-block

An element with inline-block CSS property, it is positioning as an inline element but it behaves as a block element with defined width and height properties.

CSS Position properties

Display: flex

Flex layout provides an efficient way to alter its items dimension (width and height), align, distribute space among elements within the document.A flex container expands items to fill available free space, or shrinks them to prevent overflow.

To learn more about flexbox, please access the below link.
http://flexbox.help/

Display: table

An element with table CSS property will acts as a table layout.

Display: none

An element with a none CSS property will hide the element from view.

Display: inherit

An element with an inherit CSS property will apply the parent properties to child element.

Continue Reading

What are the best practices of CSS coding?

Best Practices of CSS Coding

  • Organize your code with proper comments.
  • Use the <link> tag to include all your style sheets in the <head> of the document.

Don’t use @import.

@import directive is much slower than the other way to include style-sheets into a html document.
This will fire an additional HTTP request and block page rendering until its completion.

Specificity of CSS

The ID is the most specific selector, since it can only match one element, and the class is a close second. Use those whenever possible rather than HTML tag names.

/* BAD */
button#back-button { … }
.popular ul li a { … }
.popular > ul > li > a { … }

/* GOOD */
.back-button { … }
.popular-link { … }
.unpopular-link { … }

When using vendor prefixed features, put the standardized rule at the end to ensure browsers optimize and use the standard if they recognize it.
Example:
.thing {
-webkit-transition: all 100ms;
transition: all 100ms;
}

Avoid !important

Avoid using the !important keyword. Treat it like the nuclear option, only to be used in the most extreme of cases. This fundamentally destroys the specificity feature and can even break accessibility for some users.

Developers in the future who are either trying to debug a styling issue, or trying to use normal specificity to override a style for a particular element only to find that they can’t.

Formatting of CSS

  • Use a new line for every selector and every declaration.
  • Use a single space before the opening brace in a set of rules.
  • Use lowercase for elements and shorthand hex values, e.g., #aaa.
  • Hyphenate class selector names; avoid underscores and camelCase
  • Use one level of indentation for each declaration.
  • Add a single space between the property and value.
    Example:
    prop: value; and not prop:value;
  • Always include a semi-colon at the end of the last declaration.
  • Naming convention should be followed.
  • Use shorthand. padding: 15px 0; and not padding: 15px 0px 15px 0px;
  • Avoid units on zero values.

CSS File Handling:

  • Use multiple style sheets, but be aware of them expanding beyond control.
  • Not include unused style rules.
  • Offer a clear place for new styling going forwards
  • Not be a drag in page loading performance
Continue Reading

Apply transparent background to element, but not the inside text content.

Apply CSS opacity (transparent) to the background only

To overcome this issue, We have to use rgba value property for parent element.

Syntax
background: rgba(red, green, blue, alpha value(opacity));

CSS


  .demo{
   background: rgba(81, 91, 162, 0.8); 
 }

Demo

See the Pen Apply CSS opacity (transparent) to the background only by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Compatibility issue in IE:

Opacity property is not supported in IE older version browsers. We can use CSS3 PIE approach to overcome this cross browser issue.

Continue Reading

Some specific CSS uses

Removing dotted outline when href link is selected

Below CSS lines used to removing default dotted outline when link is selected.


a, a:hover, a:active, a:focus {
  outline:0;
}

Draw a diamond shape using CSS3

After creating square shape using HTML elements like div or span then apply CSS3 transform property.


.square-shape{
  transform: rotate(45deg);
}

Changing Cursor Selection color

The below CSS codes are used to change the cursor selection background color in different browsers.


/* Mozilla based browsers */
selector::-moz-selection {
background-color: #FF68B0;
color: #000;
}
/* Works in Safari */
selector::selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Opera */
selector::-o-selection {
background-color: #FF68B0;
color: #FFF;
}
selector::-ms-selection {
background-color: #FF68B0;
color: #FFF;
}
/* Works in Internet Explorer */
selector::-webkit-selection {
background-color: #FF68B0;
color: #FFF;
}

Note:
Selector would be any class name, ID name or element name.

Continue Reading

Useful CSS hacks for specific browsers

browser specific CSS hack codes

IE-10

// eg: margin-top:10px\9;

CSS hack for IE-11

// eg: @media all and (-ms-high-contrast:none){ }

CSS hack for Chrome

// eg: @media screen and (-webkit-min-device-pixel-ratio:0) { }

CSS hack for Safari


@media screen and (-webkit-min-device-pixel-ratio:0) {
   ::i-block-chrome, .footIcon{
     width:25% !important;
} 
}

Adding browser specific prefix:

Prefix for Mozilla

// eg: -moz-transform: rotate(90deg);


@-moz-document url-prefix() {
  .logo {
     width:300px;
   }
}

CSS hack for Microsoft Edge browser


@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Prefix for Chrome and Safari

// eg: -webkit-transform: rotate(90deg);

Prefix for IE

// eg: -ms-transform: rotate(90deg);

Prefix for Opera

// eg: -o-transform: rotate(90deg);

Continue Reading

When scroll down change the header position to be fixed.

When scroll down change the header position properties


 function init() {
    window.addEventListener('scroll', function(e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 100,
        header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller"); // add class name when page scrolls
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

Explanation:
When we scroll down, class smaller will add in header element. So, we can set the position: fixed property to smaller class. Otherwise smaller class will be removed.

Continue Reading

Change the background color of table row when select a checkbox

Change the background color of table row by checking checkbox using Jquery

Script:


 $(function() {
    $('td:first-child input').change(function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
});

Explanation

  • Change method is used to identify the event change of checkbox.
  • We can set some CSS properties to class name ‘highclass’ for changing the background color.

Demo

See the Pen Change the background of table row when select a checkbox by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

How to change the background color of odd and even rows?

Change the background color for odd and event rows using Jquery

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.

Script:


  $(function(){
   $('table tr:even').addClass('even');
    $('table tr:odd').addClass('odd');
});

Explanation:

By using odd and even classes we can set the required background color using CSS.

Demo

See the Pen Change the background color of add and event table rows by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading