Tutorial site 2: Styling

Cyteis Help

In this tutorial, we will be creating a page for a fictitious site and applying more sophisticated styling techniques. It is assumed that you have read the previous tutorial and are now familiar with:

  • Creating a website or a page
  • Creating, importing and editing sections
  • Changing a Layout of a page
Contents
  1. Layout
  2. Style
  3. End Result

Layout

Please use the previous tutorial as a guide to create a page with the following layout and contents (or other content of your choice):

Layout Menu Main


For this website, we want to use black as the background-color and lime as the font-color. We also want the menu to be on the left-hand side of the page. To align the menu section to the left-hand side of the page, please click on the menu box under Layout and change the "Float" to Left and "Other CSS" to width:20%; and then click on the Save button:

 ⇒ 

This will restrict the width of the Menu section to 20% of page's width and float it to the left-hand side. If you view the page now, you will see that the content of the main section is wrapped around the Menu section (only if you have enough text to wrap over). If you don't want this and want the menu section to be completely seperate from the main section then under Layout, click on the main rectangle and change the "Float" to Left and Other CSS to width:75%; - and the main section will now be seperate.

Style

We want to decorate the Menu section with some padding space and a border to help seperate it. To do this, click on the menu rectangle under Layout and in the "Other CSS", append the following:  border: blue 1px solid; - this will surround the Menu section with a blue color border, which is solid (as opposed to dashed, dotted, etc.) and 1-pixel thick:


We also want to add a padding space between the Menu section and Main section. Click on the main rectangle under Layout and append: padding-left:10px; this will add 10-pixels space on the left-hand side of the Main section.

Next, we want to have two div containers for the menu: one for Topics and one for Contact. Div is a container for seperating sections of a page. First of all, click on the Show Blocks button  to activate block display in the Editor. Next, click on the Create Div Container  and then on the Advanced tab. Here, you can specify the ID, Style or classes for the Div. Please add the following in the style textbox: border-bottom: 1px dashed white;padding-bottom:5px; 


This will add a white border and a 5px padding space at the bottom. Write your Topic menu contents inside this div. Next, please create a second div element and move the Contact menu content in there. This is what it should look like now:

 
Finally, we want to change the font-family to "Courier New", Courier, monospace for everything and to change the background-color to black and the font color to lime. One of the ways to achieve this is to highlight all of the text and then select lime as the font color. However, there is a better way to do this. In the Body section, change the Background color to Black. 

In the Header, add the following:
<style>
body {
font-family: "Courier New", Courier, monospace
color: lime;
}
</style>

This CSS code specifies that we want the font to be "Courier New", Courier, monospace and the color to be lime for the whole page (body refers to the contents of the page). This is what the Header should look like:
 
Of course, you can enter any CSS code that you like in the Header (for global CSS settings), Layout (for CSS specific to the section), or embed it within the actual section's contents for more granular styling.

End Result

In this tutorial, we changed the styling and layout of a page, partially through using CSS code. Assuming that all went well, this is how our site should look like: Menu page

The advantage of using CSS is that you can easily update the styling through a single place. For example, changing "lime" to "yellow" requires only amending the "color: lime" line. It also allows you to seperate the content and styling. The Float dropdown provides an easy way to specify what direction a certain section is destined for. Browsers use the CSS styling to present the page to viewers in the most convinient way. Next tutorial, we will be looking at adding Javascript to the page.

 

Comments