The SharePoint Experience

It's not just a course - it's an experience.

The SharePoint CSS Experience

Holy cow there is a lot of CSS in SharePoint! And there is a heck of a lot that you can do with it! The vast majority of branding SharePoint involves using CSS to add style and restyle SharePoint components. Master pages get all the fame but CSS is where the action is happening. Get your SharePoint branding kick-started with the SharePoint CSS Experience and learn how to rebrand SharePoint using nothing but CSS.

There are a ton of resources online for learning about properties and their values (such as background and color). This course focuses on identifying and writing the selectors and combining the right properties to get the desired effect – the stuff that frustrates most people about CSS.

SharePoint Version: All. Concepts are applicable for 2007, 2010, 2013 and SharePoint Online. Code samples provided will be for 2010, 2013 and SharePoint Online.

Author and instructor: Heather Solomon


Complementary courses to the SharePoint CSS Experience:

* Please note that these are not pre-requisite courses.


Key takeaways for this course

System Requirements

Course Syllabus

CSS Basics and Vocabulary

CSS (Cascading Style Sheets) is a straight-forward styling language and once you understand the bits and pieces, you will be able to read any CSS that comes your way. Class will start with:

Writing Effective Style Statements

Less code is always the best code. There are many ways you can combine and condense styles to create compact and easily manageable CSS style sheets. Core topics include:

Style on the Fly

Instant gratification galore! There are several tools and methods to work with CSS and instantly see your results, thus speeding up development time and getting your work done faster. We will look at:

Advanced CSS Topics

After the introductory topics you will be a prepped and ready to tackle some of the more advanced CSS topics that have been known to be confusing and frustrating aspects of CSS – but it doesn’t have to be that way. Discussions will include:

This is a SharePoint class, right?

Most definitely! It is time to dive into editing SharePoint CSS. An entire day will be dedicated to identifying SharePoint styles and updating them for your own branding needs. The day will be split evenly between SharePoint 2010 and SharePoint 2013/SharePoint Online.

Class starts off outside of SharePoint because let’s face it – SharePoint CSS is messy and hard to work with. That is why we are never going to touch the SharePoint CSS files and instead use only custom CSS files. We deep dive into editing nearly every aspect of the SharePoint user interface, including:

We will be giving SharePoint an extreme makeover, but we won’t be touching the master page to change any of SharePoint’s out-of-the-box markup. You’ll be amazed at how much you can do with CSS!

Responsive Design

When we hit this topic in class we still won’t be editing a master page – responsive design is all about CSS. We are going to review some introductory responsive design concepts and what it means to make your SharePoint sites more responsive. For more in-depth knowledge, check out our SharePoint 2013 Responsive Design Experience course.

Getting your custom CSS into SharePoint

You have options and we will look at them all, including the new way to use any code editing application with SharePoint 2013.

Code, code, and more code

All of the code that is generated from this class will be given to students in addition to completed sample designs for SharePoint 2010 and SharePoint 2013 (also applies to SharePoint Online). A large CSS code snippet library is also included and available to students indefinitely.