What is Custom CSS?
CSS (Cascading Style Sheets) controls how your website looks. Custom CSS lets you modify colors, fonts, layouts, and more without changing theme files.
3 Methods to Add Custom CSS
🎨 WordPress Customizer
Best for: Beginners
- Easy to use
- Live preview
- No coding required
- Safe changes
📁 Child Theme
Best for: Advanced users
- Permanent changes
- Update safe
- Full control
- Professional method
🔌 CSS Plugin
Best for: Everyone
- Easy management
- Backup features
- Multiple styles
- No theme dependency
Method 1: WordPress Customizer
- 1 Go to WordPress Admin
Navigate to Appearance → Customize
- 2 Find Additional CSS
Look for "Additional CSS" in the customizer menu
- 3 Add Your CSS
Type your custom CSS code in the text area
- 4 Preview and Publish
See changes live, then click "Publish" to save
/* Example: Change heading color */
h1, h2, h3 {
color: #ff9500;
}
/* Example: Style buttons */
.btn {
background: linear-gradient(135deg, #ff9500, #ff6b35);
color: white;
padding: 1rem 2rem;
border-radius: 25px;
border: none;
}
Method 2: Child Theme (Recommended)
- 1 Create Child Theme Folder
Create folder: /wp-content/themes/your-theme-child/
- 2 Create style.css
Add CSS header and your custom styles
- 3 Create functions.php
Enqueue parent theme styles properly
- 4 Activate Child Theme
Go to Appearance → Themes and activate
/*
Theme Name: Your Theme Child
Description: Child theme of Your Theme
Template: your-theme
Version: 1.0
*/
/* Your custom CSS here */
body {
font-family: 'Arial', sans-serif;
}
.custom-button {
background: #ff9500;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
Common CSS Examples
🎨 Colors and Branding
/* Change primary colors */
:root {
--primary-color: #ff9500;
--secondary-color: #232f3e;
}
/* Header background */
.header {
background: linear-gradient(135deg, #232f3e, #37475a);
}
/* Link colors */
a {
color: var(--primary-color);
}
a:hover {
color: #ff6b35;
}
📝 Typography
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
font-weight: 700;
color: #232f3e;
}
📱 Mobile Responsive
/* Desktop styles */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Tablet styles */
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 2rem;
}
}
/* Mobile styles */
@media (max-width: 480px) {
.container {
padding: 0 0.5rem;
}
h1 {
font-size: 1.5rem;
}
}
Lion Social Share Styling
Customize Lion Social Share plugin buttons:
/* Style Lion Social Share buttons */
.lion-social-share {
display: flex;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
}
.lion-social-btn {
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s ease;
border: none;
}
.lion-social-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/* Custom Lion theme colors */
.lion-social-lion .lion-social-btn {
background: linear-gradient(135deg, #ff9500, #ff6b35) !important;
}
⚠️ Important Tips
Always backup your website before making changes. Test CSS on a staging site first. Use browser developer tools to test changes before applying them.
Troubleshooting CSS
CSS Not Working?
- Check syntax - Missing semicolons or brackets
- Specificity - Use more specific selectors
- Cache - Clear browser and plugin cache
- Browser tools - Use F12 to inspect elements
Common Fixes
/* Force CSS with !important */
.my-element {
color: #ff9500 !important;
}
/* More specific selector */
body .site-content .my-element {
background: white;
}
/* Clear floats */
.clearfix::after {
content: "";
display: table;
clear: both;
}
LionWP 
Limited-Time Offer