Use-Cases of this Tutorial

• You are looking to add, delete or update CSS rules in an existing / new stylesheet with Javascript.
• You are looking to create dynamic keyframes CSS rules.

May 08, 2009  Update: A second version that works in.NET 2.0 has been included at the end of this post. If you’ve ever had to generate PDFs on the fly then you may have run into iTextSharp, which is a port of iText for C#.It isn’t as straight forward as some people might like.

Just Hard-coding the CSS in Stylesheet Will Do. Then Why Dynamically Add the CSS Rules to a Stylesheet with Javascript ?

You must be wondering what would be the real need to add CSS rules to a stylesheet with Javascript. A better way would be to just hard-code the CSS properties in the stylesheet? Or changing the CSS properties of the element with Javascript will also work?

Sometimes the requirement is such that there is no option, other than using Javascript to add CSS to a stylesheet.

One such case is the CSS keyframes rule. Consider the below CSS rule :

You can obviously hard-code this CSS rule in a stylesheet. But what when you don't know the value of top in advance? The value of top may be dependent on the initial position of the element, or can be only set after a particular event occurs, or some other complex case.

Adding the keyframes rule to an element with Javascript or jQuery is not possible.

In this case you have no option but to dynamically add the keyframes rule to a stylesheet using Javascript.

Animating a Lightbox with CSS & Javascript is a perfect example where you need to add CSS to a stylesheet dynamically.

Creating a New Stylesheet To Add CSS Rules

When dynamically creating CSS rules it is alays better to create a new stylesheet, and adding rules to it. It is because adding new CSS rules requires the index position where the new CSS rule is to be added. This is relatively simpler in a new stylesheet as the starting index is 0.

Creating and get reference to the new stylesheet with Javascript :

Creating and get reference to the new stylesheet with jQuery :

Using an Existing Stylesheet To Add CSS Rules

Although not recommended, but for the sake of showing it, here is how you can get reference to an existing stylesheet.

Assuming the stylesheet is of the form :

With Javascript :

With jQuery :

Adding a New CSS Rule in an Empty Stylesheet

You can insert a new CSS rule using the insertRule method.

The second parameter is the position or index of the CSS rule in the stylesheet. Index starts from 0. You cannot give an arbitrary position - the index of the new CSS rule must be after the index of the last CSS rule in the stylesheet.

The below code will give an error because after the 0th index is inserted, the code tries to insert new rule at the 2nd index.

After the 0th position, the next position to be filled should be 1.

Another thing to note is that the newly injected CSS rules will probably not be seen when you use browser developer tools (Inspect Element). Nevertheless the CSS rules are being updated in the DOM.

Adding a New CSS Rule in an Existing Stylesheet

In an already existing stylesheet, CSS rules must be already present. So in order to append a new CSS rule, you must first find the length of CSS rules in the stylesheet, then use that to insert a new rule.

Deleting an Existing CSS Rule

You can delete an existing CSS rule using the deleteRule method.

Note that after deletion, the indexes of the rest of the CSS properties in the stylesheet will rearrange, just like deleting an element from an array will rearrange the array.

Updating an Existing CSS Rule

Very interestingly, updating a CSS rule at a paticular index is not possible. If you try to re-insert a new CSS rule at an occupied position, both the CSS rules will be updated in the DOM ! So take care.

So in order to update a CSS rule at a particular index, first delete the old rule and then insert the new rule.

Cascading style sheet (CSS) plays a large role in SharePoint branding. To successfully customize the site design in SharePoint and SharePoint Online, it's useful to be familiar with how SharePoint uses CSS.

Important

This extensibility option is only available for classic SharePoint experiences. You cannot use this option with modern experiences in SharePoint Online, like with communication sites. Notice also that you should not take a dependency on the html page structure or on the out-of-the-box CSS style names as these might be adjusted without a notice.

CSS branding overview

When you create a SharePoint site collection, SharePoint creates a Master Page Gallery (_catalogs/masterpage) where most branding assets, including .master, .css, image, HTML, and JavaScript files are stored.

SharePoint uses the seattle.master page by default for team sites, publishing sites, and team sites with publishing enabled. It uses mysite15.master for OneDrive for Business sites. Each .master file refers to the corev15.css file, which is built from a variety of .css files delivered with SharePoint out-of-the-box.

