What is HTML and where is the CSS within it?

[Peter Bishop]

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 do a "View Source" on this page, as you look through all the HTML for this page, you will note, near the top of the page, elements starting with '<script type="text/javascript">'. Everything until the following "</script>" is in a programming language that we call "Javascript", one of the most common programming languages used within HTML pages. In addition, you can see elements starting with '<style type="text/css"' and ending with "</style>". This is CSS code that defines formatting styles. Elsewhere in the HTML, where you see 'class="whatever"', this is using the definition of the "whatever" class from the CSS.

If you want to write Ning blog entries that contain "<" characters, you need to type them as: "&lt;", similarly you have to type "&gt;" for ">", "&amp;" 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.

On Ning, you do not have access to modify random files referenced from your HTML or CSS.  Ning does allow some editing of the files that contain CSS, and even Javascript, for the site.  For an NC, you find the CSS for the site at:

Manage my Network -> Layout -> Advanced

For an Admin, you find the CSS for the site at:

Manage->Settings->Appearance->Advanced

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 &lt;p&gt; 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. 

[Brian Floe]

Hello Peter

- HTML is the text in a letter, the handwriting and the paper color
- CSS is the ability to use the same handwriting and paper color in many selected letters
- Javascript is the ability for the letter to fold itself into an envelope

HTML goes into a Ning text box or a www.network.ning.com/page/ that you create.
CSS goes into the "Manage my network" area - Layout - Advanced tab.
Javascript goes into the "Manage my network" area - Custom Code

(below I use « instead of < or I cannot write this code in the forum)
«script» is the javascript «/script»
«style type="text/css"» is the CSS «/style»
«body» is the HTML «/body»

[Peter Bishop]

I notice that individual Ning members can (I think) modify CSS for their own page from
My Page-> Manage My Page ->Appearance->Advanced
As an Admin on Ning Plus, I think I can get to the page you are talking about from
Manage->Settings->Appearance->Advanced
These two pages edit two different files for your site. The Admin's page (probably the same
page you get to for the NC) defines the "Theme" for the entire Ning site, and can be used by
each user for their own page from their own Appearance page by clicking on "Apply my site's theme".
This probably deletes the user's individualized CSS file, so that additional changes to the site's theme will immediately appear for this user even if these changes are made after the user decides to use the theme defined for the site.

This way of managing CSS makes it much easier to use than it is when looking at the HTML source files.

I believe that Admins are not allowed to access the Custom Code page to modify any Javascript. This is just as well, since it is much harder to write Javascript than it is to write CSS. When writing Javascript, it is fairly easy to make changes to the site that become difficult to diagnose and correct.

I show above how you could have shown your example as:
<script> is the javascript </script>
<style type="text/css"> is the CSS </style>
<body> is the HTML <body>

[Brian Floe]

How did you write that code? When I write what I'm looking at here the forum removes it?

[Trish White]

Peter's codes are what I use when I am typing something in a text box on my sige.
I sue the same <> characters. Ning told me how to use some these html characters so that
I could make paragraphs, make letters larger, and indent.

I did learn something about HTML - but CSS is confusing me since they are both languages for the computer - why can't there be just one?
I like Brian's explanation for these languages - it helps me understand in a very basic format.
but it all still boggles the mind.

Trish

[Peter Bishop]

Trish,

Why can't there only be one? (language for HTML pages) It just so happens I am transitioning from high tech into philosophy. This is almost a philosophical question.

Actually, HTML once did work almost this way, but it required a large number of additional elements in HTML. There developed the ability to specify the "style" attribute in a number of different HTML commands. A single attribute is only a single text string, not a bunch of HTML elements, so the people defining HTML decided to allow the style attribute to not only be the name of a style, but, alternatively, the definition of a style. This lead to a "language" for defining a complex style in a single character string rather than by using numerous elements in HTML.

Thus, a not-so simple example of a use of the style attribute in HTML is:
<p style="font-family:arial;color:red;font-size:20px;">
This could be specified by saying:
<p><font color="red" face="arial" size="5">
the tutorial on this from w3schools refers to this second method as the "old way" and the method with the "style" attribute as the "new way".

It turns out that in HTML 4, the "font" element has been "deprecated". That means that it has been replaced by the "style" attribute in many places, and should not be used. Given normal HTML usage, however, there is a great tendency to continue to support "deprecated" elements, so it is not clear when the "font" element will actually stop working. The "official" position is that it has been deprecated and browsers no longer need to support it. The reality is that there are still large numbers of websites around the world that use the "font" element and would not work on a browser that did not support this element. Users would probably not appreciate it if their browser were "upgraded" to no longer support this element as long as significant numbers of websites continue to use this element.

You thus see one of the small complexities in modern internet-oriented software development.

This is one reason why it is seldom productive to ask "why" a piece of software does what it does. Sometimes the answer is not nearly as reasonable as in this case. The real questions are: what does a piece of software do? Is it likely to change soon to a different way of working (usually not)? If I am thinking about my problem in my way, how can I transform the way I am thinking about my problem so that it is more similar to the way my software operates to make it easier for me to use my software to make it do what I want it to do?

The good news is that if you have a language for making software do something, the chances are good that you can get it to do what you need it to do. Often, a special-purpose language for a particular purpose can be much easier for people who work frequently modifying software in this language, and even for people learning the language. The Javascript for doing what is done in CSS is virtually impossible to understand except by highly capable software professionals.

[Brian]

Good post.

Though:
"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."

I giggled at bit. Nice one.

[Peter Bishop]

If you are the Network Creator, then there is more CSS at:

Manage my Network -> Layout -> Advanced

The CSS for you as an individual is in

My Page-> Manage My Page ->Appearance->Advanced

 

Since I am a generalized software developer and not a real Ning guru, if this does not help, then I would tend to start looking at the underlying HTML and CSS files instead of simply using Ning.  This is really the bottom-line way of answering this question if you cannot find it through the Ning software.  This entire discussion thread is helping those who are having trouble with Ning by falling back on fundamental knowledge of HTML and CSS.  For more specific help with Ning, it was Chris and Eric Suesz who were most helpful to me in understanding where the CSS is in Ning.  The best way to find all of the CSS for your network is to use View Source on any Ning page, look for the CSS that is internal to the page, and look for CSS links to other files, get those files, and look at them.  Another approach might be to save a Ning HTML file locally.  On a PC, this saves copies of all subsidiary files, including CSS files.  You can then look at all these files, and see the CSS files rather easily.  This can be easier in case there are files that include files.