Agencies
Services
Adding & Updating Custom CSS
Cascading Style Sheets (CSS) define the visual appearance and layout of a website. In Adobe Experience Manager (AEM), global styles are provided as part of the platform to ensure consistency across all sites. However, individual websites often need visual adjustments, branding updates, or layout refinements that are specific to their own implementation.
To support these variations, AEM allows sites to use their own Custom CSS overrides. This approach keeps the shared, platform-wide design system intact, while giving each website the flexibility to adjust styles as needed. Custom CSS ensures that site-specific changes can be made without impacting any other website running on the platform.
Table of Contents:
How is Custom CSS Utilized in AEM?
Custom CSS allows each website on our AEM platform to apply its own visual styling on top of the shared global design system. While the platform provides consistent defaults for branding and layout, individual sites often require unique visual adjustments to support their specific content, audiences, or functional needs. Custom CSS gives each site the flexibility to make these adjustments without altering or interfering with the styles used by other sites.
On our platform, Custom CSS is primarily used for:
- Animations - Creating custom animations to enhance user experience or emphasize key interactions. This includes hover effects on buttons and links, fade‑ins for content as users scroll, or visual cues tied to user actions. These animations allow each site to incorporate motion in ways that best fit its design and engagement goals.
- Page Layout Adjustments - Individual sites may need to fine‑tune spacing, alignment, or element positioning to support their content structure. Custom CSS enables these refinements, such as adjusting margins, modifying card or grid layouts, repositioning elements, or tailoring component spacing to achieve the desired visual balance.
- Text Styling - Override default text styles to better match their branding or content presentation needs. This includes customizing font sizes, weights, colors, link styles, heading formats, and other typographic elements. These adjustments ensure each website can present its content clearly while maintaining its own distinct visual identity.
Custom.css File Setup & Usage
Each agency website in AEM includes its own custom.css file, located in the site’s "/resources/css" folder under Assets. This file is loaded after the platform’s global CSS, ensuring that any styles defined here will override the default stylings applied.
The custom.css file follows a simple layout to help contributors make targeted styling updates. At a basic level, users can apply styles directly to HTML elements, component classes, or specific IDs. Updating the appearance of a button, adjusting padding on a container, or modifying the styling of a heading can all be done by defining new rules within this file.
In addition to standard selectors, our platform encourages the use of responsive media queries. These queries ensure that changes are targeted correctly on different screen sizes. If no media queries are specified, a CSS rule will hit all devices regardless of their display size.
The most commonly used breakpoints include:
- Desktop (>= 769px) - @media only screen and (min-width : 769px) { /* desktop styles */ }
- Styles placed inside this media query apply to desktops, laptops, and devices with widths of 769 pixels or larger.
- Mobile (< 769px) - @media only screen and (max-width: 768px) { /* mobile styles */ }
- Styles inside this query apply to mobile phones and smaller tablets with a maximum display width of 768 pixels.
By organizing custom styles within these breakpoints, each website can fine‑tune its layout for both desktop and mobile experiences without needing to alter any shared platform CSS. This structure ensures that all site‑specific visual adjustments remain easy to manage, predictable across devices, and safely isolated within the agency website.
Component IDs & Classes
In our AEM setup, every component includes fields where you can add your own IDs and CSS classes. The platform already provides default selectors, but these custom fields let you control the look of individual components without affecting the entire site.
Custom IDs and classes are helpful when you want certain sections of the website or parts of a page to look different from others. For example, you can style a single home‑page banner differently from banners used on other pages. By giving that component a unique ID or class, you can target it directly in your custom.css file and apply specific colors, spacing, backgrounds, or other styling changes.
This feature makes it easy to create unique sections, highlight important content, or customize pages one by one. It also keeps changes safe and isolated, since the styles you add only affect the components you assign them to.
Examples
Adjust the Agency Logo Size
Global View
.cmp-agency-header__logo {
height: 5rem;
}
Desktop View
@media only screen and (min-width : 769px) {
.cmp-agency-header__logo {
height: 5rem;
}
}
Mobile View
@media only screen and (max-width : 768px) {
.cmp-agency-header__logo {
height: 5rem;
}
}
Change the H1 Bar Color only on the Home Page
Global View
.home-page h1:before {
background-color: purple;
}
Desktop View
@media only screen and (min-width : 769px) {
.home-page h1:before {
background-color: purple;
}
}
Mobile View
@media only screen and (max-width : 768px) {
.home-page h1:before {
background-color: purple;
}
}
Update Only Images With ID or Class of "rounded-corners"
Global View - Using a Class
.image .rounded-corners img {
border-radius: 15px;
}
Desktop View - Using a Class
@media only screen and (min-width : 769px) {
.image .rounded-corners img {
border-radius: 15px;
}
}
Mobile View - Using a Class
@media only screen and (max-width : 768px) {
.image .rounded-corners img {
border-radius: 15px;
}
}
Global View - Using an ID
.image #rounded-corners img {
border-radius: 15px;
}
Desktop View - Using an ID
@media only screen and (min-width : 769px) {
.image #rounded-corners img {
border-radius: 15px;
}
}
Mobile View - Using an ID
@media only screen and (max-width : 768px) {
.image #rounded-corners img {
border-radius: 15px;
}
}