Artwork/CSSGuidelines

Fedora CSS Guidelines

Fedora's web infrastructure is rapidly growing. In order to keep our web assets from looking radically different, thus confusing the users, this project will set forth guidelines on how to write web pages so that they can be themed by the Fedora style sheet . This will make web development much more efficient by allowing developers to concentrate on content and the art team to concentrate on look and feel. Right now the Fedora style sheet is pretty sparse. It is recommended that if you have elements the style sheet does not address that you create another style sheet which inherits from Fedora's and request your additions be added to the main style sheet. Any additions or changes to the main style sheet should be documented here.

Tools

• Firebug - Firebug is an Open Source Firefox plugin which does web page debugging. It has excellent CSS support and can be used to see how modifying CSS elements effects a page.

Guidelines

This page needs some love
This page should be revised or reconstructed to be more helpful. Problems may include being out of step with current team or project status or process.

The

tag

The div tag is the central way of activating style sheet elements. In html the div tag is a generic block element that contains other html elements. The way the style sheet works is it assigns styles to various html elements such as link and header tags. Since you don't necessarily want all elements of the same type to be styled the same way style sheets allow you to define identifiers or ids. For instance lets define an id called "urgent" and color anything with an == tag red:

color: #FF0000;
}

We can now activate that style by simply enclosing any block we wish styled in a div tag as such:

<div id="urgent">
==This is Urgent==
</div>

The div tag can also be nested in which case the nested div tag inherits from and overrides elements of its parent. This nesting is also used to block off elements and some ids in our style sheets are specifically designed to be nested inside another. For instance you could have a sidebar id which creates a separated sidebar on the web page. One could then have a sidebar_element id which formats html to look nice in the sidebar. In this case the sidebar div tag is used to make sure the sidebar elements show up on the left. The sidebar elements would make little sense to use outside of the sidebar. What this says is div tags control grouping as well as style inheritance.

The nice thing about styling with a div tag is that even though you still must tag and group blocks of data for the most part the output is only concerned with the data. Try this, go to Fedora's main page now turn off styling in Firefox. Notice that all the data seems to stream from top to bottom with little formatting. If you apply the style sheet again and the page becomes a work of art.

File:Artwork CSSGuidelines firefox-style-off.png