Professional SharePoint® 2010 Branding and User Interface Design

7

Cascading Style Sheets

in SharePoint

WHAT’S IN THIS CHAPTER?

A CSS primer

➤

How CSS is used in SharePoint 2010

➤

Using third-party tools to maintain CSS code in SharePoint 2010

➤

Cascading Style Sheets, known simply as CSS, is considered a fundamental part of any web

development. Depending on the web page creator’s preferences, CSS may be used heavily or

sparingly, but most web pages use it in some capacity. Historically, SharePoint has used it

fairly heavily; and in SharePoint 2010, it has become more prevalent. Fortunately, some cool

new tools have been added to make it even easier to manage.

This chapter provides an overview of what exactly CSS is, how it is used in SharePoint, and

how you can manipulate its rules to brand your own SharePoint 2010 projects.

CSS PRIMER

CSS is probably at least somewhat familiar to you if you have ever created a web page. If

you are a designer, you are likely intimately familiar with CSS. However, if you are among

the developers trying to do SharePoint design, which is typically the group assigned to brand

a SharePoint site, a deep understanding of CSS may not be in your toolbox. This section

explains the general basics of CSS — that is, not necessarily SharePoint-specifi c. When you

have fi nished reading this section, you will be better equipped to understand how SharePoint

uses CSS, as well as how you can use CSS to brand your own sites.

If you are already comfortable with CSS, you can skip this section and move directly to

the section “CSS in SharePoint” later in this chapter. Conversely, if concepts such as child

584644c07.indd 167584644c07.indd 167 10/27/10 11:46:41 AM10/27/10 11:46:41 AM