Cascading Style Sheets (CSS) is a coding language used to add style (e.g. fonts, colors, spacing) to your Web Site .  Whereas elements in CP5 (article lists, column splitters, etc.) change the placement of content on your site, CSS is used to modify the appearance of that content.

General Overview

There are three different levels of CSS in CP5. As you add a new stylesheet onto your site, you have the ability to override other CSS documents in the hierarchy.  Here is the hierarchy of CSS documents in CP5:

1.    Cp.global.css – This is the CP5 global CSS document which sets general layout styles for all of the Templates and Elements on CP5. You have the ability to override every single line of CSS in this entire document with your local CSS, if you choose to.
2.    TemplateX.template.css – These are template-specific stylesheets that change depending on which layout template you have selected. You may also override this stylesheet with your local CSS document.
3.    Your Local CSS document – In this document are all the site-specific styles, which have the ability to override both the global and template CSS documents.
4.    TemplateX.custom.css – This document contains CSS from your "Customize Layout" tab in the administration area. The values that you enter in the Customize Layout tab will override the declarations in your Local CSS Document.

Understanding the Interface

To create a new stylesheet for your Web Site, first you must have CSS access on your account. If you have CSS access, you can view/edit/create a stylesheet under the "Stylesheets" tab. All changes to your site's CSS will be made here.

 Once the stylesheet has been edited, simply hit "Save" to save any changes made. 

More on the Global CSS document

CP5 uses its own default stylesheet to determine how sites will look.  When creating and editing your own stylesheets, you are overwriting the system's default values with your own.

CP5's default stylesheet can be found here:
http://admin.collegepublisher.com/se/cp.global.css

In order to overwrite the default values, you must copy/paste the relevant code from the global stylesheet into your local CSS document. 

NOTE: You CANNOT edit the cp.global.css file.  You MUST copy/paste the parts you would like to change into YOUR LOCAL stylesheet within the code editor.  The values in your own stylesheet will overwrite the ones in the cp.global.css file automatically. 

It should be noted that the global stylesheet is quite extensive.  Oftentimes, you will only need to use small parts of it.  It is advised that you copy/paste only the portions of the cp.global.css stylesheet that you need to edit.

Using CSS with different layout Templates

You may notice that certain CSS selectors in the cp.global.css are prefaced with either "#a" or "#b".  This CSS ID refers to the different layout Templates.

CSS selectors using "#a" will only work if your site is using a template with a horizontal navigation (a navigation bar going across the top of the site).  The horizontal navigation layouts are Templates 1-3.

CSS selectors defined with a "#b" tag will only work if your site is using a template with a vertical navigation (with site navigation going down the left side of the page). The vertical navigation layouts use Templates 4-7.

Please be cognizant of which type of template you are using when trying to edit values with "#a" or "#b" tags.