I am working on responsive website that has 100's of pages. It is implemented using a CMS. The problem is, I need to apply some styling only for homepage.
It is a bit cumbersome to add a class or id in the CMS for one page as it uses templates to render pages.
I've added the css in the head section. The reason why I don't want to add in external file is beause the same id might be used on some other page.
Is adding CSS in head section a bad practice in this case.
<head>
<style>
//my css
</style>
</head>
<body>
</body>
Thanks
It's perfectly fine to have inline CSS. Whether you should use inline CSS or simply set a unique ID for the page depends on the complexity and flexibility of the CMS you're using. Using inline CMS just means that you'll have to update the CSS from each individual page, rather than from a single source for all separate pages.
As for your second point, adding CSS to the head in a <style> tag is not bad practice. In fact, <style> is required to be a child of <head> in order to validate correctly. According to the HTML 5.2 specification, <style> can be a child of any element as long as it it scoped, though at the present date, Firefox is the only browser that can use the scoped attribute.
On top of this, using a <style> tag in the <body> could lead to a flash of unstyled content due to the way in which the page gets loaded. So if you use inline CSS, always do so in the head to both validate correctly, and improve user experience :)
Hope this helps!