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. It’s time to kick-start your site branding with the SharePoint CSS Experience.

There are a ton of resources online for learning about CSS properties and their values (such as background and color). 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

  • 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
  • Session recordings and electronic lecture notes with post-class revisions and updates
  • A large code repository filled with tips and tricks

In-Depth Course Syllabus

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. An entire day will be dedicated to identifying styles and updating them for your own branding needs. The day will be split evenly between version 2010 and 2013+/O365.

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 (2013+ and O365 only)
  • Ribbon
  • Search
  • Navigation, including drop down menus
  • Web Parts
  • And anything else you need to style – if there is a way we will figure it out!

Responsive Design

We will review some introductory responsive design concepts and what it means to make your sites more responsive. For more in-depth knowledge, check out our SharePoint Responsive Design Experience course.

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 version 2010 and version 2013+ (also applies to O365). Additionally, a large CSS code snippet library is included and available to students indefinitely.

System Requirements

  • 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