Cascading Style Sheets (CSS) can be very sophisticated. CSS is a way to separate look and feel from the content. These style rules are often placed in the head area of an HTML document or in a separate file altogether that is linked to the HTML page (for SharePoint 2010, it's often the master page).
You can change the color of hyperlinks for an entire site in as long as it takes to type several characters!
Styles can be created for specific HTML elements, such as H1 (heading one). These styles apply automatically when those elements are used in the content. Custom styles, such as .mystyleheader, are specifically applied as desired. CSS is used for font, backgrounds, size and positioning, and many other visual instructions for the browser. The browser already has a default way of presenting text and headers, among other things.
A CSS rule contains the element and one or more descriptors. The element can be an HTML element or a custom (class) style that can be applied as desired:
HTML element: Properties descriptors in this HTML element example include the color of the text, font style, font size, and font family (self-explanatory).
h1 { color: red; font-style: bold ; font-size: 16px; font-family: arial; }Custom class style: The custom rule is the same, except that CSS has some shortcut formats.
.mystyleheader { color: red; font: bold 16px arial; }
The HTML element and classes shown in the preceding CSS rules are called selectors. The rules defined for the selector are applied to everything in your web page that matches the HTML element or custom class. The examples shown here are very simple. Selectors can get very complex when you need to apply rules to elements that are nested deeply in your web page.
SharePoint has thousands of CSS rules, and it takes patience and experience to find, figure out, and create your own styles to override these predefined styles.
On the other hand, if you want to change a couple font sizes, the background images of the top navigation, the logo, and/or the look of the left navigation, you may be able to copy the style sheet associated with a predefined master and modify those few items.
The .mystyleheader class is shown in the preceding list to easily define the difference between the HTML element and a custom class style. Class names used by SharePoint and created by you have more meaningful names.
When you’re creating your own style names, as tempting as it might be to name a style .redlink or .blueheading, just as soon as you apply that style in multiple locations, the team will want to change the color! So describe the element by its content intention, not its colors or properties.
