Figuring out how the CSS of a website works using Firebug – Screencast

The basis of using Cascading Style Sheets (CSS) to apply formatting to an HTML document is deceptively easy to understand, but hard to master. You define selectors that designate HTML elements, which contains formatting rules that apply to those elements and their children. If more than one rule applies to an element, they are applied using a priority order, from the more general to the more specific: that’s where the “cascading” part comes in.

It’s almost impossible to predict how a website will look by looking at the code. If you have to modify the CSS of an application you don’t know “just” to change a color or a font size using only your text editor, you’re out of luck. Figuring out the priority of each selector is complicated if you have many stylesheets that applies to a page, and you can easily miss a more general selector. You can’t just look at an element on the page and immediately deduce which CSS rules are affecting it, especially if there are many contradictory rules.

That’s where tools such as Firebug for Firefox or the Developer Tools in Chrome comes in. Among many other great features, they allow you to see which rules are affecting a particular element on the page, and to modify them on the fly.

Of course, it won’t modify your original CSS since it only changes the local copy in your browser, but you can quickly test what’s the impact on your page and then make the modifications. You can also use those tools to explore your favorite websites and see how they used CSS to format elements: it can be a great learning tool if you’re looking to grow your CSS knowledge.

Here is a screencast on how to use Firebug to figure out where the colors are defined on the Twitter website:

Play to learn: Environments made to learn programming

Most people get started programming because it’s a lot of fun to pick something you’re curious about and start experimenting. Tinkering with code, seeing what works and what doesn’t, and fixing problems as you come across them is a great way to play with computers while learning new skills. Even if you have a lot of experience, it’s good to go back to that mindset from time to time and learn by playing around.

This is hard to do in large, mature environments, such as ASP.NET MVC or Ruby on Rails for web applications. If you want to do anything, you have to go through a long and complex setup before running your first program, and many dependencies are involved in everything working just right. Those tools are powerful, but the overhead to get started is painful if you only want to play with some code.

Fortunately, there are many environments designed for playing and learning that can help you get started quickly. You can take advantage of those tools when you have the urge to play with something new without taking on a huge commitment. Here are some of them for my favorite subjects to play with, hardware and the web:

Web environments

If you’re reading this, you already have a great environment to create applications: your web browser. You can get started building a web application with only HTML, CSS and JavaScript, and run the application directly in your browser without any further setup. You can’t save data or send emails unless you add a server-side technology, but it’s a fast and scrappy way to build a web page or even a prototype for a small web application. You can just drop the code in any cheap shared hosting if you want to publish it: it doesn’t get any easier than that.

For more complex frameworks, there are virtual machines available that you can use for a pain-free setup to play around with a language or framework. The hardest thing is that case is to fight the urge to be in full control of your editor and tools. It took me quite a while to introduce myself to Ruby on Rails because I insisted on setting up my Windows PC instead of using the environment already provided with the Ruby on Rails tutorial. I recommend that you wait until you have a first project you need to deploy before worrying about the mechanics of all of this: mastering the environment and the framework at the same time is a lot to learn just to get started.

Hardware environments

The world of hardware is great for tinkering. There is something special about being able to see the results of your efforts in the real world and not on a screen, even if it’s just flashing a LED or making some beeping noises. Playing with hardware will also teach you valuable lessons about the limitation of hardware, which will make you a better programmer.

