Current mood:

awake

Merging CSS
This tutorial will show you how to correctly merge CSS. CSS is frequently used in overrides and journal styles, and is mostly seen between <style> tags.

CSS (Cascading Style Sheets) is inserted into the <head> section of an html document to tell certain things to do things. Hyperlink rollover effects for example, are done using CSS.

Combining the CSS in an html document is relatively easy once you get the hang of it. I will do a simple example first.

Say you have two different <style> attributes for hyperlinks: one for a background color, and one for the cursor:

Those two CSS snippets would make the hyperlinks have a black background, with the cursor changing to a crosshair when you hover over it. However, you can merge these two attributes together into one a:hover attribute:

All that entailed, was putting the two a:hover attributes into one a:hover attribute within a style tag. If you have two codes that effect the same thing, you can combine them into one.

Now, on with something more complicated. If you have CSS that looks like this:

All you have to do here, is put it in the next line, so it looks like this:

Now. If you have something like this, wherein you have a scrollbar code, and a background image code, they both use CSS body tags. All you have to do, is put them in the same body tag.

Just merge them to look like this:

After you merge all your codes, you should only have ONE <style> tag in your html document. This is very useful if you manage a lot of overrides on your journal.

For example, here is some merged CSS:

If you have any questions about this tutorial, please submit a support request under the customization category.

Additional Information

Merging GLOBAL_HEAD overrides