A Few Notes on CSS

There are always some interesting problems that everyone encounter while working with CSS. The following are a couple of issues that I had to deal with back when I was first learning CSS.

The Spacing problem

I remember how tedious it was when I was first trying to position elements in a navigation. I couldn’t make <li> elements to sit next to each other without any space in between:

<li>link 1</li>
<li>link 2</li>
<li>link 3</li>


Could it be that I’m using the display property inaccurately?. Did I add extra margin without paying attention?. Is there some weird rule in my CSS reset file that is causing this?. Nope!. At that point I was very confused and was like:

After some digging I found this great article by Chris Coyier on CSS Tricks that explains the problem in details and offers great solutions. It turns out that all text and images on the web are rendered by default as inline elements with spacing around them. The browser interprets the spaces between elements displayed inline and inline-block just like it does with spaces between words. It also adds whitespaces for line breaks in HTML files, and that’s where the problem lies.

This is very an important benefit since putting space between letters is the only way that text can be readable on any webpage. However, this behavior is not beneficial when we attempt to align list elements.

The Solution:

There is more than a couple of solutions for this issue. Setting the display property to flex is solution seem to work well and produce the predictable result:

ul {
display: flex;

However, this solution will work on modern browsers. for legacy browsers, there are various hacks that will get the job done :

 // don't use a closing tag

// don't use whitespace 

// put line break inside the closing tag

// negative margin-left value. 
// using negative margin values is not recommended for building
// responsive design
li {
margin-left: -4px

Overriding Bootstrap

I remember how excited I was the first time I used Bootstrap. I also remember how much of a nightmare it was when I tried to combine Bootstrap with the CSS rules in my external file. I couldn’t set the width or padding for some elements. I couldn’t even set the background-color for the body tag. After some research I realized that Bootstrap declarations were taking precedence over mine, and that there few solutions for this issue:


the !important declaration changes the rules for override priority of CSS rules. It basically overrides any declarations that comes after it. Putting !important after a CSS declaration will give it the highest precedence of all precedence including Bootstrap preset declarations:

<div class="my-class" ></div>
.my-class {
background-color: green !important;

While this technique works, it is probably not the most effective solution since you will have to use it everytime there is a similar conflict. It also will make debugging harder as the your application grow and as your CSS become complex.

Order Of Files

Another solution is to put your stylesheet file after the Bootstrap file. That way your rules will always take precedence:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">

Customize Bootstrap

Instead of using the Bootstrap minified file or downloading the entire bootstrap framework to your machine, use a customized version and avoid classes, you don’t need, that will create a conflict with your CSS file. This can be done be going to the bootstrap customize and download page and choosing the specific files you wish to download and use for your project.

overriding Bootstrap with a preset ID

This can be done by setting an id on a root element and using it to target child selectors that can be compromised by bootstrap rules:

<body id="override-bootstrap">
/* selector defined in Bootstrap */
.jumbotron h3 { /* 10+1=11 priority scores */
  color: #242729;

/* Your initial styling will not override Bootstrap */
h3 {
color: #ffffff;

/* using ID to target selector gives your rule precedence */
#override-bootstrap h3 {
color: #ffffff;

Element Visibility

When you are trying to hide elements with CSS, it common to switch between the visibility and display properties not knowing that each technique produces a different result. When you use visibility: hidden, the element is not visible, but it still occupies space in the layout. When you use display: none, the element is invisible, but does not take up any space in the layout:

/* element removed from the workflow and subsequent elements will fill in the space left by the element
h1 {
display: hidden
/* element invisible but occupies its own space. 
h1 {
visibility: hidden

There are other ways to hide an element with CSS. However, they each come with undesired side effects. Using the opacity property is one of these methods:

h1 {opacity: 0}

Setting the opacity to zero will hide the element but just like the {visibility: hidden} rule, the element will retain its own space on the page. Also, the element will not be hidden from screen readers and instead will be interpreted as visible like any other element on the page. Try using MouseOver or NVDA and hover over the area were the hidden element is. You will see that the element is read like any other element within the view port.

You can check out my website and portfolio projects here, follow my coding journey here on Medium, or find me on GitHub and Facebook.