SharePoint 2013 CSS not working in custom html page layouts

I have been customizing a SharePoint 2013 site, not in SharePoint 2010 way where we just copy paste the aspx file and edit it. I use Design Manager feature for branding the Master pages and Page layouts.

Once we create a page layout using Design Manager, a HTML file will be created. Then we open that HTML file using SharePoint Designer 2013 and edit it.

I faced an issue on editing the HTML page layout file. I wanted to hide the page title but failed !!!!!
This is what I did. I found the ID of the HTML tag and applied CSS inside the HTML page layout file.
After refreshing, I still see the page title. Because SharePoint 2013 appends CDATA where browsers ignore while rendering.

<style type="text/css">//<![CDATA[
.ms-long
{
   width: 100%;
}
//]]></style>

I tried many things and gave up. Then decided to create a page layout in SP 2010 way.
But lastly I wanted to try couple more times and found the solution.

This article helped me. https://msdn.microsoft.com/en-us/library/jj822367.aspx

In SharePoint 2013, the branding is completely different. We need to use the Design Manager Snippets. Therefore the above CSS should be rewritten as;

<!-- MS: <style type="text/css">-->
<!--
.ms-long
{
   width: 100%;
}
-->
<!-- ME: </style>-->

It worked !!!!! Happy day :)