Home » How-To Guides » How-To Guide: Teachers Network CSS Style Reference

How-To Guide: Teachers Network CSS Style Reference

This How-To Guide is the third part of a three part series on web page development.  The first guide, Creating Links, provides a simple introduction to HTML, how to create links to external content, and how to include content from other sources inside your own pages. The second guide, Image Guidelines, provides an introduction to CSS, image size recommendations and how to use this information using the visual mode of the site editor.  The first two guides provide examples of how features are coded in HTML as well as how they can be done only using the visual mode of the site editor. Even if only the visual mode of the editor is to be used, knowledge of what happens behind the scenes (in the HTML) can make using the visual editor more natural.

This third guide (Teachers Network CSS Style Reference) provides a reference for all Teachers Network CSS styles.

The complete series:

This guide assumes the reader has already read and understood the content in both previous guides – Creating Links and Working With Images.

Note: most styles listed here will not properly display in the visual mode of the site editor however they do render correctly when displayed outside of the editor.

At the time of this writing the available CSS styles work with images and lists and are covered separately below.  It is envisioned that additional styles will be made available in the future and this document will be updated as they become available.   If you have an need for a style that is not present, please let us know and we will consider adding to the list here.

Image Styles

For an introduction on image size recommendations please refer to the Working With Images How-To Guide (second in this series).  Most of the image styles here are used to resize or constrain image sizes.  Several additional styles such as tn-image-border, tn-image-ds and tn-image-sm add borders or drop shadows to images and shrink top/bottom image margins respectively. Additional styles are being added to this category as needed.

Image Width Styles

300 Pixel Width
Used for large section header graphics. This will take up most of the screen width on smaller devices such as most cellphones however is large enough to look reasonable on larger screens. Normally right justified in a section. Note: it could be argued that a larger size image should be specified here that displays better on desktop monitors and that could be used as more of a banner.
CSS: tn-image-300
200 Pixel Width
Standard side graphics for use in articles. Early articles used 150 and in some cases 100 pixel wide images but they looked out of place on larger displays. The 200 pixel width should be used instead for most articles. Note: currently 200 pixels does look a bit large and out of place on the smallest of devices (small cellphones with a 320 pixel viewport). Images in this viewport width are now automatically resized to 150px.
CSS: tn-image-200
150 Pixel Width
This is the old standard side graphics image size. Probably should not be used anymore in preference to the 200 pixel option.
CSS: tn-image-150
100 Pixel Width
Small image size that occasionally comes in handy when used with lists or tables.
CSS: tn-image-100

Misc Image Styles

tn-image-border 1 Pixel Border
Creates a 1 pixel black border around the enclosed image.
tn-image-ds Image Drop Shadow
Creates a 3 pixel grey drop shadow around the enclosed image giving it a pseudo 3-dimensional appearance.
tn-image-sbs Side by Side Images
This class is designed to be applied to the <figure> tag to create images that can stack side by side on the display.  Structures should take the following form:

<figure class=”tn-image-sbs”>
     <img src=”url-to-image”>
     <figcaption>Caption for Image</figcaption>
</figure>

 These structures will be floated left and have css margins of 10 5 8 5 applied.   The caption will be displayed in bold.  See Examples section below for more details and float related issues.
tn-image-sm Shrink Vertical Margins
Assigns -20 px to both top and bottom margins.  This is used occasionally for images at the top of the page where paragraph margin CSS in adjoining elements breaks the image placement.

Margins

The standard site styles adjust margins around elements properly most of the time.   There are cases however when the standard margins do not work as expected.  An example is an image directly following an H2 header.  These often appear right next to the extended underline.  There should be a space between the header and image elements.   To correct this we can add one of the following styles to the IMG tag.

Several styles have been added so that in situations like this margin styling can easily be added using the site editor.   These styles can be applied to any block level element.

tn-margin-XX
 5/10/20 Pixel Margin – All Sides
Creates a 5, 10 or 20 pixel margin around the entire element.   This is applied to all four sides of the element.  Example: tn-margin-10 creates a 10 pixel margin.
tn-top-XX
 5/10/20 Pixel Top Margin
Creates a 5, 10 or 20 pixel top margin to the enclosed element.  Example: tn-top-5 creates a 5 pixel top margin.
tn-bottom-XX
 5/10/20 Pixel Bottom Margin
Creates a 5, 10 or 20 pixel bottom margin to the enclosed element.  Example: tn-bottom-20 creates a 20 pixel bottom margin.
tn-right-XX
 5/10/20 Pixel Right Margin
Creates a 5, 10 or 20 pixel right margin to the enclosed element.  Example: tn-right-10 creates a 10 pixel right margin.
tn-left-XX
 5/10/20 Pixel Left Margin
Creates a 5, 10 or 20 pixel left margin to the enclosed element.  Example: tn-left-5 creates a 5 pixel left margin.

List Styles

Multi-Column Display

These three styles (tn-two-column, tn-three-column and tn-four-column) display the selected container in the respective number of columns.  While designed for lists (<ul> and <ol>) these styles should also work with most content enclosed in <div> containers.   Consider the following HTML:

<ul class=”tn-three-column”>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
</ul>

 The rendered output is:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6

Unfortunately there is no easy way to insert the CSS class using the visual mode of the editor (for either lists or div’s). For now at least you will need to switch into the text mode of the editor and manually insert the style attributes into the desired list or div tags.

