Search

 

Module: Editor

Version: 4.2.1 +

User: Developer / Designer

Level: Beginner

Introduction

In this tutorial we'll show you how to style your website. We will add a stylesheet in which we define what our website must look like. By applying CssClasses to the objects in our application (in the Futurama Editor), we can style the website the way we want it to look. 

 

Prerequisites

- The Futurama Editor must be installed.

- Futurama Runtime must be installed.

- Basic knowledge of CSS is recommended.

- Completing the tutorial Creating a Website Application first, is recommended.

 

Description

In this tutorial we will show you the basics of how to apply CSS (Cascading StyleSheets) in your Futurama-website.

In the previous tutorial we created the website-application, only consisting a number, the result of the savings-formula. In this tutorial we will extend our website with webpanels - the general building 'blocks' for our website - and more content: general content, including graphics and text.
We divide our website into different sections, and give the sections the appropriate content.
By applying CssClasses to the website-objects we created, we can give the object the lay-out we want. Therefore we introduce the stylesheet that we will link to the website. The stylesheet already contains the style-tags we intend to use for our website.

We end up with a website that already shows the basic structure of the website we want to build.

In the next tutorial we will introduce interactivity to the website. We will create input-fields for the interest and cash balance, and the savings account will be calculated based on the values entered.

Video

 
ContentsTime
1) Intro 0 - 1.01
2) Adding structured content 1.01 - 2.35
3) Adding a stylesheet 2.35 - 3.57
4) Styling your website 3.57 - 10.51
image  (rightclick, save as...)
 

Related Topics

- Rendering WebSite objecten: Explains how different Futurama-objects are rendered, and how you can style them with CSS

External Links

- Cascading Style Sheets (CSS) (W3C): Explains what CSS is

- CSS Tutorials (W3Schools): Examples and tutorials that explain how to use CSS

Exercises

  1. Adding CSS (Easy)

Updated: 2013-01-07