Beginner
How to embed custom CSS code on Hostinger
Quick Answer
You can embed custom CSS on Hostinger through your website's admin panel (WordPress/CMS), by editing theme files via File Manager, or by creating a separate CSS file and linking it to your HTML. The method depends on your website platform and technical preferences.
Prerequisites
- Active Hostinger hosting account
- Basic understanding of CSS
- Access to your website's admin panel or file manager
1
Access your Hostinger control panel
Log into your Hostinger account and navigate to the Hosting section. Click Manage next to your domain name to access the hosting control panel.
Tip
Bookmark your hosting panel URL for quick access in the future.
2
Choose your CSS embedding method
Decide whether to add CSS through your CMS admin panel (easiest), File Manager (direct file editing), or by creating a separate CSS file. For WordPress sites, the admin panel method is recommended for beginners.
3
Method 1: WordPress admin panel (recommended)
If using WordPress, access your WordPress admin dashboard and go to Appearance > Customize > Additional CSS. Paste your custom CSS code in the text area and click Publish to apply changes.
Tip
Use the live preview feature to see changes before publishing.
4
Method 2: Edit theme files directly
In your Hostinger control panel, open File Manager and navigate to
public_html/wp-content/themes/your-theme-name/. Edit the style.css file by clicking the Edit button and adding your custom CSS at the bottom.Tip
Always backup your original style.css file before making changes.
5
Method 3: Create a separate CSS file
In File Manager, navigate to your website's root directory and create a new file called
custom.css. Add your CSS code to this file, then link it in your HTML head section using <link rel="stylesheet" href="custom.css">.6
Method 4: Add inline CSS to HTML
For specific pages, edit the HTML file in File Manager and add your CSS within
<style> tags in the head section, or use inline styles with the style attribute directly on HTML elements.Tip
Inline CSS has higher specificity but is harder to maintain across multiple pages.
7
Test your CSS changes
Visit your website in a new browser tab or incognito window to see the applied changes. Use Ctrl+F5 (or Cmd+Shift+R on Mac) to hard refresh and clear any cached CSS files.
Tip
Check your website on different devices and browsers to ensure compatibility.
8
Optimize and validate your CSS
Use browser Developer Tools (F12) to inspect elements and debug CSS issues. Consider minifying your CSS code for better performance and validate it using online CSS validators.
Tip
Keep your custom CSS organized with comments to make future edits easier.
Troubleshooting
CSS changes not appearing on the website
Clear your browser cache with
Ctrl+F5 and check if your website has caching enabled in the Hostinger control panel. Disable caching temporarily to test changes.CSS file not loading or 404 error
Verify the file path in your
<link> tag is correct and the CSS file exists in the specified directory. Check file permissions are set to 644 in File Manager.Custom CSS being overridden
Increase CSS specificity by using more specific selectors or add
!important to your CSS rules. Check if other stylesheets are loading after your custom CSS.File Manager showing permission errors
Ensure you have proper file permissions. Right-click the file in File Manager, select Permissions, and set appropriate permissions (typically
644 for CSS files).Ready to get started with Hostinger?
Put this tutorial into practice. Visit Hostinger and follow the steps above.
Visit Hostinger →