Download Image Icons

We found that we needed to create download lists on a regular basis.  Standard anchor tags by themselves do not convey any information about the type of file that is being referenced.   To get around this several classes were created that are used with anchor tags to display a standard download icon before the URL.  Sample HTML:

<h6>Download Image Icons Example</h6>
<a class=”tn-vid-dl” href=”/”>Video Download Example</a><br />
<a class=”tn-ext-dl” href=”/”>File Download Example</a><br />
<a class=”tn-pdf-dl” href=”/”>PDF FIle Download Example</a><br />
<a class=”tn-yt-dl” href=”/”>YouTube Download Example</a><br />
<a class=”tn-zip-dl” href=”/”>Zip File Download Example</a><br />

This produces the following:

Download Image Icons Example

Video Download Example
File Download Example
PDF FIle Download Example
YouTube Download Example
Zip File Download Example

Of course the href= should point to actual content instead of the site home page to be meaningful. The images that are inserted are 24 x 24 pixel in size.

Floats and clearall Class

Floats are CSS properties that allow elements to be re-positioned on the display.  They are very useful when building pages that can adjust to differing display dimensions.  A good example is our side by side image class (tn-image-sbs) shown above.  This class, when applied to <figure> blocks, allows them to float next to each other dependent upon the available width of the display.   The HTML code is simple and the resulting page works well across devices.

A common problem with this approach is that the next block level item after the last image will also be floated to the right of the last image, assuming enough space is available.  This is not usually what we want.  To make sure that the next block gets displayed independent of the image floats we need to remove the float.  This is typically done with the CSS clear:both directive.  The standard CSS that is loaded with all Teachers Network pages includes a very simple class called clearall which has this singe rule as a member.  You can apply this class to any block level item and it should reset floats as desired.  Another approach, which may be easier to maintain in many situations is to create an empty container of this class:

<div class=”clearall”></div>

This has the advantage that you can manually enter this in the text mode of the editor and then continue to use the visual editor on other elements without having to worry about loosing the clear.  We use this technique in our Side by Side Image example below.

For more information on floats and the clear directive, there is a very good discussion and tutorial presented on the StackOverflow site (opens in a new window).

Examples

We are putting together an example section where we show how to do a few of the more complicated but common tasks.   The Side by Side image example is presented initially.   If you have any publishing problems you need help with let us know.   If it looks like others may benefit from what you are trying to do we will document the solutions here as well.

Side by Side Images

Displaying images together is a common task for most designers.  The visual editor provides some simple ways to do this but the results do not always look the best.  In addition it is important that your images display well on all sizes of displays, from small cellphones up to full HD monitors (or larger).  At the same time building the page content needs to be reasonably simple and straightforward.  In our example we will show what is involved in putting together the simple My Favorite Food section below.

My Favorite Food
Smoothie
Hamburger
Fruit Salad

For images to display well together they must be a common size.  Images of different sizes create uneven margins and are hard on the eye.  The images you see above are 150 x 150 pixels square.  The original mage files that were used were very different.   They were not square in size and the dimensions were several thousand pixels wide and a bit less in height.  The good news is that creating these small cropped thumbnail images is very easy.  The image uploader (part of the visual editor media insert) creates several sets of square thumbnails every time you upload a new image.  Before actually inserting the image into the page select the image size you want to insert and you’re done.  There is no need to do fancy image editing before uploading just for this.

The example above starts out with a My Favorite Food string defined as a Header 5.  After this we uploaded three photos of food using the standard visual editor uploader and chose the 150 x 150 thumbnail to insert into the page for each image.  We then went in and using the visual editor edited (advanced) each image and added the following CSS styles: tn-image-150 and tn-image-ds.   The tn-image-150 style gives the browser a hint in case it needs to adjust the image for small displays.  The tn-image-ds style adds a 3 pixel grey drop shadow to the image.

Now that we have our nice heading and images on the page we need to lay them out in a nice way that adjusts to the display size of the reader.  It would also be nice if we could label each of these.   To do this we create <figure> elements and use the CSS float property to allow them to move around.   To make this simple we only have to specify tn-image-sbs as the class for each of the <figure> blocks (see the definition for tn-image-sbs above).  We don’t worry about the floating of elements as this is transparently handled by the CSS in the background.  The <img> tag for each of the images is enclosed inside a <figure> tag along with a <figurecaption> tag to specify the desired label.    Finally to wrap it all up we need to terminate the float and we do this with the clearall style described above (we use an empty div for this).

This may sound involved and complicated but the resulting HTML is reasonably straightforward:

<h5>My Favorite Food</h5>
<figure class=”tn-image-sbs”>
     <img src=”/images/food-1-150×150.jpg” class=”tn-image-150 tn-image-ds” />
     <figcaption>Smoothie</figcaption>
</figure>
<figure class=”tn-image-sbs”>
     <img src=”/images/food-3-150×150.jpg” class=”tn-image-150 tn-image-ds” />
     <figcaption>Hamburger</figcaption>
</figure>
<figure class=”tn-image-sbs”>
     <img src=”/images/food-2-150×150.jpg” class=”tn-image-150 tn-image-ds” />
     <figcaption>Fruit Salad</figcaption>
</figure>
<div class=”clearall”></div>

Other Useful How-To Guides

Web Page Development Series