The SharePoint CSS Experience

Prior to attending the course I was looking for that one tool, utility or magic button that would help me brand SharePoint. I had tried Design Manager but was not happy with the end product. This course has helped me understand CSS and I have found the answer to what I had been searching for so long.
– Shameem M.

It’s time to kick-start your site branding with the SharePoint CSS Experience. CSS is used for the vast majority of SharePoint branding. Are custom master pages off limits for your site? You can completely brand SharePoint without one.

There are online resources for learning about CSS properties and their values (including our quick CSS Primer course). In contrast from that, this course helps you identify and write selectors for SharePoint which then combine the right properties to achieve your desired effect.

Key Takeaways

  • Access to over 8 hours of audio and video instruction across 22 recorded screencasts
  • The starting blocks for writing clean, effective and functional CSS for any version of SharePoint
  • The know-how to use browser tools and external editors to create code quickly and efficiently
  • The knowledge to completely rebrand SharePoint using only CSS, including layout, navigation and web parts
  • 6 months of access to course recordings and electronic lecture notes
  • A large code repository filled with tips and tricks

In-Depth Course Syllabus

New to CSS? Start off with our CSS Primer course at no additional cost to you when you register for the SharePoint CSS Experience course.

CSS Basics and Vocabulary

CSS (Cascading Style Sheets) is a straight-forward styling language. Once you understand the basics, you will be able to read any CSS  code that comes your way. Training will start with:

  • Learning about the structure of a CSS style statement (rule)
  • Understanding core concepts such as grouping, inheritance, combinators and the cascade effect
  • Identifying different selectors and when to use them

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 style sheets. Core topics include:

  • Writing shorthand CSS
  • Efficiently targeting elements to pinpoint exactly what you need to restyle
  • Understanding specificity

Style on the Fly

There are several tools and methods to work with CSS where you can instantly see your results. Doing so speeds up development time and gets your work done faster. We will look at:

  • Using available (and free!) browser tools
  • Putting helpful sites and applications to work
  • Effectively working between external tools and SharePoint (and without SharePoint Designer)

Advanced Topics

Now you are prepped and ready to tackle some of the more advanced topics that can be confusing and frustrating. However, it doesn’t have to be that way. Discussions will include:

  • Centered, fixed width web pages
  • Positioning and floats
  • Box model and box sizing
  • Layering with the z-index property
  • Combinators and structural pseudo-classes
  • Web fonts, icon fonts and how to convert simple social network links to icons

This is a SharePoint class, right?

Most definitely! It is time to dive into editing SharePoint CSS. We will be giving site an extreme makeover, but we won’t be touching the master page to change any of the out-of-the-box markup. You’ll be amazed at how much you can do with CSS! Among others, we will look at modifying the following SharePoint components:

  • Site logo
  • Suite Bar
  • Ribbon
  • Search
  • Navigation, including drop down menus

Getting your custom CSS into your site

You have options and we will look at them all, including how to use a code editor of your choice with SharePoint 2013+.

Code, code, and more code

All of the code that is generated from this training is given to students as well as completed sample designs for SharePoint. Additionally, a large CSS code snippet library is included and available to students indefinitely.

Covered concepts apply to SharePoint 2016 and O365. All code samples provided are for SharePoint 2010 and 2013.

System Requirements

  • Access to a SharePoint 2013+ site, preferably a top level site collection. Also preferably based on the Enterprise Wiki or Publishing site template with administrator rights, however, that is not required.
  • Simple code editor of your choice such as:
  • Speakers or headphones for course audio.
  • OPTIONAL: If you have access to a second monitor it can aid with viewing the course while trying out exercises.