This was inspired by Trish White's questions about CSS
Every web page contains formatted text. It is very easy to see the difference between formatted text and unformatted text by going to any web page, right clicking, and selecting the menu option "View Source". This will bring up a new window containing the unformatted text that is used to represent the formatted text of the web page. In Safari, the browser I use on my iMac, this command is only available from the "View" menu, or if I right click in blank space on this page.
The acronym "HTML" stands for "Hypertext Markup Language". "Hypertext" means that there are links that let you jump from page to page and from place to place within a page. "Markup Language" means that within the unformatted text, there is what we call "markup", such as "<b>" that alters the formatting that is supposed to be used for the characters that follow the markup command.
It is easy to find HTML reference pages and tutorials on the internet by just typing "HTML reference" to Google. Ning makes it very easy to learn the basics of HTML, since they have great editors that will let you switch between showing you the formatted text and the underlying unformatted text for the text you are typing into a text box.
Part of the HTML language is this idea that you can define a named "style" for a complex, multi-command format. CSS is a related language that allows these "style"s to be defined, but it is somewhat less intuitive than HTML, which was originally designed to be very intuitive.
If you want to write Ning blog entries that contain "<" characters, you need to type them as: "<", similarly you have to type ">" for ">", "&" for "&". There are many more special characters that need to be "escaped" in this way since all of these characters are part of the HTML programming language and are markup, not just text.
Most CSS code is actually stored in separate files that are linked to from the HTML page that uses it. Thus the "@import url(http:" statement in CSS will read in actual CSS code from another file. The HTML reference page above also has a CSS reference page. In the Forum entry that inspired this tutorial, Chris also tries to teach Trish about how to become self-sufficient with CSS. Hopefully someone will expand this tutorial with this kind of information, but you might find some of that Forum entry helpful as well.
Manage my Network -> Layout -> Advanced
For an Admin, you find the CSS for the site at:
In addition, even users have the ability to edit CSS for their own home page. They do this here:
My Page-> Manage My Page ->Appearance->Advanced
If they do not like the CSS changes they have made, they can go back to the standard CSS for the site by clicking:
My Page-> Manage My Page ->Appearance->Apply my site's theme
When you look at the CSS in these pages, it is much easier to understand and manipulate the CSS than it is in raw HTML.
The basic idea is that a style has a name and a value. In HTML, it is possible to specify the "style" attribute on many different elements, such as the <p> element. When entered this, way, you can either specify the name of a style defined in the CSS, or you can specify a style without a name for this one paragraph. When entered this way, a style is just a series of formatting attributes, each of which has a name that is understood by the browser, and a value. Thus, when entering a style into a CSS page (see w3schools for a full tutorial and reference), you merely specify a series of formatting attributes followed by their values.
Ning uses many different styles for each type of paragraph that you might want to be able to format differently from other paragraphs. You will find these styles already defined in your CSS page. In many cases, the name of the style helps you figure out where it is used, but the best way to find out what styles are being used on your Ning pages is by using the "Inspect Element" command in your browser. We need another tutorial on using Inspect Element; it is surprisingly complicated to understand, and some of the details vary from browser to browser. For now, you need to use Google to search for serious information on how to use Inspect Element on your browser. In addition, Chris talked to Trish White about this in the thread that inspired this tutorial.
When you have a markup command in your HTML that invokes a style, it already exists within an environment in which all formatting attributes have been specified to have some value. Only the formatting attributes modified by the style are modified for the area of HTML that the use of the style applies to.
It is possible to add additional CSS styles to your style sheet. Then they can be utilized within your HTML, but you will have to type the name of your style each time it needs to be used. This is far superior to typing the actual style definition each time, because it makes it easy to change the formatting of your site simply by changing the definition of the named style within your style sheet.
When trying to figure out which formatting attributes you need to set in a style, just realize that many people do not know what every formatting attribute means. You can try formatting a small piece of text to see if you can get it to look the way you want using the Ning editors, and hacking with the HTML for the small piece of text. Once it is looking the way you want it to look, you will have determined what formatting attributes you want to use. These are good candidates for use in your CSS.
One problem with this technique is that different browsers implement a different set of formatting attributes. Try to use formatting attributes that do not sound browser-specific.