Since building your own board just to test some hardware is complex and time-consuming, there are many learning kits available. The most popular one is the Arduino (https://www.arduino.cc/), and there are kits based on that platform to build anything from a clock to a robot. For a quick introduction to Arduino, check out Scott Hanselman’s post at The Importance of the LED Moment about the March Is For Makers project.

If you’d rather play with small computers, the Raspberry PI (https://www.raspberrypi.org) can be used to create all kinds of projects. There are many Linux operating system images you can upload directly to a SD card, such as OSMC (https://osmc.tv/download/) for a media center or RetroPie (http://blog.petrockblock.com/retropie/) for a retro gaming console. Just plug everything in your TV and you’re ready to go and tweak!

Go back to the introduction of this series : Play and learn as a software developer

Introduction to LESS : an easier way to create CSS stylesheets

In web pages, HTML elements are used to represents the content of the page, while CSS styles sets the look and feel of those elements. CSS styles works with pairs of property/value that define for example a size, a border or a color. In most cases CSS stylesheet files are created to define selectors (http://www.w3.org/TR/css3-selectors/) containing the property or group of properties that applies to the HTML elements corresponding to the selectors.  It is not recommended to apply styles directly to HTML elements since in that case they cannot be reused.

For a large web application, managing all the CSS stylesheets containing the styles for the application can get messy quickly, since only the group of properties is reusable, not the individual values of the properties.

LESS is tool that was created to help with code reuse in CSS. LESS is a CSS preprocessor: it adds new syntax on top of the existing CSS syntax. The LESS file is then used to generate valid CSS stylesheets that is used in the web page. I like to summarise it as adding variables to CSS, even if it’s more complex than that.

LESS features overview

Here is a quick overview of the most interesting features of LESS :

  • Variables : variables can be declared anywhere in a stylesheet to reuse the value anywhere in the file. Modifying the variable will then update all the places where the variable is used, which is a huge gain over the old save-and-replace. Variables can also be combined and variables containing numerical values like measurements in pixels and colors can be added, subtracted, multiplied and divided together or with constant values. Here is an example of how to use a variable :
    @large-border-size: 20px;
    @small-border-size: @large-border-size / 2;
    @small-border: @small-border-size solid black;
    
    #Container
    {
    border: @small-border;
    padding: @small-border-size;
    }
  • Mixins : mixins are a way to reuse a chunk of CSS property/value pairs in any CSS selectors. You can add any number of properties to the mixins and they can take any number of parameters. Often, they are used to group properties with vendor-specific prefixes to avoid repeating them everywhere, making your LESS file easier to read. Here is a mixin for the property user-select that indicate if the content can be selected by the user and all its vendor-specific prefixes :
    /*Mixin for user-select property*/
    
    .user-select(@select-type)
    {
    -moz-user-select: @select-type;
    -ms-user-select: @select-type;
     -o-user-select: @select-type;
    -webkit-user-select: @select-type;
            /*Property without prefix is always last to override the other if it is supported by the browser */
    user-select: @select-type;  
    }
    
    /*Using the user-select mixin*/
    #Container
    {
    background-color: black;
    .user-select(none);
    }
  • Importing: To reuse selectors, mixins or variables in multiples LESS stylesheets, you can import a LESS file in another LESS file. When a file is imported, variables and mixins of that file will be directly accessible in the stylesheet importing it. This a great feature to build a list of color or mixin that can be easily reused in any stylesheet of the application. On the other hand, I usually avoid importing files containing many selectors that way since all the selectors from the imported files will be added to the stylesheet importing it when the CSS file is generated. This can cause unnecessary duplication of styles if you’re not careful. Also, if the same CSS styles are included in different stylesheets, you will lose the benefit of browser caching to improve the page loading style and reduce the load on your server. In that case, you should simply add the additional CSS files to the web page. To import a file in LESS, simply use the import directive, for example :
    @import "colors.less"
  • Functions : Many functions are included in LESS to manipulate colors and numbers in your stylesheet. That was, you can avoid hardcoding the result of simple operations on variables of your stylesheet. For example, if you want to use a color somewhere and reuse the same color elsewhere, but it always needs to be 50% lighter, you can use the following style. If you need to adjust the base color later on, the lighter color will be updated automatically.
    @standard-background-color: #001ED5;
    
    .StandardBackground
    {
    color: @standard-background-color;
    .user-select(none);
    }
    
    .LightBackground
    {
    background-color: lighten(@standard-background-color, 50%);
    .user-select(none);
    }

Starting to use LESS

Any valid CSS file is a valid LESS file, so you can start right now with your existing projects in any language. Also, since the output of LESS files is CSS, LESS is already compatible with all browsers. There are many alternative to integrate LESS to your workflow, here are a few examples :

  • Official LESS release : LESS.js is the official version of LESS. You can use it to generate CSS files from your LESS file in the browser, which is good for test but too slow for production websites. A better option is to use to generate your CSS files on your server with Node.js, and serve only those CSS files to the client.
  • .LESS (dotless) : .LESS is a port of LESS.js which can be used in any ASP.NET project. It will generate the CSS files from the LESS files in your project and serve only the CSS files to the client, and can be integrated with the bundling and minification libraries in System.Optimization. Also Visual Studio 2012 Service Pack 3 supports LESS files : it has syntax highlighting, autocomplete and CSS file preview built in.
  • LESS compilers : There are tools in many languages to compile LESS files to CSS files. That way, you can integrate the LESS compilation to your build process, or run the compiler manually to generate the CSS files needed for your project and put those files into production.