{"title":"Using CSS with content blocks","slug":"using-css-with-content-blocks","url":"https://support.storeconnect.com/articles/using-css-with-content-blocks","url_markdown":"https://support.storeconnect.com/articles/using-css-with-content-blocks.md","subtitle":null,"summary":"Target and style content blocks, pages, and articles using CSS selectors based on their unique identifiers, with examples for overriding default StoreConnect CSS classes.","type":"Help_Documentation","video_url":"","keywords":"css selectors, content blocks, custom css, css styling, content block identifier, page selectors, article selectors, override css, css classes, theme customization, css specificity, site styling","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"**Related help documents**\n\n-   [Customize a theme using CSS](custom-theme-css)\n-   [Adding custom CSS](adding-custom-css)\n\nFor users wanting more flexibility and customisations for their store, there are CSS selectors that allow users to select content blocks, child content blocks, and other elements for full styling with your own custom CSS.\n\nThe StoreConnect system allows custom CSS and JavaScript throughout your store. For CSS implementations, we strongly recommend methods highlighted in this article: [Adding custom CSS](adding-custom-css).\n\nTo select content blocks for styling, each has its own unique identifier that can be used to select the elements and apply styles to them.\n\nThe identifier is user generated and specified underneath the Content Block Name, as you can see here:\n\n![Contact Block Identifier](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677721/documentation-media/content-blocks/content-block-id.png)\n\n \n\n### Using the content block ID as a CSS selector\n\nIn your custom CSS Field, you can simply insert your unique identifier into the following code\n`SC-ContentBlockContainer-{identifier}` to select and style your Content Block.\n\nFor example:\n\n```\n#SC-ContentBlockContainer-main-cta {\n   max-width: 1200px;\n   margin: 0 auto;\n}\n```\n\nIf you need to apply the same style to multiple Content Blocks - you can aggregate selectors for the styles to be applied.\n\nThis could be achieved as follows:\n\n```\n#SC-ContentBlockContainer-main-cta, #SC-ContentBlockContainer-main-info,\n#SC-ContentBlockContainer-secondary-cta, #SC-ContentBlockContainer-main-new {\n   max-width: 1200px;\n   margin: 0 auto;\n}\n```\n\n### Using your page as a CSS selector\n\nYou can also target a whole page which helps it terms of css specificity or targeting one specific element or block within a single page, some examples:\n\n-   Home page: `#SC-pages-home`\n-   Page template: `#SC-pages-show`\n-   Articles Index: `#SC-articles-index`\n-   Category template: `#SC-categories-show`\n-   Product page template: `#SC-products-show`\n\nIf you want to be more specific in regards to what page you want to target, then you will need to follow the same principle as you did targeting the content blocks. This time, you use the page or article identifier and append it to the following code.\n\n-   Pages: `#SC-page-{identifier}`\n-   Articles: `#SC-article-{identifier}`\n-   Single Category Page: `#SC-category-{identifier}`\n\n**Important note** If you have access to and are using Theme Builder (Beta), using a specific ID is not fully supported. Contact the support team to get more assistance so they can guide you on how to generate your own IDs.\n\nYou can also use the **inspector tool** of your browser to find these selectors and classes.\n\nBy default, the StoreConnect App provides specific styling such as spacing, margins, etc. to each of the templates mentioned above. Having access to these IDs will help you to override such styles and thus providing you more flexibility on how you want to style your content blocks for any given page.\n\n### Overriding default CSS classes from StoreConnect\n\nLet’s say you want to style the heading of a page you just created, so using the inspector tool from your favorite browser, you will find that you can override the following CSS class as follows:\n\n```\n.SC-PageHeader_heading {\n  font-size: 40px;\n}\n```\n\nNow, you will notice that this will make all your headings 40px on all your pages. If you don’t want this effect, then you can be more specific using the page ID. Example:\n\n```\n#SC-page-example .SC-PageHeader_heading {\n  font-size: 40px;\n}\n```\n\n### Best practices\n\nStoreConnect always recommends keeping your CSS clean and clear.\n\nIf you are using custom classes around your store try using a CSS methodology such as a BEM or SMACSS (just to mention a few) as it will allow you to have a more maintainable CSS and Style throughout your site. Also, be careful if you use a CSS library such as Bootstrap or Foundation as they could have classes that accidentally override the StoreConnect default classes."}