Styling Article Content
Now that we can see our new skin, we can start altering its look and feel. If you have copied another skin directory, delete the CSS and image files in the new (copied) directory, so that you are not working with the other CSS that you copied which would undoubtedly result in a bulky and unnecessary CSS.
The Content Body
By default, the content for each page is contained in a div with id content, and then CSS rules are applied to #content. #content does not contain the page's content (this is in #bodyContent, which is nested in #content), but it contains .firstHeading, a <h1> tag that holds the page's title.
There are many elements within #bodyContent, each of which has a specific purpose in MediaWiki. Obviously, you can name the elements in your MediaWiki skin as you like, but it would be easier to follow the original naming conventions if you are planning to release the skin for use by other developers.
.catlinks identifies the container for the different categories in the wiki page. This is similar to Wikipedia's page on Jazz (http://en.wikipedia.org/wiki/Jazz). Refer to the following screenshot:
. editsection distinguishes the "edit" links that are provided against each of the headings in the editable section of the wiki's pages. The following screenshot shows the edit option for the section to the right of the heading:
#siteSub is used in articles to indicate where the content is from (in a <h3> tag). By default, it reads "From YourWikiName". As with #jump-to-nav, #siteSub is invisible by default in MonoBook.
#toc contains the table of contents. By default, the table of contents appears only when four or more headings exist within the content. #toc-level1 to #toclevel6 indicate the hierarchy of the table of contents. A similar example can be viewed at http://en.wikipedia.org/wiki/Jazz.
#jump-to-nav contains links to enable the visitors to skip to other areas of interest within the current page. In MonoBook, these are hidden with display: none that displays the links when a "user agent" (that is, the browser) does not allow styling with CSS.
#contentSub is used primarily on pages that are redirected to elsewhere on your wiki. They should be left visible as deleting them would make it incredibly difficult to remove a redirect.
When an image is inserted into a wiki page in MediaWiki, the image automatically links to its own uploaded image page. .image classifies the images that are linked to the wiki's content, rather than the images themselves.
. thumb, .tright, and.tleftclassify images that are thumbnails (created in wiki syntax[[Image:ImagePath.png|thumb|Image caption]]). This (by default) creates an image of 180 pixels wide with the use of inline CSS (CSS that is not in a separate file, but is embedded in the (x) HTML code).