Styling with CSS

Styling with CSS is available on every page. And the styles you create apply to your whole site.  Before getting into styling in an indepth way, it is important that you understand CSS and how its selectors work.

The Mozilla Developer Network has a great reference and tutorials to help you become familiar with CSS.  You should also learn to use the styling tools built into your Web Browser.  We use FireBug for FireFox extensively as we develop new sites.

To get started with styling on a page, click the style button:

Style Button

Current Styles

The style list dialog shows you all the styles that apply to your site.

The Style List

The style list shows a folder structure, and a number of styles, including the CSS selector that the style applies to.  From the top down, the nodes in the "Block Styles" section are:

  • Block Styles - A home folder for styles that apply to blocks.  All block styles will appear here.
  • Pages Index - A block style that applies to the "Pages Index" block.  It shows the browser to the left of this page.
  • Heading - A specific style within the "Pages Index" block that applies to an item with the CSS Class "cubebuild-pagelink-heading"
  • Inline Styling - A specific style that applies to the "Pages Index" block itself.  The special selector "&" means it applies to parent item.

From the top down, the nodes in the "Styles" section are:

  • Styles - A home folder for styles that apply to everything.
  • .band-header - A style applied to the band header class, this gives the title bar below the logo its blue background on this page.

Style Controls

You can move styles into folders by dragging them and dropping them onto folders in the list.

As you move the mouse over the style list items, a small control will appear near each item.

Style Controls

Style Controls

From left to right:

  • Edit - Click to edit the CSS for this style item.
  • Inline Style - Click to create an inline group of style elements.  Inline items apply to the selector of the style, but allow you to collect kinds of styles together, so you can separate font settings from background settings for example.

Folder Style Controls

Folder Controls

From left to right:

  • Edit - Click to open the editor for a folder.
  • New Folder - Click to create a new folder within this folder.
  • Upload - Click to upload this style to your designer console.  This may not be available if you dont have a CubeBuild designer console and a number of websites.

Selectors

Selectors are a key item you must understand to style a website.  The following article provides a great introduction to CSS Selectors.

Mozilla Developer Network - Selectors

Edit Style Folder

A style folder consists of a free form name, and a selector.

The selector is used to optionally tie each folder to an element on your site.  This allows you to create styles that apply only within the item that the folder applies to:

Edit Folder

  • "Done" to save your changes to the style folder.
  • "Remove" will delete the folder, and all its child folders and styles.

Be sure to move styles you still need out of a folder before you remove it.

Edit Style

Each style is a collection of CSS Style elements.  We provide an editor to allow you to specify the styles exactly as you want them.

"Name" is for convenience, it helps you tag a style purpose and quickly navigate to the right style as you update your site.

"Selector" is the CSS Selector that this style applies to.

Edit Style

All other items are CSS Style elements, the text of each conforms to the rules for the appropriate CSS element.

Each can not include a semi-colon (which separates CSS elements) or a colon (which delineates CSS elements)

For examples of particular elements and their effect see the relevant help pages on the Mozilla Developer Network, here is the one for Margin.

Live Styling

As you enter styles into the style dialog, the change will be applied straight away to the page.  This is done using explicit styles on the element you are styling, which can be misleading.  Explicit styles will always apply regardless of other styles.  When you save the style, the changes may appear to no longer apply.  This is because some other CSS style has a more specific selector.

You can either find the more explicit item, or override it by adding "!important" to the end of the style, or make the style selector more specific so it takes precedence.  Use "!important" sparingly, as it can become difficult to manage.

Create a Style

In order to style part of the page, enter style mode by clicking the style button.  When in this mode, you can click any part of the page to style it.

Depending on where you clicked, you will receive a list of selectors, like the following:

Style Selectors

The first section identifies all the possible selectors you could use to style the item you clicked.  Which you select is dictated by how you want your styling to apply.

The second selector, existing styles, is populated as you select items for the selector.  In the above screenshot, "BODY" is selected, and Existing Styles shows items that already apply to "BODY".  This helps you to understand what is already effecting the item you are styling, and edit existing entries instead of creating new ones.

Special Selectors

There are several special selectors you can use to style your site:

  • .cb-fixed - This allows a block to sit where it is until it reaches the top of the page, then fix itself to the top of the page as it gets scrolled further.
  • .cb-desktop - This is applied automatically when the page is in Desktop mode, or wider than a certain number of pixels.  You can set that width in the layout settings.
  • .cb-mobile - Appears in the same location as .cb-desktop but applies when the page is in Responsive mode.  These styles help you make your page respond to the device the viewer is browsing from.
  • .band-main - The band styles apply to the horizontal bands that surround sections in the template.  You can use them to style the header blue for example, per this site.
  • .area-main - The area styles apply to the area immediatly around each section.
  • .page-body - This selector identies the body of the page, so you can style it out to its width.
  • .page-designer-css - This special selector contains the name of the current page.  The page name has the forward slashes replaced with hyphens, so you can target this particular page.  The name of this page is "designer/css", therefore the selector is ".page-designer-css"
  • #block-* - This uniquely identified a block of content.
  • .b-* - This selector identifies a block by its type name, so you can style all blocks of a similar type.