What is CSS
CSS (Cascading Style Sheets) is the language that controls how your WordPress website looks and feels. While WordPress themes handle most styling automatically, understanding basic CSS can help you customize your site’s appearance beyond the default options.
CSS works by targeting HTML elements and applying visual properties to them. For example, you might change text color, adjust spacing, or modify fonts. The “cascading” part means styles flow from general to specific – more specific rules override general ones.
In WordPress, you can add custom CSS through the Customizer (Appearance > Customize > Additional CSS) or in a block theme By editign the styles section of the . The Customizer is safer for beginners since changes won’t be lost when updating themes.
Basic CSS structure follows this pattern:
selector {
property: value;
}
For example
h1 {
color: blue;
font-size: 24px;
}
For the most part you will not often need to use custom css in glow blogs. Especially with the block editor you can edit a lot of the styles in the settings sidebar.
How to use CSS in glow blogs
You first have to turn on css in the Dashboard -> Settings -> General page of the dashboard.
remember to Save.
Editing in Classic Themes
If you are using a classic theme you access the Additional CSS via the customiser. When loged on to your site you will see a link to customizer in the Admin toolbar. Click that and you should see Additional CSS in the left hand sidebar that opens. Clicking that will allow you to edit the CSS.
Edit in the Block Theme
If you are using a block theme you can access the additional css in the Site Editor.
- Choose Appearance » Editor from your WordPress dashboard.
- In the left-hand menu, click on ‘Styles’.
- You will see the ‘Styles’ panel for your site as well as your page preview.
- Click on the preview to open the block editor.
- Click on the ‘Styles’ icon. It looks like a circle that’s half-black and half-white.
- Select ‘Additional CSS.’
You will also the styles menu when editing any template in the site Editor.
Examples
We use this on the help site to centre our content on larger monitors.
.site {
margin: 0 auto;
}
More details:
Snippet to get rid of auto hyphens in the TwentyFourteen theme:
.entry-content,
.entry-summary,
.page-content,
.nav-links,
.comment-content,
.widget
{
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
This snippet will change the menu and post titles from ALL caps to title case on TwentyFourteen.
.site-navigation, .entry-title, .entry-header a {
text-transform: capitalize;
}
.site-navigation a {
text-transform: capitalize;
}
You can find out more about CSS:
CSS | MDN
It might be a good idea to remember that the theme developers know a lot about design and CSS before changing things too much.
