CSS to style UL on page also styles Top Navigation

Question

The custom CSS I'm using to style headers and fonts in the content on a Sharepoint webpart page is working - it's styling the content, but unfortunately it is also styling the site's top navigation on that page.

The CSS isn't anything special, just font-family, font-size and line-height for an unordered list.

No matter how I try to add the CSS: Site Assets library, a CSS Assets library I created, or embedded in a script Editor webpart on a page, both the page content and the site's top navigation is styled.

Most recently I tried to create CSS to style Top Navigation elements back to the way they were, after I have styled the page content. So far I have not been successful.

I don't know what to do at this point. Any ideas?

Thank you, Cheryl

Answer 1

Yup. That is how css works. The rules you define are applied to all elements that match the selector. So if you use something like

ul {background-color: red;}

Will match every ul element tag on the page and change its background to red. That is why the nav is being formated -- because it is a list.

Fortunately you can create selectors that are more specific. If you need to brush up on your selectors and how the work I recommend CSS Diner, it is a fun way to learn your selectors.

What we usually do is create a selector that basically says, "only change elements that are in the main content area of the page." Not sure exactly which version of SP you are using or which master page, but we have SP 2013 and are using Seattle.

#contentBox ul{background-color:red;}

This says, "Apply this style to ul elements that are a descendant of the element which has an id of contentBox."

Another approach you could use is to create a rule like this

ul.clj-style{background-color:red;}

This says "Apply this style only to ul that has a class of clj-style. This would require you to change the markup of any list you want to have the formatting.

Answer 2

As Rothrock's reply, if you only want to the CSS style works in the page content, you need modify the style like example below.

<style>
#contentBox{
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 15px !important;
}
</style>

Or custom font for content(include quick launch navigation) using style below.

<style>
#contentRow{
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 15px !important;
}
</style>