Home >Tips > SharePoint Online from Scratch > Content Editor and CSS kalmstrom.com site map icon Site map  

Use CSS in the Content Editor Web Part

A SharePoint Online tutorial by Peter Kalmström

SharePoint iconIn the previous demo Peter Kalmström, CEO and Systems Designer of kalmstrom.com Business Solutions, gave an introduction to the Content Editor web part and showed the most common use: to add the Content Editor web part to a web part page to have the same features as in a wiki page.

In the demo below Peter shows another way to use the Content Editor web part: to make changes in the CSS for a page.

In his example Peter only changes one single object on the page, an image background color in another web part than the Content Editor. This change cannot be done by editing the HTML source directly. You have to use the Content Editor web part:
  1. Add a Content Editor web part to the page.
  2. Click on the link to add new content.
  3. Click on the Edit Source button in the ribbon.
  4. Paste your style code in the HTML source.
  5. Apply and save the page.

To find the correct object name to change, press the F12 key to show the browser's developer tools. Click on the 'Select element' icon at the top left and select the element you want to find the name for.

In next demo Peter shows another way of adding CSS to a SharePoint page.

Adding CSS to a page can also be done using the Embed tool which inserts a minimal web part called the Script Editor Web Part.

Learn more


Always the latest news in the kalmstrom.com blog

Follow kalmstrom.com on LinkedIn Facebook, Google+  or Twitter!

back icon next icon