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:
- SharePoint 2010 Branding Experience *
- SharePoint Branding Experience *
- SharePoint Responsive Design Experience *
* Please note that these are not pre-requisite courses.
Key takeaways for this course
- 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 CSS 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 CSS tips and tricks
- Access to install items on your computer (like a browser, browser add-on and simple code editors) is ideal but not required
- Speakers or headphones for course audio
- OPTIONAL: SharePoint Designer 2010 and/or SharePoint Designer 2013
- OPTIONAL: Dual monitor setup – it helps to have the course video stream on one monitor and your test environment on the other monitor so you can avoid flipping between two applications.
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:
- Learning about the structure of a CSS style statement (rule)
- Understanding core concepts such as grouping, inheritance, descendant selectors 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 CSS style sheets. Core topics include:
- Writing shorthand CSS
- Deciding when to group and when not to group selectors and properties
- Efficiently targeting elements to pinpoint exactly what you need to restyle
- Understanding CSS specificity
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:
- Using available (and free!) browser tools
- Putting helpful sites and applications to work
- Effectively working between external tools and SharePoint
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:
- Centered, fixed width web pages
- Absolute/relative positioning and floats
- The CSS box model
- Layering with the z-index property
- Combinators and structural pseudo-classes
- Media queries (used for mobile devices)
- 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 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:
- Site logo
- Suite Bar (2013 and SharePoint Online only)
- Navigation, including drop down menus
- Web Parts
- And anything else you need to style – if there is a way we will figure it out!
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!
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.