Time for action – composing the website styles with LESS syntax

Perform the following steps to style the website:

1. Add a new font family from Google Font. Herein, I opted for Varela Round (http://www.google.com/fonts/specimen/Varela+Round). Place the following Google Font link before any other style sheets:

   <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>

2. We will customize the default styles by changing some variables. Open var-bootstrap.less in Sublime Text. First, we change the @brand-primary variable that defines the Bootstrap primary color; change it from #428bca to #46acb8:

   

3. Also, change the color in the @brand-success variable from #5cb85c to #7ba47c:

   

4. Change the @headings-font-family variable, which defines the font family used in the headings, from inherit to "Varela Round", as follows:

   @headings-font-family: "Varela Round", @font-family-sans-serif; 

5. The Bootstrap default style shows a glowing effect when the user focusses on a form...