{"id":6123,"date":"2025-09-10T09:17:52","date_gmt":"2025-09-10T09:17:52","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/glowbloghelp\/?page_id=6123"},"modified":"2025-09-10T09:30:58","modified_gmt":"2025-09-10T09:30:58","slug":"css","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/glowbloghelp\/how-to\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"\n
What is CSS<\/summary>\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Basic CSS structure follows this pattern:<\/p>\n\n\n

\nselector {\n    property: value;\n}\n<\/pre><\/div>\n\n\n
For example<\/p>\n\n\n
\nh1 {\n    color: blue;\n    font-size: 24px;\n}\n<\/pre><\/div><\/details>\n\n\n\n
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.<\/p>\n\n\n\n
How to use CSS in glow blogs<\/h2>\n\n\n\n
You first have to turn on css in the Dashboard -> Settings -> General page of the dashboard.<\/p>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
remember to Save.<\/p>\n\n\n\n
Editing in Classic Themes<\/h2>\n\n\n\n
If you are using a classic theme<\/strong> you access the Additional  CSS via the customiser. When loged on to your site you will see a link to customizer<\/em> 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. <\/p>\n\n\n\n
Edit in the Block Theme<\/h2>\n\n\n\n
If you are using a block theme<\/strong> you can access the additional css in the Site Editor. <\/p>\n\n\n\n
    \n
  1. Choose Appearance \u00bb Editor from your WordPress dashboard.<\/li>\n\n\n\n
  2. In the left-hand menu, click on \u2018Styles\u2019.<\/li>\n\n\n\n
  3. You will see the \u2018Styles\u2019 panel for your site as well as your page preview.<\/li>\n\n\n\n
  4. Click on the preview to open the block editor.<\/li>\n\n\n\n
  5. Click on the \u2018Styles\u2019 icon. It looks like a circle that\u2019s half-black and half-white.<\/li>\n\n\n\n
  6. Select \u2018Additional CSS.\u2019<\/li>\n<\/ol>\n\n\n\n
    You will also the styles menu when editing any template in the site Editor.<\/p>\n\n\n\n
    Examples<\/h2>\n\n\n\n
    We use this on the help site to centre our content on larger monitors.<\/p>\n\n\n
    \n.site {\nmargin: 0 auto;\n}\n<\/pre><\/div>\n\n\n
    More details:<\/p>\n\n\n\n
    \n
    Centre Your TwentyFourteen site<\/a><\/blockquote>