How to include a custom CSS file in TYPO3

Question

I need to build an Extension in typo3 7.6.I include a css file in setup.txt using

page.IncludeCSS = Ext.Path_to_css_file.css

But the styles in my css file is override by some other custom styles.How can I prevent this.Any Idea? I am new to typo3.Please help me.Thank you in advance.

Solution

You have to give each css file you want to include a unique key (e.g. myCssFile1). Also use a colon after the EXT:. So the correct way of including a CSS file with TypoScript would be

page.includeCSS.myCssFile1 = EXT:my_ext/Path/to/css_file.css

Comments

[Anu Bhuvanendran Nair]

Check your TS template include section.Please try to include your extension at the very last.

[Aswathy S]

@AnuBhuvanendranNair my extension template is included very last.But it is not working

[Daniel]

the includeCSS have to be with a lower case i. I updated the answer

[Daniel]

Make sure your extension is installed, the path is correct and your identifier is unique. Then this works 100%.

[sven]

Please give us the order of your static template includes and also the generated head html with the css includes. Third, tell us what css selector is overriding what other selector.

[Welsh King]

which file in the extension do you add this ?