All default master pages use corev15.css when processing styles, and rely on the CSS cascade and CSS file sharing to resolve which styles are applied to specific controls and elements in regions of a page. Multiple CSS files are also combined to build the oslo.css file, which is used with the oslo.master master page.

CSS in master pages

The <SharePoint:CssRegistration> content placeholder, which corresponds to the WebControls.CssRegistration class in the server-side object model, defines the CSS file. Like a reference to a master page, SharePoint replaces the tokens in the master page when the page is processed. The WebControls.CssLink class reads the registration from the master page and inserts a <link> tag in the resulting HTML file that is generated.

Consider the following example.

At runtime, this code is rendered as follows.

The CSSLink class renders all style sheets when the page is rendered. If you define styles in a custom .css file that are also defined in corev15.css, they are overwritten.

Corev15.css file

Much of CSS is applied to SharePoint by default. The corev15.css file is the main source for styles in SharePoint. This file is stored in the SharePoint 15 folder on the server at TEMPLATELAYOUTS1033STYLESThemableCOREV15.CSS and not in the Master Page Gallery of the root site and home page.

To see how SharePoint uses CSS out-of-the-box, look at the corev15.css file by using the developer tools in your web browser. In Internet Explorer, use the Internet Explorer Developer Toolbar (access it by pressing F12), and choose the CSS tab to view corev15.css.

Styles defined in corev15.css use the .ms- , and .s4- prefixes, which indicate styles that were created by Microsoft. Corev15.css also uses a lot of child and descendent selectors.

When you view the file, you'll notice many comments in this format: /* [ReplaceFont ( themeFont:'body')] */. SharePoint reads these comments when a composed look is applied. The comments tell SharePoint to change the attribute of the CSS that immediately follows the comment. Applying a composed look might change many of the default colors, fonts, and background images that are applied, and subsequently update the settings in corev15.css.

Note

Selecting the corev15.css file this way loads the rendered CSS rather than the saved CSS. Sometimes you might find discrepancies between the two. User agents such as browsers can also change rendering in response to user actions.

Warning

Do not sign in to the server and edit or customize core SharePoint CSS files in the SharePoint root. Doing so negatively impacts support and upgrade. Never edit the corev15.css directly; always create a copy, rename it, and edit the new file instead. Editing corev15.css applies branding to all web applications on the server.

To create a custom style sheet for SharePoint

1. Make a copy of corev15.css and name it contosov15.css.

2. Open the relevant masterpage (in this example, contoso.masterpage) and modify the CssRegistration line to point to contosov15.css from corev15.css, as shown in the following example.

3. Below the CssRegistration line, add the following.

Composed looks in custom branding

You can use composed looks in custom branding when CSS is called from a master page. The CSS file is stored in the SharePoint file system in one of the following locations:

• Guide to graduate urban planning programs pdf. 15TEMPLATELAYOUTS{LCID}STYLESThemable

• /Style Library/Themable/

• /Style Library/{culture}/Themable/

You can place custom branding files in /Style Library/Themable/ and /Style Library/{culture}/Themable/, but 15TEMPLATELAYOUTS{LCID}STYLESThemable is not editable, so you can't store custom files in that location.

Note

If these locations don't exist by default, you can create them manually and SharePoint recognizes them as themable.

Applying custom CSS to a SharePoint page

You can add custom CSS to rich text fields and web part zones. To add CSS to a rich text field, put the page in edit mode and choose Insert > Embed Code from the ribbon. For web part zones, use the Script Editor web part to add HTML, scripts, or an internal style sheet. You can use this approach to hide the Quick Launch navigation in the default SharePoint UI. Aritech cd 95 manual lymphatic drainage machine. If you are using SharePoint Online and the NoScript feature, NoScript disables the Script Editor web part.

Apply CSS to a SharePoint site by using an external style sheet and including a reference to the style sheet in the <link> tag inside the <head> tags of the SharePoint page.

The following code example shows how to upload custom CSS to the asset library, apply a reference to the CSS URL with a custom action, and then create a custom action to build a link to the new CSS file. This code is part of the Branding.AlternateCSSAndSiteLogo sample on GitHub.

See also